clone(overrides, argsOnly) → {FusionCharts|object}

Use this function to create a copy of a chart instance. Cloning a chart object results in creation of a new chart with identical construction properties of the chart being cloned. A cloned chart is not rendered by default and needs to be provided a container DOM element to be rendered into. A cloned chart gets one auto-generated chart Id assigned.

Parameters:
Parameter Description
overrides
Type:
object
Attributes:
<optional>
<nullable>

This parameter can be very useful in instructing what changes needs to be done while cloning a chart. It accepts all the construction parameters of a new FusionCharts instance.

For example, passing pieChart.clone({type: 'column2d'}); will clone the pie chart, but set its chart-type as column2d.
argsOnly
Type:
boolean
Attributes:
<optional>
Default:
false

Setting this to true does not return a new FusionCharts object. Instead, it causes the function to return a serializable object that can be later passed on while creating a new FusionCharts and as such create a clone.
Returns:
Type:

FusionCharts or object

isActive() → {boolean}

Denotes whether a chart is "active" or not after being rendered. This is primarily relevant for Flash variant of the charts since they tend to loose functionality when hidden or scrolled away as a measure to save system resources.

For JavaScript charts, this returns false when a chart has not been rendered. As such, using the function {@linkFusionCharts#hasRendered} is more relevant.

Deprecated:
  • 3.4.0 - The removal of Flash variant of the charts discards the use of this function since JavaScript are always "active" and does not loose its functionalities when out of viewport of the browser.
    Returns:
    • Returns true if a Flash chart is visible and can communicate with the rest of the page using its internal JavaScript API. For JavaScript charts, this returns false when a chart has not been rendered.
    Type:

    boolean

    chartType(value, options) → {string}

    Gets or sets the chart type of an instance of FusionCharts.

    To change the chart type, pass the new chart type as the first parameter to this function. The chart is automatically re-rendered when a new chart type is set. To get the current chart type, call this function without any parameters.

    When the chart type is changed using this method, the chart is re-rendered and the FusionCharts#event:chartTypeChanged event is fired.

    Parameters:
    Parameter Description
    value
    Type:
    string
    Attributes:
    <optional>

    Sets the new chart type.
    options
    Type:
    object
    Attributes:
    <optional>

    During modifying the chart type using this method, additional options can be passed on to update chart data and re-render the chart at the same time. Note that these options are ignored if you do not provide a value (first) parameter.

    Properties
    Parameter Description
    dataSource
    Type:
    string or object

    Provide a new source of data during the change of chart type.
    dataFormat
    Type:
    FusionCharts~dataFormats
    Attributes:
    <optional>

    Specify the data format of the new dataSource provided during chart-type update. If this is not provded, then it is assumed that the dataSource provided is same as the existing or default dataFormat. If dataSource is not provided, this parameter is ignored.
    Since:
    • 3.4.0
    See:
    Fires:
    Returns:

    The current chart type is returned.

    Type:

    string

    Example
    // Render a column chart and on click of a button toggle it from column to pie and vice versa.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        dataSource: 'weekly-sales.json',
        dataFormat: 'jsonurl'
    }).render();

    // Assign the functionality of toggling chart type when clicked on
    // a button (with an id toggle-chart-type).
    document.getElementById('toggle-chart-type').onclick = function () {
        if (chart.chartType() === 'column2d') {
            chart.chartType('pie2d');
        }
        else {
            chart.chartType('column2d');
        }
    };
});

    render(containerElement, insertMode, callback)

    Creating a chart using new FusionCharts() merely creates a JavaScript instance of the chart. The chart is not yet made visible on the page. In order to render it in a location on the page, this function needs to be called. Usually, when the chart is instantiated, the renderAt construction parameter specifies the element on the page inside which the chart will be rendered. If the renderAt parameter is not provided during construction of the page, then the same can be provided as the first parameter of this function.

    This function renders a chart inside a container element on a page. If a chart is already rendered, it can be re-rendered inside the same container DOM element or some other element.

    Parameters:
    Parameter Description
    containerElement
    Type:
    string or DOMElement
    Attributes:
    <optional>

    A reference or id of the DOMElement inside which the chart is to be rendered. If this argument is not provided, it is assumed that the renderAt option is provided during creation of the chart.
    insertMode
    Type:
    FusionCharts~DOMInsertModes
    Attributes:
    <optional>
    Default:
    replace

    This parameter specifies the method using which the chart's DOM element will be inserted within the containerElement. For more information regarding DOM insert modes, see FusionCharts~DOMInsertModes
    callback
    Type:
    FusionCharts~renderCallback
    Attributes:
    <optional>

    This parameter is a callback function that is called after the chart is successfully rendered. The last parameter to render() is always treated as a callback if it is a function.
    Fires:

    resizeTo(width, height)

    Calling this function on a chart instance resizes the chart to the specified width or height. This function is only available for charts that have already rendered.

    Similar to setting the width and height of a chart through the new FusionCharts() constructor, the values for width and height can be passed in number or percentage for this function. Setting a percentage causes the chart to partially redraw itself when chart container is resized.

    Calling this function without a value for either width or height will return the current value of the width or height respectively.

    For example, this function is useful in controlling the dimension of chart based on the change in dimension of a resizable dialog box. It is also useful in resizing charts for responsive layouts, based on device orientation change.

    When dimension is set in percentage, the charts use a very low-profile polling at an interval of 300ms to check whether the chart container has effectively resized. It ignores repeated resizes.

    Parameters:
    Parameter Description
    width
    Type:
    numeric or percent
    Attributes:
    <optional>

    Set the width of the chart in pixels or percent.
    height
    Type:
    numeric or percent
    Attributes:
    <optional>

    Set the height of the chart in pixels or percent.
    Fires:

    dispose()

    Calling this function on an instance of FusionCharts disposes the chart completely. This removes it from the DOM tree and also clears the entire chart object. Upon successful disposal, chartInstance.disposed is set to true.

    It is recommended that you dispose unused charts to save memory and avoid memory leaks in your application or dashboard.

    Fires:

    configure(option, value)

    FusionCharts displays various status messages while rendering a chart. For example, while a chart's data is being fetched from a remote URL, the chart will display "Retrieving data. Please wait." These messages can be configured using this function.

    Parameters:
    Parameter Description
    option
    Type:
    FusionCharts~chartStatusMessages

    The option can either be a string specifying the property that is to be configured, in which case, the second parameter must be provided. Otherwise, this can be an object having key-value pair of all configuration options.
    value
    Type:
    string
    Attributes:
    <optional>

    In case the first parameter is a single key as string, this parameter must be provided as value of that configuration key.
    Since:
    • 3.2.0

    <static> render(options, callback) → {FusionCharts}

    Render FusionCharts directly using the simplest one-line argument parameter. This function directly renders FusionCharts into the container specified in arguments.

    Calling this function directly is same as creating a new instance of FusionCharts and calling .render() on it, i.e., var chart = FusionCharts.render({...}); is same as var chart = new FusionCharts({...}); chart.render();.

    Parameters:
    Parameter Description
    options
    Type:
    object

    Options required to create FusionCharts. The option must have the renderAt parameter for the render to happen instantly.
    callback
    Type:
    FusionCharts~renderCallback
    Attributes:
    <optional>

    Upon successful render of a chart, a function passed to this parameter is called.
    Fires:
    Returns:
    • Returns the newly created instance of FusionCharts object.
    Type:

    FusionCharts

    Example
    FusionCharts.ready(function () {
    var chart = FusionCharts.render({
        type: "column2d",
        renderAt: "chart-container-div",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    });
});

    isPlotItemSliced(index) → {boolean}

    Pie charts have slices that can be clicked to slice in and out. Checks whether a particular wedge of Pie or Doughnut chart is sliced-out or sliced-in.

    Available on pie and doughnut chart types only.

    Parameters:
    Parameter Description
    index
    Type:
    number

    The index of the data corresponding to the pie/doughnut slice.
    Returns:
    • The sliced state of the pie/doughnut wedge. Returns true if it's sliced out, or false if it's sliced in.
    Type:

    boolean

    Example
    // Render a pie 2d chart with some data in sliced out state, provide data index
// in an input textfield and get the sliced state of the pie on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Get the sliced state of a pie returned when clicked on a button
    // (with an id pie-sliced-state). It picks the data index from
    // an input textfield (with id pie-data-index).
    document.getElementById("pie-sliced-state").onclick = function () {
        var dataIndex = document.getElementById("pie-data-index").value,
            slicedState = chart.isPlotItemSliced(dataIndex);
    };
});

    slicePlotItem(index, slice) → {boolean}

    Pie charts have slices. These slices can be clicked by users to slice in or slice out. Slices a pie/doughnut wedge to in / out state. In absence of the optional second parameter, it toggles the sliced state of the pie. The second parameter only enforces a specific sliced state.

    Available on pie and doughnut chart types only.

    Parameters:
    Parameter Description
    index
    Type:
    number

    The index of the data corresponding to the pie/doughnut slice.
    slice
    Type:
    boolean
    Attributes:
    <optional>

    Gives direction to chart on what is the required sliced state. For true, it slices out, if in sliced-in state. Or else, maintains it's sliced-out state. And vice-versa.
    Fires:
    Returns:
    • The final sliced state of the pie/doughnut wedge. Returns true if it's sliced out, or false if it's sliced in.
    Type:

    boolean

    Example
    // Render a pie 2d chart, provide data index in an input textfield
// and toggle the sliced state of the pie on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Toggle the sliced state of the pie when clicked on a button
    // (with an id pie-sliced-state). It picks the data index from
    // an input textfield (with id pie-data-index).
    document.getElementById("pie-sliced-state").onclick = function () {
        var dataIndex = document.getElementById("pie-data-index").value;
        chart.slicePlotItem(dataIndex);
    };
});

    centerLabel(labelText, options)

    Sets the center label in Dougnut 2D chart. The label cosmetics are configurable via the second optional parameter, which accepts a host of related properties.

    Available on doughnut chart only.

    Parameters:
    Parameter Description
    labelText
    Type:
    string

    The text to be displayed at doughnut center.
    options
    Type:
    object
    Attributes:
    <optional>

    The optional parameter that holds a host of configurable params with most them being cosmetic properties of the center label. The properties are case sensitive.

    Properties
    Parameter Description
    font
    Type:
    string
    Attributes:
    <optional>

    Sets the font face of the label.
    fontSize
    Type:
    string
    Attributes:
    <optional>

    Defines the font size of the label.
    bold
    Type:
    boolean
    Attributes:
    <optional>

    Specifies of whether the label be bold.
    italic
    Type:
    boolean
    Attributes:
    <optional>

    Specifies of whether the label be in italic.
    color
    Type:
    hexcolor
    Attributes:
    <optional>

    Sets the color of the label text.
    alpha
    Type:
    alpha
    Attributes:
    <optional>

    Sets the opacity of the label text.
    hoverColor
    Type:
    hexcolor
    Attributes:
    <optional>

    Sets the hover color of the label text.
    hoverAlpha
    Type:
    alpha
    Attributes:
    <optional>

    Sets the hover opacity of the label text.
    bgColor
    Type:
    hexcolor
    Attributes:
    <optional>

    Sets the color of the label background.
    bgAlpha
    Type:
    alpha
    Attributes:
    <optional>

    Sets the opacity of the label background.
    borderColor
    Type:
    hexcolor
    Attributes:
    <optional>

    Sets the color of the label background border.
    borderAlpha
    Type:
    alpha
    Attributes:
    <optional>

    Sets the opacity of the label background border.
    borderThickness
    Type:
    number
    Attributes:
    <optional>

    Sets the thickness of the label background border.
    borderRadius
    Type:
    number
    Attributes:
    <optional>

    Sets the radius for rounded label background.
    padding
    Type:
    number
    Attributes:
    <optional>

    The padding between extremities of the label and inner periphery of the doughnut. For rectangular label background, it's relative to any of the 4 corners. While for circular background, it's the gap between the 2 concentric circles, background border and inner periphery.
    textPadding
    Type:
    number
    Attributes:
    <optional>

    For rectangular label background, it's the gutter between the text and the background border. While for circular background, it's the minimum space between the background border and the containing circle of the text.
    toolText
    Type:
    string
    Attributes:
    <optional>

    Sets the tooltext for the label.
    Fires:
    Example
    // Render a doughnut 2d chart and set center label with some
// configuring params on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "doughnut2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of setting the center label when clicked on
    // a button (with an id set-center-label).
    document.getElementById("set-center-label").onclick = function () {
        chart.centerLabel("The central label", {bold: true, toolText: "center label tooltext"});
    };
});

    startingAngle(angle, relative) → {degrees}

    Rotates the pie/doughnut chart to a specific angle or by a specific angle. The mode of operation is controlled by the optional second parameter. Even the first parameter is optional, in absence of which, the chart doesn't rotate and simply returns the current starting angle of the pie/doughnut chart.

    Starting angle of a pie/doughnut chart is the angle at which the starting face of the first data is aligned to. Each pie is drawn in counter clock-wise direction.

    Available on pie and doughnut chart types only.

    Parameters:
    Parameter Description
    angle
    Type:
    degrees
    Attributes:
    <optional>
    Default:
    0

    The angle by which to rotate the entire pie/doughnut chart.
    relative
    Type:
    boolean
    Attributes:
    <optional>
    Default:
    false

    Specify whether the angle being set is relative to the current angle or with respect to absolute 0.
    Returns:
    • The final state of the starting angle of the chart.
    Type:

    degrees

    Example
    // Render a pie 2d chart and rotate the chart by 90 degrees on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of rotating the chart by 90 degrees when clicked on
    // a button (with an id rotate-chart).
    document.getElementById("rotate-chart").onclick = function () {
        chart.startingAngle(90, true);
    };
});

    lockResize(state) → {boolean}

    Controls a chart's automatic resizing ability when its dimension is in percentage.

    This function has to be called before a chart has rendered. Using FusionCharts#hasRendered can be useful here.

    If this function is called without parameter, it returns the current state of resize lock.

    Parameters:
    Parameter Description
    state
    Type:
    boolean
    Attributes:
    <optional>

    Sending true for this parameter causes the automatic percentage based resize to be turned off. If resize is already locked, sending false unlocks it.
    Returns:
    • Returns whether the chart's automatic resize feature has been locked or not.
    Type:

    boolean

    hasRendered() → {boolean}

    Returns whether a chart has been successfully rendered or not.

    See:
    Returns:
    Type:

    boolean

    setTransparent(transparency) → {boolean}

    Sets the chart's container background color as transparent. This is not the chart's background. It is the background of the container DOM element within which the chart has been rendered.

    Parameters:
    Parameter Description
    transparency
    Type:
    boolean

    Passing true implies that the chart is transparent.
    Deprecated:
    • 3.4.0 - The container transparency can now be controlled using the `containerBackgroundOpacity` parameter while creating a new instance of FusionCharts.
      Returns:
      Type:

      boolean

      feedData(stream)

      This function feeds real-time data to real-time charts and gauges. The function accepts a string containing the real-time data.

      Parameters:
      Parameter Description
      stream
      Type:
      string
      See:

      getData()

      This function returns the value of the data set on real-time charts and gauges.

      See:

      setData(value, label)

      This function feeds real-time data to real-time gauges. In single value gauges (LEDs, Bulb, Cylinder, Thermometer) the function takes a numeric value as the parameter. For Angular gauge and Horizontal Linear gauge, this function accepts two parameters - the dial number and the value to update.

      Parameters:
      Parameter Description
      value
      Type:
      string
      label
      Type:
      string
      See:

      stopUpdate()

      See:

      restartUpdate()

      See:

      isUpdateActive()

      See:

      clearChart()

      This function is used to clear the entire canvas when a real-time chart is being updated.

      An alternative to using this function is to select the "Clear Chart" option from real-time context menu. The real-time context menu can be activated by setting the showRTMenuItem attribute to 1 in chart configuration.

      See:
      Fires:

      zoomOut()

      Zooms ZoomLine chart one level out

      Fires:

      zoomTo(startIndex, endIndex)

      Zooms ZoomLine chart to a range of data.

      Parameters:
      Parameter Description
      startIndex
      Type:
      number

      The index of the dataset from which it needs to be zoomed into.
      endIndex
      Type:
      number

      the index of the dataset until which it needs to be zoomed into.
      Fires:

      resetChart()

      Reset all zoom, pan and pin actions that has been done on ZoomLine chart.

      Fires:

      setZoomMode(yes)

      Switches between zoom and pin mode. This function does not work when allowPinMode is set to 0 in chart XML or JSON.

      Zoom Line charts can have either a zoom mode or a pin mode. Zoom mode lets you select a section of the chart by dragging mouse cursor across the canvas and the chart zooms in on the selected section. In pin mode, the selected portion can be dragged around to compare with the rest of the chart. Zoom mode and pin mode can be toggled by clicking a button on the top right corner of the chart. This function lets you switch between zoom mode and pin mode programmatically.

      Parameters:
      Parameter Description
      yes
      Type:
      boolean

      Boolean value to be true if zoom mode needs to be activated, false to activate pin mode.
      Fires:

      getViewStartIndex() → {number}

      Returns the index of the first visible point on canvas of ZoomLine chart

      Returns:
      Type:

      number

      getViewEndIndex() → {number}

      Returns the index of the last visible point on canvas of ZoomLine chart

      Returns:
      Type:

      number

      setChartAttribute(attributes, value)

      Updates a chart's data attributes with the new attribute-value pair. In other words, it updates a chart's data definition root. That would be <chart> node in case data is in XML format or the chart {} object in case it is in JSON format. You must have the chart's data being set for these attributes to take effect.

      This function is useful when updating a chart's configuration after it has been rendered once. The function internally retrieves the last data set on the chart (using FusionCharts#getJSONData). It then updates the { chart: {} } object of the data using the new attributes provided and then sets this data back to the chart.

      Setting the value of a parameter to null causes the attribute to be removed (unset) and restored to it's default value.

      Parameters:
      Parameter Description
      attributes
      Type:
      object or string

      The set of attributes to be is passed on as key-value pair of an object. In case of updating a single attribute, the key can be passed as a string and the value as the second parameter.
      value
      Type:
      string
      Attributes:
      <optional>
      <nullable>

      In case the first parameter is a single attribute as string, the second parameter (i.e. this parameter) must be provided as the value of that key.
      Example
      // Here we would render a chart in a DOM element with an id, say "chart-container", and upon clicking the
// chart, we would toggle the visibility of its legend.
FusionCharts.ready(function () {
    FusionCharts.render({
        id: 'salesChart',
        type: 'pie2d',
        renderAt: 'chart-container',

        dataSource: {
            chart: {
                caption: 'Revenue distribution'
            },
            data: [
                { value: '22', label: 'Redistribution' },
                { value: '54', label: 'Internal Circulation' },
                { value: '24', label: 'Sale' },
            ]
        },

        events: {
            chartClick: function (event) {
                var chart = event.sender,
                    // Check whether legend is currently visible by fetching the showLegend attribute
                    legendVisible = !!+chart.getChartAttribute('showLegend');

                // Set the opposite of the current state of the legend's visibility.
                chart.setChartAttribute('showLegend', legendVisible ? '0' : '1');
            }
        }
    });
});

      getChartAttribute(attribute) → {string|object}

      Fetch value of chart attributes (configurations) that have been explicitly applied to root level chart. This function can be used to return value of a single attribute or a list of attributes or all attributes have been applied to the chart.

      • To fetch a single attribute, pass the name of the attribute as a string.
      • To fetch a list of selected attributes, pass an array of attribute names. This will return an object with items in the order in which they are provided in the array.
      • To fetch a list of all attributes, do not pass a parameter to this function.

      If any attribute requested is not set on the chart, the value for that attribute is returned as undefined. This will be undefined even for values that are internally computed but not explicitly set. For example, for Multi-series Column2D charts, showLegend defaults to "1". But, if showLegend is not provided as part of chart configuration, requesting the value of showLegend through this function will return undefined.

      Parameters:
      Parameter Description
      attribute
      Type:
      string or Array.<string>
      Attributes:
      <optional>

      The attribute or an array of attributes that is to be fetched. If this parameter is not provided, then all available chart attributes are returned.
      Returns:

      The value of the attribute in form of a string in case a single attribute was requested. Otherwise, an object containing a set of key value pairs.

      Type:

      string or object

      getXML() → {string}

      This function returns the data and and configuration set on a chart in XML format. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#getXMLData, which does not have this limitation of being available only after the loaded event has been fired.

      Deprecated:
      See:
      Returns:
      Type:

      string

      setDataXML()

      Sets XML data set on chart. Equivalent to FusionCharts#setXMLData or FusionCharts#setChartData. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#setXMLData, which does not have this limitation of being available only after the loaded event has been fired.

      Deprecated:
      See:

      setDataURL()

      Sets XML data URL set on chart. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#setXMLUrl, which does not have this limitation of being available only after the loaded event has been fired.

      Deprecated:
      See:

      setChartDataUrl(url, format)

      Update the data of a chart by fetching contents from a URL. The URL can point to either a JSON or a XML file. The data format of the URL needs to be specified in the format parameter.

      This function fetches content from the URL provided and passes the result to FusionCharts#setChartData to update chart data. So, if the chart is already rendered, it is updated with the new data as soon as it is fetched from the URL. If the chart is not rendered, data from the URL is fetched and stored locally till the chart is rendered.

      If the data format of the URL is already known, an alternative to this function is to use either FusionCharts#setJSONUrl or FusionCharts#setXMLUrl to specify JSON or XML data URL respectively.

      It is not recommended to use this function to set data to a new chart. Instead, it is preferred to pass the URL as dataSource in the FusionCharts constructor.

      FusionCharts uses AJAX to transport data. So, ensure that the chart is running from a web-server in order to prevent browser's security restrictions of fetching local (file://) files.

      Parameters:
      Parameter Description
      url
      Type:
      string

      The URL from where to fetch the data of the chart.
      format
      Type:
      FusionCharts~dataFormats
      Attributes:
      <optional>

      The format of data that is expected to contain in the url provided. If this parameter is not provided or is not a valid member of FusionCharts~dataFormats then the current default or previously set data format is assumed.
      See:
      Fires:
      Example
      // Render a chart and fetch data from a JSON file and then when a button is pressed, change the data.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container",
        dataSource: "weekly-sales.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of updating data to a button which already
    // exists in page body and has a specific Id.
    document.getElementById("data-update-button").onclick = function () {
        // Specify the new Url to fetch data from.
        chart.setChartDataUrl("average-employee-sales.json", "json");
    };
});

      setChartData(data, format)

      Update the data of a chart in the format specified in by the format parameter. The data passed as the format parameter should be in one of the FusionCharts~dataFormats. When this function is called on a chart which has already rendered, the chart is instantly updated with the new data.

      This function can also be used to set data of a chart before it has rendered. In that case, the data being set is stored internally and passed on to the chart when it is rendered. However, this is not the preferred way to set chart data. Instead, initial chart data should be passed in the FusionCharts constructor.

      If the data format is already known, an alternative to this function is to use either FusionCharts#setXMLData or FusionCharts#setJSONData to set XML or JSON data respectively.

      Parameters:
      Parameter Description
      data
      Type:
      string or object

      The data to be passed on to the chart in one of the available data formats as specified by the format parameter.
      format
      Type:
      FusionCharts~dataFormats
      Attributes:
      <optional>

      The format of the data being passed on to the chart. If this parameter is not provided or is not a valid member of FusionCharts~dataFormats then the current default or previously set data format is assumed.
      See:
      Fires:
      Example
      // Create a chart in a page and pass data to it in `JSON` format and on click of a
// button update it with newer data.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",

                   dataSource: {
            chart: {
                caption: "Market Share",
                showPercentage: "1"
            },
            data: [
                { label: "Current Prototype", value: "30" },
                { label: "Revised Prototype", value: "35" },
                { label: "Previous Prototype", value: "25" },
                { label: "Recalled Prototype", value: "10" }
            ]
        },
        dataFormat: "json"
    }).render();

    // Set data on the chart using the setChartData function when a button is clicked.
    document.getElementById("update-data").onclick = function () {
        chart.setChartData({
            chart: {
                caption: "Market Share Impact",
                numberPrefix: "USD"
            },
            data: [
                { label: "Current Prototype", value: "13773" },
                { label: "Revised Prototype", value: "16069" },
                { label: "Previous Prototype", value: "11477" },
                { label: "Recalled Prototype", value: "4591" }
            ]
        }, "json");
    };
});

      getChartData(format) → {object|string}

      Fetch data that has been set on a chart in one of the formats specified in FusionCharts~dataFormats.

      This function needs to be called on an existing chart. If this function is called on a chart which has no data set, it returns an empty object for json, an empty <chart /> element for xml and an empty string for csv.

      Parameters:
      Parameter Description
      format
      Type:
      FusionCharts~dataFormats

      The format in which the data is to be retrieved from the chart.
      See:
      Returns:
      Type:

      object or string

      Example
      // Render a chart and upon click of a button alert the chart's data in
// CSV format.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container",
        dataSource: "weekly-sales.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of retrieving and alerting CSV data to
    // click event of a button
    document.getElementById("alert-csv-data").onclick = function () {
        alert(chart.getChartData("csv"));
    };
});

      dataReady(available) → {boolean|undefined}

      This function is used to determine whether a chart will render properly with the data set on it. This includes data that are set using functions like FusionCharts#setChartData or FusionCharts#setChartDataUrl.

      If the function is not able to determine whether the data is ready or not, it returns undefined. It will return true or false only after a chart has completed rendering, that is, the after the renderComplete event has fired.

      The function will return false if no data is set on the chart, or the data is faulty. Also, it will return false if the data provided is incompatible with the current chart type, for example, if single-series data has been set for multi-series charts.

      Parameters:
      Parameter Description
      available
      Type:
      boolean
      Attributes:
      <optional>
      Default:
      false

      Setting the available parameter to true returns the status of the data irrespective of its compatibility with chart-type. In that case, this function will return false if data provided to the chart causes FusionCharts#event:dataLoadError or FusionCharts#event:dataInvalid to be fired
      Returns:

      The returned boolean denotes whether data is ready or not. In case the status of data-readiness is unknown, this function returns undefined.

      Type:

      boolean or undefined

      <static> transcodeData(data, source, target, advanced) → {string|object}

      FusionCharts supports a number of formats in which data can be provided. The default list is mentioned at FusionCharts~dataFormats. This function allows data to be transcoded from one supported format to another.

      The primary use of this function is to convert data in one format to another without initializing a new instance of FusionCharts. It is very useful when you already have a set of data stored or prepared in a particular FusionCharts data format and you would like to convert it to another format. The fact that we do not need to instantiate a new instance of FusionCharts makes the conversion process very fast.

      Parameters:
      Parameter Description
      data
      Type:
      string or object

      The data that needs to be transcoded from one format to another.
      source
      Type:
      FusionCharts~dataFormats

      The data format of the data provided.
      target
      Type:
      FusionCharts~dataFormats

      The desired data format in which the data needs to be converted.
      advanced
      Type:
      boolean
      Attributes:
      <optional>
      Default:
      false

      Request the transcoding to return data in a verbose format where it returns the conversion result along with additional transocing information. In advanced mode, the returned data of this function is in the following format:

      Property Type Description
      data object string The result of the transcoding process
      error Error undefined In case the transcoding process failed, the error is passed here
      Returns:
      • The transcoded data is returned in the data type as associated with the target data format. The return-type depends upon the FusionCharts~dataFormats specified as the target parameter.
      Type:

      string or object

      Example
      // We would convert JSON data that is already in FusionCharts data format into CSV data format.
FusionCharts.ready(function () {
    var salesData = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
        },
        data:[{
            label: "Bakersfield Central",
            value: "880000"
        },
        {
            label: "Garden Groove harbour",
            value: "730000"
        },
        {
            label: "Los Angeles Topanga",
            value: "590000"
        },
        {
            label: "Compton-Rancho Dom",
            value: "520000"
        },
        {
            label: "Daly City Serramonte",
            value: "330000"
        }]
    };

    // Alert the data after converting it to CSV data format.
    alert(FusionCharts.transcodeData(salesData, 'json', 'csv'));
});

      getCSVData() → {string}

      Fetch data that has been set on a chart in CSV format. This function is shorthand of using chart.getChartData('csv').

      The data returned is the closest possible comma-separated value representation that has been provided to the chart. The exported data does not contain any functional or cosmetic attribute that was set on the chart. However, the following chart attributes can be set to customise the CSV output.

      Chart Attribute Type Description
      exportDataSeparator string Sets the CSV delimiter string. Default is , (comma)
      exportDataQualifier string Sets the CSV qualifier string. Default is {quot}
      exportDataFormattedVal boolean Sets whether the output will be a formatted string or pure number
      exportErrorColumns boolean Forces error output on ErrorColumn, ErrorLine and ErrorScatter charts

      For exportDataSeparator and exportDataQualifier, one can provide quotation mark, apostrophe and tab character in form of {quot}, {apos} and {tab} short-codes, respectivey.

      This function needs to be called on an existing chart that has been loaded and has a valid data. If this function is called on a chart which has no data set on it, it returns an empty string.

      As of now, the CSV data generator uses heuristics heuristic methods to determine the nature of the output since, the method does not internaly have access to the chart-type being used. As such, when a specific chart type cannot determined from the data itself, this method falls back to a generic output format.

      See:
      Returns:
      Type:

      string

      getDataAsCSV() → {string}

      Fetch the data set to the chart in comma separated values format. The delimiter can be changed by passing relevant chart attributes.

      Deprecated:
      Returns:
      Type:

      string

      getJSONData() → {object}

      Fetch data that has been set on a chart in JSON format. This function is shorthand of using chart.getChartData('json').

      This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty { } object.

      See:
      Returns:
      Type:

      object

      setJSONData(data)

      This function is used to update data of a chart using data in JSON format as defined in FusionCharts~dataFormats.

      It is a shorthand of the function FusionCharts#setChartData where the data format is always JSON. So, calling chart.setXMLData({'chart': ...}) is the same as calling chart.setChartData({'chart': ...}, 'json').

      Similar to FusionCharts#setChartData, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data. But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.

      Parameters:
      Parameter Description
      data
      Type:
      string or object

      This parameter accepts the JSON data to be passed on to the chart string or as JavaScript object.
      See:

      setJSONUrl(url)

      This function is used to update data of a chart using data from a URL in JSON format.

      It is a shorthand of the function FusionCharts#setChartDataUrl where the data format of the URL is always JSON (jsonurl). So, calling chart.setJSONUrl('data.json') is the same as calling chart.setChartDataUrl('data.json', 'jsonurl').

      Similar to FusionCharts#setChartDataUrl, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data as soon as it is fetched from the URL. If the chart has not yet rendered But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.

      Parameters:
      Parameter Description
      url
      Type:
      string

      Path to JSON data file.
      See:

      getXMLData() → {string}

      Fetch data that has been set on a chart in XML format. This function is shorthand of using chart.getChartData('xml').

      This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty <chart /> element as string.

      See:
      Returns:
      Type:

      string

      setXMLData(data)

      This function is used to update data of a chart using data in XML format as defined in FusionCharts~dataFormats.

      It is a shorthand of the function FusionCharts#setChartData where the data format is always XML. So, calling chart.setXMLData('<chart>...</chart') is the same as calling chart.setChartData('<chart>...</chart>', 'xml').

      Similar to FusionCharts#setChartData, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data. But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.

      Parameters:
      Parameter Description
      data
      Type:
      string

      This parameter accepts valid XML as a string to be passed on to the chart as data source.
      See:

      setXMLUrl(url)

      This function is used to update data of a chart using data from a URL in XML format.

      It is a shorthand of the function FusionCharts#setChartDataUrl where the data format of the URL is always XML (xmlurl). So, calling chart.setXMLUrl('data.xml') is the same as calling chart.setChartDataUrl('data.xml', 'xmlurl').

      Similar to FusionCharts#setChartDataUrl, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data as soon as it is fetched from the URL. If the chart has not yet rendered But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.

      Parameters:
      Parameter Description
      url
      Type:
      string

      Path to XML data file.
      See:

      <static> addEventListener(type, listener)

      Bind callbacks to events fired throughout FusionCharts. This method can be used to listen to events across all FusionCharts instances on a page.

      An event listener is used to execute custom functions when an event is fired. FusionCharts fires events at all stages of creating, updating, rendering or removing a chart. This function lets you tap into any of these events and provide your own functions which will be called when those events are triggered.

      An alternative to this function is to use FusionCharts#addEventListener method on a chart instance to bind to an event fired by a specific chart.

      Parameters:
      Parameter Description
      type
      Type:
      string or array

      The event name to listen to. The event name is not case sensitive. In case you want to register an event to multiple events in the same registration call, provide them as an array of event names.
      listener
      Type:
      FusionCharts~eventListener

      Pass the function that is to be executed when the event is fired. Upon an event, the listeners for that event are executed sequentially with arguments that are specific to that event. See FusionCharts~eventListener for more details on the arguments.
      Example
      // Show a message when a number of charts have been rendered on a page.
FusionCharts.ready(function {
    var counter = 0,
        threshold = 3;

    FusionCharts.addEventListener("rendered", function (eventObject) {
        counter++;
        if (counter > threshold) {
            alert("More than " + threshold + "charts rendered!");
        }
    });
});

      <static> removeEventListener(type, listener)

      Removes an event that was originally added using FusionCharts.addEventListener.

      Parameters:
      Parameter Description
      type
      Type:
      string

      The event name whose listener needs to be removed/detached.
      listener
      Type:
      function

      The listener function that needs to be removed.

      addEventListener(type, listener)

      Listen to events fired by an individual chart. For more information on the available events, refer to the events section.

      Parameters:
      Parameter Description
      type
      Type:
      string or Array.<string>

      The event name that needs to be listened to. The event name is not case sensitive. In case you want to register an event to multiple events in the same registration call, provide them as an array of event names.
      listener
      Type:
      FusionCharts~eventListener

      Pass the function that is to be executed when the event is fired. Upon an event, the listeners for that event are executed sequentially with arguments that are specific to that event. See FusionCharts~eventListener for more details on the arguments.

      removeEventListener(type, listener)

      Removes an event that was originally added using FusionCharts#addEventListener.

      Parameters:
      Parameter Description
      type
      Type:
      string

      The event name whose listener needs to be removed/detached.
      listener
      Type:
      function

      The listener function that needs to be removed.

      print(options)

      You can use this function to print individual charts. This function hides all elements on the page except the chart in concern and then invokes the page printing function (window.print()).

      This function works only for charts that have rendered completely, i.e. after FusionCharts#event:renderComplete event has fired.

      Parameters:
      Parameter Description
      options
      Type:
      object
      Attributes:
      <optional>

      Printing options

      Properties
      Parameter Description
      hideButtons
      Type:
      boolean
      Attributes:
      <optional>
      Default:
      true

      Hides all buttons on the chart.
      Fires:
      Example
      // In this snippet of code, we will render a chart on a page and
// call the print method on the chart on click of a button.
FusionCharts.ready(function () {
   FusionCharts.render({
       type: 'column2d',
       dataFormat: 'jsonurl',
       dataSource: 'data.json',

       // assuming an HTML div element exists on the page
       renderAt: 'chart-container-div'

       events: {
           renderComplete: function (event) {
               // assuming a button exists on page with a specific id
               var button = document.getElementById('print-button');
               button.onclick = function () {
                   event.sender.print();
               };
           }
       }

   });
});

      exportChart(options) → {boolean}

      Exports a chart to image or PDF document using this function. The function can be configured to export a chart and present it as a file download. Exporting of a chart is not enabled by default. The chart's data must have the exportEnabled chart attribute explicitly set to 1.

      When exporting of a chart is enabled, it is exported using a set of default options. These options can be overridden by configuring the chart data. That would allow you to configure the behavior of the export related context-menu drawn on the chart. However, in the event that exporting is done programmatically, the export parameters can be customized using this function.

      The exporting process can only be initiated after the FusionCharts#event:renderComplete event has been fired. The function itself remains undefined until the FusionCharts#event:loaded event is raised by the chart.

      Parameters:
      Parameter Description
      options
      Type:
      object
      Attributes:
      <optional>

      -

      Properties
      Parameter Description
      exportFormat
      Type:
      string
      Attributes:
      <optional>
      Default:
      png

      A chart can be exported in one of the following formats:

      Export Format Description
      png Exports the charts in high quality lossless PNG format
      jpg Exports the chart as high quality JPEG image format
      pdf Exports the chart as a PDF document
      exportFileName
      Type:
      string
      Attributes:
      <optional>
      Default:
      FusionCharts

      Using this attribute you can specify the name (excluding the extension) of the file to be exported. The extension is automatically appended depending on the exportFormat specified.
      exportTargetWindow
      Type:
      string
      Attributes:
      <optional>
      Default:
      _self

      When using download as exportAction, this lets you configure whether the return image or PDF will open in same window (as an attachment for download), or whether it will open in a new browser window (_blank).
      exportHandler
      Type:
      string
      Attributes:
      <optional>

      URL of the export server.
      exportAction
      Type:
      string
      Attributes:
      <optional>
      Default:
      download

      Specifies whether the exported image will be sent back to the browser as download, or whether it will be saved on to the server.

      Action Value Description
      download Causes the exported chart image or PDF to be downloaded as file.
      save Causes the exported chart to be saved on server.

      For the charts to be saved on server, you would need to setup your own export handling server.
      exportCallback
      Type:
      function
      Attributes:
      <optional>
      Default:
      FC_Exported

      This attribute specifies the name of the callback JavaScript function which will be called when the export event is complete. The function window.FC_Exported is the default method that will be called when no value specified.
      Tutorials:
      • Tutorial: interactivity-export-to-image-or-pdf-configuring-for-export
      • Tutorial: interactivity-export-to-image-or-pdf-set-your-export-server
      See:
      Returns:

      The function returns true if export process of the chart was successfully triggered, otherwise it returns false.

      Type:

      boolean

      getSVGString() → {string}

      Fetch the SVG of a chart as a string. This function returns the SVG that has been created by FusionCharts when rendering the chart.

      Note that this function is only available for a chart that has already been rendered.

      Returns:
      • SVG string
      Type:

      string

      <static> getObjectReference(id) → {DOMElement}

      The function returns the DOMElement that is created inside chart container by FusionCharts. The returned element is the same as accessing the FusionCharts#ref property. Note that this is the <span> element created by FusionCharts to render the chart. It is not the container element that was specified during rendering the chart as the renderAt parameter.

      Parameters:
      Parameter Description
      id
      Type:
      string

      The ID of the chart, whose DOMElement is to be referenced.
      Since:
      • 3.1.1
      Deprecated:
      • 3.2.0 - This method has been deprecated as direct access to `DOMElement` of the chart has become redundant. FusionCharts#ref property can be used in the rare case where such access to the `DOMElement` of a chart is required.
        Returns:
        Type:

        DOMElement

        Example
        // Iterate on all charts rendered on a page and move them to a common location
var sidebar = document.getElementById('sidebar-html-div'), // assuming that your common container is this
    chart;

for (chart in FusionCharts.items) {
    sidebar.appendChild(FusionCharts.getObjectReference(chart).parentNode);
}

// The above can be done without using this deprecated getObjectReference method.
for (chart in FusionCharts.items) {
    chart = FusionCharts.items[chart];
    chart.ref && sidebar.appendChild(chart.ref.parentNode);
}

        <static> formatNumber(num, type, config) → {string}

        FusionCharts formats input number based on configurations passed in chart attributes. It may be needed to similarly format other non-chart elements on page using same algorithm. This function is available to be used globally on FusionCharts object or on a specific instance of FusionCharts Suite XT.

        When called on the FusionCharts object (FusionCharts.formatNumber(),) the default number configuration settings are utilised. These can be overridden by passing additional number format configuration settings as the second parameter. Refer to chart attributes for various number format configurations.

        When called on an instance of a chart, gauge or map, the number formatting as set by the data of the chart is used. As such, the second parameter (type) accepts xAxisValues, yAxisValues or dataLabels to allow formatting to be done specific to them.

        Parameters:
        Parameter Description
        num
        Type:
        number

        The number that needs to be formatted.
        type
        Type:
        string
        Attributes:
        <optional>
        Default:
        datalabels

        A chart can be configured to format numbers differently depending upon where it is being used. The formatting of data values can be different than that of x-axis labels. As such, passing yaxisvalues, xaxisvalues or datalabels as a value of this parameter returns the formatted number accordingly. __Note that this parameter is not available when formatNumber is executed on FusionCharts object instead of chart instances.
        config
        Type:
        object
        Attributes:
        <optional>

        One can optionally pass additional number formatting attributes as the config parameter to override the default number formatting options of a chart. While calling formatNumber on FusionCharts object, this becomes the second parameter.
        Returns:
        Type:

        string

        Examples
        console.log(FusionCharts.formatNumber(1234.5)); // logs "1.2K"

console.log(FusionCharts.formatNumber(1234.5, {
    numberPrefix: "$"
})); // logs "$1.2K"
        // Calling number formatter on a chart instance when `renderComplete` event is fired.
FusionCharts.ready(function () {
    // Render a chart within a chart container `div` element.
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container-div',
        dataFormat: 'json',
        dataSource: {
            chart: {
                caption: "Quarterly sales summary",
                numberPrefix: "$",
                decimals: "2",
                forceDecimals: "1"
            }
            data: [
                { label: "Q1", value: "213345"},
                { label: "Q2", value: "192672"},
                { label: "Q3", value: "201238"},
                { label: "Q4", value: "209881"},
            ]
        },

        events: {
            renderComplete: function (eventObj) {
                // Call the formatNumber function of the specific chart we rendered.
                console.log(eventObj.sender.formatNumber(1234.5)); // logs "$1.23K"
            }
        }
    });
    chart.render();
});

        Configure the properties of LinkedCharts. This function accepts all properties that FusionCharts constructor function accepts. Any property passed to this function is applied to the LinkedCharts. If no properties are provided, LinkedCharts will inherit properties from the parent chart.

        LinkedCharts are essentially n-level drill-down of charts, where data points on one chart can create and render a new chart. Each level can be configured by passing the level as the second parameter of this function. Note that the first chart that triggers the drill-down (root chart) has level 0.

        Alternatively, LinkedCharts configuration for multiple levels of drill-down can be configured at once by passing them as an array to this function. In that case, the array is the only parameter passed to the function.

        The Overlay Button:

        Other than the usual construction parameters of FusionCharts, the param parameter of this function also accepts configuration for the "overlay button" of LinkedCharts. When a LinkedChart is rendered on clicking a data point, a button is rendered on the top-right corner of the chart. When this button is clicked, it closes (disposes) the linked chart.

        The cosmetics of this button can be configured by passing an overlayButton object to param. This object can have the following properties.

        Button Parameter Type Description
        show boolean Whether to show the button or not
        message string The label of the button. The default is "Close" or "Back"
        bgColor string Background color of the button in hex format
        borderColor string Border color of the button in hex format
        font string Font family of the button (comma separated list of fonts)
        fontColor string The color of the button label text
        fontSize string The size of the button label text
        bold boolean Specify whether the button label text appears bold
        padding number The padding between the label and the edges of the button
        Parameters:
        Parameter Description
        level
        Type:
        number
        Attributes:
        <optional>
        Default:
        0

        Since linked charts are multi-level drill-down, you can configure the parameters of a particular drill-down level by specifying it in this parameter.
        Tutorials:
        See:
        Examples
        myChart.configureLink({
    type: 'pie2d', // Set the linked-charts configuration to load all linked charts as Pie
    width: '80%', // The width of the charts would be 80% of their parent container
    overlayButton: {
        message: ' X ', // Set the button to show letter "X"
        bgColor:'#999999',
        borderColor: '#cccccc'
    }
});
        // Configure linked charts to show the first level drill-down as bar chart, the next as line charts and
// the third level as pie charts.
myChart.configureLink([
    { type: 'bar2d' },
    { type: 'line' },
    { type: 'pie2d' }
]);

        getSWFHTML() → {string}

        Gets the HTML of SWF

        Deprecated:
        • 3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.
          Returns:
          Type:

          string

          addVariable()

          Adds variable to Flash chart. Equivalent to FusionCharts#configure for JavaScript charts

          Deprecated:
          See:

          <static> setCurrentRenderer(name)

          Sets the default renderer for all the charts that are subsequently instantiated. The renderer changes depending upon the variant of charts being rendered (example: flash, javascript)

          Parameters:
          Parameter Description
          name
          Type:
          string

          The name of the renderer (variant of chart rendering method) that is used.
          Deprecated:
          • 3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.

            <static> getCurrentRenderer() → {string}

            Gets the current renderer that will be used during instantiation of new charts.

            Deprecated:
            • 3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.
              Returns:

              The name of the current renderer being used - flash or javascript.

              Type:

              string

              <static> ready(readyCallback, args, context)

              This function allows to register callback functions to be executed when FusionCharts library is ready to be used. In general, the framework is ready after DOMContentLoaded browser event has been fired and all the initial dependent files/modules are available. One can attach multiple callbacks by calling this function any number of time.

              The callback function is executed even when attached after FusionCharts is already ready! Thus, it is recommended that all entry-point and initialization codes are written within this block. This also helps in neatly organizing all codes within a script file or the page <head> and as such contextually separating code from HTML blocks.

              Parameters:
              Parameter Description
              readyCallback
              Type:
              FusionCharts~readyCallback

              Pass a function that would be executed as callback when FusionCharts framework is ready.
              args
              Type:
              *
              Attributes:
              <optional>
              Default:
              FusionCharts

              Argument to be passed on to the callback function.
              context
              Type:
              function
              Attributes:
              <optional>
              Default:
              FusionCharts

              In the situation where the function passed via fn parameter needs to be executed in a different scope than the default FusionCharts scope, pass the appropriate class object here.
              Example
              // Render a chart within a chart container `div` element.
FusionCharts.ready(function (FusionCharts) {
    var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container-div",
        dataSource: "my-chart-data.json",
        dataFormat: "jsonurl"
    });
    // Since we are in the `ready` block, the `chart-container-div`
    // element should be available by now.
    chart.render();
});

              showChartMessage(text, modal, cancelable)

              Shows a text message on a chart.

              Parameters:
              Parameter Description
              text
              Type:
              string

              The text message that needs to be displayed.
              modal
              Type:
              boolean
              Attributes:
              <optional>
              Default:
              false

              Boolean value whether to show the message on an overlay or on the chart. Defaults to false.
              cancelable
              Type:
              boolean
              Attributes:
              <optional>
              Default:
              false

              Boolean value applicable only if modal is true. If set to true the modal can be closable on click. Defaults to false.