Choose an item

Bubble and Scatter Charts

These chart types belong to FusionCharts XT.

Introduction

Bubble and Scatter charts are used for plotting data that can be defined in terms of multiple numeric parameters. In these charts, the x and y axes are numeric. So, the position of a data point is an indicator of two distinct numeric values. Here, we have highlighted few points that will help you understand their use and relevance for data visualization.

Scatter Chart

Scatter charts are used for plotting data that is defined in terms of two numeric parameters. Scatter charts are multi-series charts, but their data format is slightly different from that of conventional multi-series charts.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "Scatter Chart", "imgSrc": "scatter-chart-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "30%", "topPosition": "11.5%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of caption can also be customized using attributes. Know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for subcaption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "58%", "topPosition": "16%", "annotationLinks": [{ "linkDesc": "Learn how to add subcaption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of subcaption can also be customized using attributes. Learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "75%", "topPosition": "12%", "annotationLinks": [{ "linkDesc": "You can customize border for canvas, learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "X-Axis", "annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "80%", "topPosition": "50%", "annotationLinks": [] }, { "annotationNumber": "5", "annotationName": "X-Axis Title", "annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "38%", "topPosition": "63%", "annotationLinks": [] }, { "annotationNumber": "6", "annotationName": "X-Axis Labels", "annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "47%", "topPosition": "54%", "annotationLinks": [] }, { "annotationNumber": "7", "annotationName": "Y-Axis", "annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "19%", "topPosition": "20%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Y-Axis Title", "annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "11%", "topPosition": "34%", "annotationLinks": [] }, { "annotationNumber": "9", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "43%", "topPosition": "40%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "10", "annotationName": "Legend", "annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.", "annotationDescLinkPath": null, "leftPosition": "61%", "topPosition": "69%", "annotationLinks": [{ "linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size" }, { "linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position" }, { "linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ", "linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend" } ] }, { "annotationNumber": "11", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "72.5%", "topPosition": "37%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

Let's create a scatter chart plotted for two numeric values - the average day temperature (plotted on the x-axis and the sales (in USD) of beer and ice-cream (plotted on the y-axis); the chart shows how the temperature affects the sales revenue of beer and ice-cream.

To create a scatter chart follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a scatter chart, set scatter.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of scatter chart.

This chart shows a scatterplot with the x-axis indicating the average temperature. Here is what a scatter chart looks like:

FusionCharts will load here..
{
    "chart": {
        "caption": "Sales of Beer & Ice-cream vs Temperature",
        "subCaption": "Los Angeles Topanga",
        "xAxisName": "Average Day Temperature",
        "yAxisName": "Sales (In USD)",
        "xAxisMinValue": "23",
        "xAxisMaxValue": "95",
        "yNumberPrefix": "$",
        "xNumberSuffix": "&deg; F",
        "showYAxisLine": "1",
        "theme": "fusion"
    },
    "categories": [
        {
            "verticalLineDashed": "1",
            "verticalLineDashLen": "1",
            "verticalLineDashGap": "1",
            "verticalLineThickness": "1",
            "verticalLineColor": "#000000",
            "category": [
                {
                    "x": "23",
                    "label": "23° F",
                    "showverticalline": "0"
                },
                {
                    "x": "32",
                    "label": "32° F",
                    "showverticalline": "1"
                },
                {
                    "x": "50",
                    "label": "50° F",
                    "showverticalline": "1"
                },
                {
                    "x": "68",
                    "label": "68° F",
                    "showverticalline": "1"
                },
                {
                    "x": "80",
                    "label": "80° F",
                    "showverticalline": "1"
                },
                {
                    "x": "95",
                    "label": "95° F",
                    "showverticalline": "1"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Ice Cream",
            "showregressionline": "1",
            "data": [
                {
                    "x": "23",
                    "y": "1560"
                },
                {
                    "x": "24",
                    "y": "1500"
                },
                {
                    "x": "24",
                    "y": "1680"
                },
                {
                    "x": "25",
                    "y": "1780"
                },
                {
                    "x": "25",
                    "y": "1620"
                },
                {
                    "x": "26",
                    "y": "1810"
                },
                {
                    "x": "27",
                    "y": "2310"
                },
                {
                    "x": "29",
                    "y": "2620"
                },
                {
                    "x": "31",
                    "y": "2500"
                },
                {
                    "x": "32",
                    "y": "2410"
                },
                {
                    "x": "35",
                    "y": "2880"
                },
                {
                    "x": "36",
                    "y": "3910"
                },
                {
                    "x": "34",
                    "y": "3960"
                },
                {
                    "x": "38",
                    "y": "4080"
                },
                {
                    "x": "40",
                    "y": "4190"
                },
                {
                    "x": "41",
                    "y": "4170"
                },
                {
                    "x": "42",
                    "y": "4280"
                },
                {
                    "x": "54",
                    "y": "5180"
                },
                {
                    "x": "53",
                    "y": "5770"
                },
                {
                    "x": "55",
                    "y": "5900"
                },
                {
                    "x": "56",
                    "y": "5940"
                },
                {
                    "x": "58",
                    "y": "6090"
                },
                {
                    "x": "61",
                    "y": "6086"
                },
                {
                    "x": "67",
                    "y": "6100"
                },
                {
                    "x": "68",
                    "y": "6200"
                },
                {
                    "x": "70",
                    "y": "6360"
                },
                {
                    "x": "75",
                    "y": "6450"
                },
                {
                    "x": "79",
                    "y": "6650"
                },
                {
                    "x": "80",
                    "y": "6710"
                },
                {
                    "x": "79",
                    "y": "6975"
                },
                {
                    "x": "82",
                    "y": "7000"
                },
                {
                    "x": "85",
                    "y": "7150"
                },
                {
                    "x": "86",
                    "y": "7160"
                },
                {
                    "x": "86",
                    "y": "7200"
                },
                {
                    "x": "88",
                    "y": "7230"
                },
                {
                    "x": "87",
                    "y": "7210"
                },
                {
                    "x": "86",
                    "y": "7480"
                },
                {
                    "x": "89",
                    "y": "7540"
                },
                {
                    "x": "89",
                    "y": "7400"
                },
                {
                    "x": "90",
                    "y": "7500"
                },
                {
                    "x": "92",
                    "y": "7640"
                }
            ]
        },
        {
            "seriesname": "Beer",
            "showregressionline": "1",
            "data": [
                {
                    "x": "23",
                    "y": "3160"
                },
                {
                    "x": "24",
                    "y": "3000"
                },
                {
                    "x": "24",
                    "y": "3080"
                },
                {
                    "x": "25",
                    "y": "3680"
                },
                {
                    "x": "25",
                    "y": "3320"
                },
                {
                    "x": "26",
                    "y": "3810"
                },
                {
                    "x": "27",
                    "y": "5310"
                },
                {
                    "x": "29",
                    "y": "3620"
                },
                {
                    "x": "31",
                    "y": "4100"
                },
                {
                    "x": "32",
                    "y": "3910"
                },
                {
                    "x": "35",
                    "y": "4280"
                },
                {
                    "x": "36",
                    "y": "4210"
                },
                {
                    "x": "34",
                    "y": "4160"
                },
                {
                    "x": "38",
                    "y": "4480"
                },
                {
                    "x": "40",
                    "y": "4890"
                },
                {
                    "x": "41",
                    "y": "4770"
                },
                {
                    "x": "42",
                    "y": "4880"
                },
                {
                    "x": "54",
                    "y": "4980"
                },
                {
                    "x": "53",
                    "y": "4770"
                },
                {
                    "x": "55",
                    "y": "4900"
                },
                {
                    "x": "56",
                    "y": "4940"
                },
                {
                    "x": "58",
                    "y": "4990"
                },
                {
                    "x": "61",
                    "y": "5086"
                },
                {
                    "x": "67",
                    "y": "5100"
                },
                {
                    "x": "68",
                    "y": "4700"
                },
                {
                    "x": "70",
                    "y": "5360"
                },
                {
                    "x": "75",
                    "y": "5150"
                },
                {
                    "x": "79",
                    "y": "5450"
                },
                {
                    "x": "80",
                    "y": "5010"
                },
                {
                    "x": "79",
                    "y": "4975"
                },
                {
                    "x": "82",
                    "y": "5400"
                },
                {
                    "x": "85",
                    "y": "5150"
                },
                {
                    "x": "86",
                    "y": "5460"
                },
                {
                    "x": "86",
                    "y": "5000"
                },
                {
                    "x": "88",
                    "y": "5200"
                },
                {
                    "x": "87",
                    "y": "5410"
                },
                {
                    "x": "86",
                    "y": "5480"
                },
                {
                    "x": "89",
                    "y": "5440"
                },
                {
                    "x": "89",
                    "y": "5300"
                },
                {
                    "x": "90",
                    "y": "5500"
                },
                {
                    "x": "92",
                    "y": "5240"
                }
            ]
        }
    ],
    "vtrendlines": [
        {
            "line": [
                {
                    "startvalue": "23",
                    "endvalue": "32",
                    "istrendzone": "1",
                    "displayvalue": " ",
                    "color": "#adebff",
                    "alpha": "25"
                },
                {
                    "startvalue": "23",
                    "endvalue": "32",
                    "istrendzone": "1",
                    "alpha": "0",
                    "displayvalue": "Very cold"
                },
                {
                    "startvalue": "32",
                    "endvalue": "50",
                    "istrendzone": "1",
                    "displayvalue": " ",
                    "color": "#adebff",
                    "alpha": "15"
                },
                {
                    "startvalue": "32",
                    "endvalue": "50",
                    "istrendzone": "1",
                    "alpha": "0",
                    "displayvalue": "Cold"
                },
                {
                    "startvalue": "50",
                    "endvalue": "68",
                    "istrendzone": "1",
                    "alpha": "0",
                    "displayvalue": "Moderate"
                },
                {
                    "startvalue": "68",
                    "endvalue": "80",
                    "istrendzone": "1",
                    "alpha": "0",
                    "displayvalue": "Hot"
                },
                {
                    "startvalue": "68",
                    "endvalue": "80",
                    "istrendzone": "1",
                    "displayvalue": " ",
                    "color": "#f2a485",
                    "alpha": "15"
                },
                {
                    "startvalue": "80",
                    "endvalue": "95",
                    "istrendzone": "1",
                    "alpha": "0",
                    "displayvalue": "Very hot"
                },
                {
                    "startvalue": "80",
                    "endvalue": "95",
                    "istrendzone": "1",
                    "displayvalue": " ",
                    "color": "#f2a485",
                    "alpha": "25"
                }
            ]
        }
    ]
}
<chart caption="Sales of Beer &amp; Ice-cream vs Temperature" subcaption="Los Angeles Topanga" xaxisname="Average Day Temperature" yaxisname="Sales (In USD)" xaxisminvalue="23" xaxismaxvalue="95" ynumberprefix="$" xnumbersuffix="&amp;deg; F" showyaxisline="1" theme="fusion">
    <categories verticallinedashed="1" verticallinedashlen="1" verticallinedashgap="1" verticallinethickness="1" verticallinecolor="#000000">
        <category x="23" label="23° F" showverticalline="0" />
        <category x="32" label="32° F" showverticalline="1" />
        <category x="50" label="50° F" showverticalline="1" />
        <category x="68" label="68° F" showverticalline="1" />
        <category x="80" label="80° F" showverticalline="1" />
        <category x="95" label="95° F" showverticalline="1" />
    </categories>
    <dataset seriesname="Ice Cream" showregressionline="1">
        <set x="23" y="1560" />
        <set x="24" y="1500" />
        <set x="24" y="1680" />
        <set x="25" y="1780" />
        <set x="25" y="1620" />
        <set x="26" y="1810" />
        <set x="27" y="2310" />
        <set x="29" y="2620" />
        <set x="31" y="2500" />
        <set x="32" y="2410" />
        <set x="35" y="2880" />
        <set x="36" y="3910" />
        <set x="34" y="3960" />
        <set x="38" y="4080" />
        <set x="40" y="4190" />
        <set x="41" y="4170" />
        <set x="42" y="4280" />
        <set x="54" y="5180" />
        <set x="53" y="5770" />
        <set x="55" y="5900" />
        <set x="56" y="5940" />
        <set x="58" y="6090" />
        <set x="61" y="6086" />
        <set x="67" y="6100" />
        <set x="68" y="6200" />
        <set x="70" y="6360" />
        <set x="75" y="6450" />
        <set x="79" y="6650" />
        <set x="80" y="6710" />
        <set x="79" y="6975" />
        <set x="82" y="7000" />
        <set x="85" y="7150" />
        <set x="86" y="7160" />
        <set x="86" y="7200" />
        <set x="88" y="7230" />
        <set x="87" y="7210" />
        <set x="86" y="7480" />
        <set x="89" y="7540" />
        <set x="89" y="7400" />
        <set x="90" y="7500" />
        <set x="92" y="7640" />
    </dataset>
    <dataset seriesname="Beer" showregressionline="1">
        <set x="23" y="3160" />
        <set x="24" y="3000" />
        <set x="24" y="3080" />
        <set x="25" y="3680" />
        <set x="25" y="3320" />
        <set x="26" y="3810" />
        <set x="27" y="5310" />
        <set x="29" y="3620" />
        <set x="31" y="4100" />
        <set x="32" y="3910" />
        <set x="35" y="4280" />
        <set x="36" y="4210" />
        <set x="34" y="4160" />
        <set x="38" y="4480" />
        <set x="40" y="4890" />
        <set x="41" y="4770" />
        <set x="42" y="4880" />
        <set x="54" y="4980" />
        <set x="53" y="4770" />
        <set x="55" y="4900" />
        <set x="56" y="4940" />
        <set x="58" y="4990" />
        <set x="61" y="5086" />
        <set x="67" y="5100" />
        <set x="68" y="4700" />
        <set x="70" y="5360" />
        <set x="75" y="5150" />
        <set x="79" y="5450" />
        <set x="80" y="5010" />
        <set x="79" y="4975" />
        <set x="82" y="5400" />
        <set x="85" y="5150" />
        <set x="86" y="5460" />
        <set x="86" y="5000" />
        <set x="88" y="5200" />
        <set x="87" y="5410" />
        <set x="86" y="5480" />
        <set x="89" y="5440" />
        <set x="89" y="5300" />
        <set x="90" y="5500" />
        <set x="92" y="5240" />
    </dataset>
    <vtrendlines>
        <line startvalue="23" endvalue="32" istrendzone="1" displayvalue=" " color="#adebff" alpha="25" />
        <line startvalue="23" endvalue="32" istrendzone="1" alpha="0" displayvalue="Very cold" />
        <line startvalue="32" endvalue="50" istrendzone="1" displayvalue=" " color="#adebff" alpha="15" />
        <line startvalue="32" endvalue="50" istrendzone="1" alpha="0" displayvalue="Cold" />
        <line startvalue="50" endvalue="68" istrendzone="1" alpha="0" displayvalue="Moderate" />
        <line startvalue="68" endvalue="80" istrendzone="1" alpha="0" displayvalue="Hot" />
        <line startvalue="68" endvalue="80" istrendzone="1" displayvalue=" " color="#f2a485" alpha="15" />
        <line startvalue="80" endvalue="95" istrendzone="1" alpha="0" displayvalue="Very hot" />
        <line startvalue="80" endvalue="95" istrendzone="1" displayvalue=" " color="#f2a485" alpha="25" />
    </vtrendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'scatter',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Sales of Beer & Ice-cream vs Temperature",
            "subCaption": "Los Angeles Topanga",
            "xAxisName": "Average Day Temperature",
            "yAxisName": "Sales (In USD)",
            "xAxisMinValue": "23",
            "xAxisMaxValue": "95",
            "yNumberPrefix": "$",
            "xNumberSuffix": "&deg; F",
            "showYAxisLine": "1",
            "theme": "fusion"
        },
        "categories": [{
            "verticalLineDashed": "1",
            "verticalLineDashLen": "1",
            "verticalLineDashGap": "1",
            "verticalLineThickness": "1",
            "verticalLineColor": "#000000",
            "category": [{
                "x": "23",
                "label": "23\xB0 F",
                "showverticalline": "0"
            }, {
                "x": "32",
                "label": "32\xB0 F",
                "showverticalline": "1"
            }, {
                "x": "50",
                "label": "50\xB0 F",
                "showverticalline": "1"
            }, {
                "x": "68",
                "label": "68\xB0 F",
                "showverticalline": "1"
            }, {
                "x": "80",
                "label": "80\xB0 F",
                "showverticalline": "1"
            }, {
                "x": "95",
                "label": "95\xB0 F",
                "showverticalline": "1"
            }]
        }],
        "dataset": [{
            "seriesname": "Ice Cream",
            "showregressionline": "1",
            "data": [{
                "x": "23",
                "y": "1560"
            }, {
                "x": "24",
                "y": "1500"
            }, {
                "x": "24",
                "y": "1680"
            }, {
                "x": "25",
                "y": "1780"
            }, {
                "x": "25",
                "y": "1620"
            }, {
                "x": "26",
                "y": "1810"
            }, {
                "x": "27",
                "y": "2310"
            }, {
                "x": "29",
                "y": "2620"
            }, {
                "x": "31",
                "y": "2500"
            }, {
                "x": "32",
                "y": "2410"
            }, {
                "x": "35",
                "y": "2880"
            }, {
                "x": "36",
                "y": "3910"
            }, {
                "x": "34",
                "y": "3960"
            }, {
                "x": "38",
                "y": "4080"
            }, {
                "x": "40",
                "y": "4190"
            }, {
                "x": "41",
                "y": "4170"
            }, {
                "x": "42",
                "y": "4280"
            }, {
                "x": "54",
                "y": "5180"
            }, {
                "x": "53",
                "y": "5770"
            }, {
                "x": "55",
                "y": "5900"
            }, {
                "x": "56",
                "y": "5940"
            }, {
                "x": "58",
                "y": "6090"
            }, {
                "x": "61",
                "y": "6086"
            }, {
                "x": "67",
                "y": "6100"
            }, {
                "x": "68",
                "y": "6200"
            }, {
                "x": "70",
                "y": "6360"
            }, {
                "x": "75",
                "y": "6450"
            }, {
                "x": "79",
                "y": "6650"
            }, {
                "x": "80",
                "y": "6710"
            }, {
                "x": "79",
                "y": "6975"
            }, {
                "x": "82",
                "y": "7000"
            }, {
                "x": "85",
                "y": "7150"
            }, {
                "x": "86",
                "y": "7160"
            }, {
                "x": "86",
                "y": "7200"
            }, {
                "x": "88",
                "y": "7230"
            }, {
                "x": "87",
                "y": "7210"
            }, {
                "x": "86",
                "y": "7480"
            }, {
                "x": "89",
                "y": "7540"
            }, {
                "x": "89",
                "y": "7400"
            }, {
                "x": "90",
                "y": "7500"
            }, {
                "x": "92",
                "y": "7640"
            }]
        }, {
            "seriesname": "Beer",
            "showregressionline": "1",
            "data": [{
                "x": "23",
                "y": "3160"
            }, {
                "x": "24",
                "y": "3000"
            }, {
                "x": "24",
                "y": "3080"
            }, {
                "x": "25",
                "y": "3680"
            }, {
                "x": "25",
                "y": "3320"
            }, {
                "x": "26",
                "y": "3810"
            }, {
                "x": "27",
                "y": "5310"
            }, {
                "x": "29",
                "y": "3620"
            }, {
                "x": "31",
                "y": "4100"
            }, {
                "x": "32",
                "y": "3910"
            }, {
                "x": "35",
                "y": "4280"
            }, {
                "x": "36",
                "y": "4210"
            }, {
                "x": "34",
                "y": "4160"
            }, {
                "x": "38",
                "y": "4480"
            }, {
                "x": "40",
                "y": "4890"
            }, {
                "x": "41",
                "y": "4770"
            }, {
                "x": "42",
                "y": "4880"
            }, {
                "x": "54",
                "y": "4980"
            }, {
                "x": "53",
                "y": "4770"
            }, {
                "x": "55",
                "y": "4900"
            }, {
                "x": "56",
                "y": "4940"
            }, {
                "x": "58",
                "y": "4990"
            }, {
                "x": "61",
                "y": "5086"
            }, {
                "x": "67",
                "y": "5100"
            }, {
                "x": "68",
                "y": "4700"
            }, {
                "x": "70",
                "y": "5360"
            }, {
                "x": "75",
                "y": "5150"
            }, {
                "x": "79",
                "y": "5450"
            }, {
                "x": "80",
                "y": "5010"
            }, {
                "x": "79",
                "y": "4975"
            }, {
                "x": "82",
                "y": "5400"
            }, {
                "x": "85",
                "y": "5150"
            }, {
                "x": "86",
                "y": "5460"
            }, {
                "x": "86",
                "y": "5000"
            }, {
                "x": "88",
                "y": "5200"
            }, {
                "x": "87",
                "y": "5410"
            }, {
                "x": "86",
                "y": "5480"
            }, {
                "x": "89",
                "y": "5440"
            }, {
                "x": "89",
                "y": "5300"
            }, {
                "x": "90",
                "y": "5500"
            }, {
                "x": "92",
                "y": "5240"
            }]
        }],
        "vtrendlines": [{
            "line": [{
                "startvalue": "23",
                "endvalue": "32",
                "istrendzone": "1",
                "displayvalue": " ",
                "color": "#adebff",
                "alpha": "25"
            }, {
                "startvalue": "23",
                "endvalue": "32",
                "istrendzone": "1",
                "alpha": "0",
                "displayvalue": "Very cold"
            }, {
                "startvalue": "32",
                "endvalue": "50",
                "istrendzone": "1",
                "displayvalue": " ",
                "color": "#adebff",
                "alpha": "15"
            }, {
                "startvalue": "32",
                "endvalue": "50",
                "istrendzone": "1",
                "alpha": "0",
                "displayvalue": "Cold"
            }, {
                "startvalue": "50",
                "endvalue": "68",
                "istrendzone": "1",
                "alpha": "0",
                "displayvalue": "Moderate"
            }, {
                "startvalue": "68",
                "endvalue": "80",
                "istrendzone": "1",
                "alpha": "0",
                "displayvalue": "Hot"
            }, {
                "startvalue": "68",
                "endvalue": "80",
                "istrendzone": "1",
                "displayvalue": " ",
                "color": "#f2a485",
                "alpha": "15"
            }, {
                "startvalue": "80",
                "endvalue": "95",
                "istrendzone": "1",
                "alpha": "0",
                "displayvalue": "Very hot"
            }, {
                "startvalue": "80",
                "endvalue": "95",
                "istrendzone": "1",
                "displayvalue": " ",
                "color": "#f2a485",
                "alpha": "25"
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the scatter chart.

Bubble Charts

A bubble line chart is used for plotting data that is defined in terms of three numeric parameters. The third numeric parameter is indicated by the diameter of the bubble. The JSON/XML format of a bubble chart is slightly different from that of a scatter chart, and this is because the bubble chart plots an additional numeric parameter.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "Bubble Chart", "imgSrc": "bubble-chart-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "35.5%", "topPosition": "16.5%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of caption can also be customized using attributes. Know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for subcaption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "57%", "topPosition": "22%", "annotationLinks": [{ "linkDesc": "Learn how to add subcaption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of subcaption can also be customized using attributes. Learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "75%", "topPosition": "20%", "annotationLinks": [{ "linkDesc": "You can customize border for canvas. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "X-Axis", "annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "80%", "topPosition": "52%", "annotationLinks": [] }, { "annotationNumber": "5", "annotationName": "X-Axis Title", "annotationDesc": "It refers to title of the x-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "43%", "topPosition": "67%", "annotationLinks": [] }, { "annotationNumber": "6", "annotationName": "X-Axis Labels", "annotationDesc": "X-Axis labels are the names of the data points that are displayed on the X-axis of a chart. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "59.5%", "topPosition": "56%", "annotationLinks": [] }, { "annotationNumber": "7", "annotationName": "Y-Axis", "annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "23%", "topPosition": "19%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Y-Axis Title", "annotationDesc": "It refers to the title of the Y-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "14%", "topPosition": "39%", "annotationLinks": [] }, { "annotationNumber": "9", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart, and so on.", "annotationDescLinkPath": null, "leftPosition": "45%", "topPosition": "30%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes. Learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "10", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It displays valuable information about the data plot hovered.", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "75.5%", "topPosition": "40.5%", "annotationLinks": [{ "linkDesc": "You can customize padding, size, and other properties of tooltip. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

So let's create a bubble chart showing sales analysis of shoes of different brands for Harry's SuperMart for last month. Specify the chart type using the type attribute. To render a bubble chart, set bubble.

For a detailed list of attributes, refer to the chart attributes page of bubble chart.

A bubble chart for the above code looks like:

FusionCharts will load here..
{
    "chart": {
        "caption": "Sales Analysis of Shoe Brands",
        "subcaption": "Last Quarter",
        "xAxisMinValue": "0",
        "xAxisMaxValue": "100",
        "yAxisMinValue": "0",
        "yAxisMaxValue": "30000",
        "xAxisName": "Average Price",
        "yAxisName": "Units Sold",
        "numDivlines": "2",
        "showValues": "1",
        "showTrendlineLabels": "0",
        "plotTooltext": "$name : Profit Contribution - $zvalue%",
        "drawQuadrant": "1",
        "quadrantLineAlpha": "80",
        "quadrantLineThickness": "3",
        "quadrantXVal": "50",
        "quadrantYVal": "15000",
        "quadrantLabelTL": "Low Price / High Sale",
        "quadrantLabelTR": "High Price / High Sale",
        "quadrantLabelBL": "Low Price / Low Sale",
        "quadrantLabelBR": "High Price / Low Sale",
        "yAxisLineThickness": "1",
        "yAxisLineColor": "#999999",
        "xAxisLineThickness": "1",
        "xAxisLineColor": "#999999",
        "theme": "fusion"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "$0",
                    "x": "0"
                },
                {
                    "label": "$20",
                    "x": "20",
                    "showverticalline": "1"
                },
                {
                    "label": "$40",
                    "x": "40",
                    "showverticalline": "1"
                },
                {
                    "label": "$60",
                    "x": "60",
                    "showverticalline": "1"
                },
                {
                    "label": "$80",
                    "x": "80",
                    "showverticalline": "1"
                },
                {
                    "label": "$100",
                    "x": "100",
                    "showverticalline": "1"
                }
            ]
        }
    ],
    "dataset": [
        {
            "color": "#00aee4",
            "data": [
                {
                    "x": "80",
                    "y": "15000",
                    "z": "24",
                    "name": "Nike"
                },
                {
                    "x": "60",
                    "y": "18500",
                    "z": "26",
                    "name": "Adidas"
                },
                {
                    "x": "50",
                    "y": "19450",
                    "z": "19",
                    "name": "Puma"
                },
                {
                    "x": "65",
                    "y": "10500",
                    "z": "8",
                    "name": "Fila"
                },
                {
                    "x": "43",
                    "y": "8750",
                    "z": "5",
                    "name": "Lotto"
                },
                {
                    "x": "32",
                    "y": "22000",
                    "z": "10",
                    "name": "Reebok"
                },
                {
                    "x": "44",
                    "y": "13000",
                    "z": "9",
                    "name": "Woodland"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startValue": "20000",
                    "endValue": "30000",
                    "isTrendZone": "1",
                    "color": "#aaaaaa",
                    "alpha": "14"
                },
                {
                    "startValue": "10000",
                    "endValue": "20000",
                    "isTrendZone": "1",
                    "color": "#aaaaaa",
                    "alpha": "7"
                }
            ]
        }
    ],
    "vTrendlines": [
        {
            "line": [
                {
                    "startValue": "44",
                    "isTrendZone": "0",
                    "color": "#0066cc",
                    "thickness": "1",
                    "dashed": "1",
                    "displayValue": "Gross Avg."
                }
            ]
        }
    ]
}
<chart caption="Sales Analysis of Shoe Brands" subcaption="Last Quarter" xaxisminvalue="0" xaxismaxvalue="100" yaxisminvalue="0" yaxismaxvalue="30000" xaxisname="Average Price" yaxisname="Units Sold" numdivlines="2" showvalues="1" showtrendlinelabels="0" plottooltext="$name : Profit Contribution - $zvalue%" drawquadrant="1" quadrantlinealpha="80" quadrantlinethickness="3" quadrantxval="50" quadrantyval="15000" quadrantlabeltl="Low Price / High Sale" quadrantlabeltr="High Price / High Sale" quadrantlabelbl="Low Price / Low Sale" quadrantlabelbr="High Price / Low Sale" yaxislinethickness="1" yaxislinecolor="#999999" xaxislinethickness="1" xaxislinecolor="#999999" theme="fusion">
    <categories>
        <category label="$0" x="0" />
        <category label="$20" x="20" showverticalline="1" />
        <category label="$40" x="40" showverticalline="1" />
        <category label="$60" x="60" showverticalline="1" />
        <category label="$80" x="80" showverticalline="1" />
        <category label="$100" x="100" showverticalline="1" />
    </categories>
    <dataset color="#00aee4">
        <set x="80" y="15000" z="24" name="Nike" />
        <set x="60" y="18500" z="26" name="Adidas" />
        <set x="50" y="19450" z="19" name="Puma" />
        <set x="65" y="10500" z="8" name="Fila" />
        <set x="43" y="8750" z="5" name="Lotto" />
        <set x="32" y="22000" z="10" name="Reebok" />
        <set x="44" y="13000" z="9" name="Woodland" />
    </dataset>
    <trendlines>
        <line startvalue="20000" endvalue="30000" istrendzone="1" color="#aaaaaa" alpha="14" />
        <line startvalue="10000" endvalue="20000" istrendzone="1" color="#aaaaaa" alpha="7" />
    </trendlines>
    <vtrendlines>
        <line startvalue="44" istrendzone="0" color="#0066cc" thickness="1" dashed="1" displayvalue="Gross Avg." />
    </vtrendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'bubble',
    renderAt: 'chart-container',
    width: '600',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
                "caption": "Sales Analysis of Shoe Brands",
                "subcaption": "Last Quarter",
                "xAxisMinValue": "0",
                "xAxisMaxValue": "100",
                "yAxisMinValue": "0",
                "yAxisMaxValue": "30000",
                "xAxisName": "Average Price",
                "yAxisName": "Units Sold",
                "numDivlines": "2",
                "showValues":"1",
                "showTrendlineLabels": "0",
                "plotTooltext": "$name : Profit Contribution - $zvalue%",
                "drawQuadrant" : "1",
                "quadrantLineAlpha" : "80",
                "quadrantLineThickness" : "3",
                "quadrantXVal" : "50",
                "quadrantYVal": "15000",
                //Quadrant Labels
                "quadrantLabelTL": "Low Price / High Sale",
                "quadrantLabelTR": "High Price / High Sale",
                "quadrantLabelBL": "Low Price / Low Sale",
                "quadrantLabelBR": "High Price / Low Sale",
                //Cosmetics
                "yAxisLineThickness" : "1",
                "yAxisLineColor" : "#999999",
                "xAxisLineThickness" : "1",
                "xAxisLineColor" : "#999999",
                "theme" : "fusion"
            },
        "categories": [{
            "category": [{
                "label": "$0",
                "x": "0"
            }, {
                "label": "$20",
                "x": "20",
                "showverticalline": "1"
            }, {
                "label": "$40",
                "x": "40",
                "showverticalline": "1"
            }, {
                "label": "$60",
                "x": "60",
                "showverticalline": "1"
            }, {
                "label": "$80",
                "x": "80",
                "showverticalline": "1"
            }, {
                "label": "$100",
                "x": "100",
                "showverticalline": "1"
            }]
        }],
        "dataset": [{
            "color": "#00aee4",
            "data": [{
                "x": "80",
                "y": "15000",
                "z": "24",
                "name": "Nike"
            }, {
                "x": "60",
                "y": "18500",
                "z": "26",
                "name": "Adidas"
            }, {
                "x": "50",
                "y": "19450",
                "z": "19",
                "name": "Puma"
            }, {
                "x": "65",
                "y": "10500",
                "z": "8",
                "name": "Fila"
            }, {
                "x": "43",
                "y": "8750",
                "z": "5",
                "name": "Lotto"
            }, {
                "x": "32",
                "y": "22000",
                "z": "10",
                "name": "Reebok"
            }, {
                "x": "44",
                "y": "13000",
                "z": "9",
                "name": "Woodland"
            }]
        }],
        "trendlines": [{
            "line": [{
                "startValue": "20000",
                "endValue": "30000",
                "isTrendZone": "1",
                "color": "#aaaaaa",
                "alpha": "14"
            }, {
                "startValue": "10000",
                "endValue": "20000",
                "isTrendZone": "1",
                "color": "#aaaaaa",
                "alpha": "7"
            }]
        }],
        "vTrendlines": [{
            "line": [{
                "startValue": "44",
                "isTrendZone": "0",
                "color": "#0066cc",
                "thickness": "1",
                "dashed": "1",
                "displayValue": "Gross Avg."
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the bubble chart.

In case of the bubble and scatter charts, categories are optional because the x-axis is numeric. Categories can, however, be used to define customized x-axis labels for any location on the x-scale.

A category can define numeric or non-numeric labels for the x-axis. Unlike other multi-series charts where each dataset contains the same number of objects present in the data array as the number of categories, scatter and bubble charts can have a varying number of objects present in the data array elements under each dataset array.

In case categories are not defined, the x-axis displays an automatically-calculated numeric scale with vertical divisional lines and values of the divisional lines as x-axis labels.

However, you can also explicitly define categories of your choice and show only those categories as x-axis labels. Moreover, you can also combine the categories and automatically-generated x-axis labels using a mixed mode. All of this will be explained in this section.

Now, let's customize the appearance and properties of the charts.

Display Value Labels on Bubbles

By default, data labels are not rendered on the bubbles in a bubble line chart. To show individual labels for the bubbles in the chart, set the showValues attribute to 1.

Refer to the code given below:

{
  "chart": {
    "showValues": "1"
  }
}

A bubble chart with data labels rendered on bubbles looks like this:

FusionCharts will load here..

Click here to edit the above chart.

Segment the x-axis into Categorical Zones

The x-axis of the scatter/bubble line chart can be segmented into categorical zones using vertical trend lines. To set the categorical zones follow the steps given below:

  • Set the isTrendZone attribute to display the trendzone instead of the line.

  • Set the startValue attribute to specify the starting value of the trendzone.

  • Set the endValue attribute to specify the ending value of the trendzone.

  • Set the color attribute in line object to specify the color of the trendzone.

  • Set the alpha attribute in line object to specify the transparency of the trendzone.

Refer to the code below:

{
    "chart": {
        ...
    },
    "data": {
        ...
    },
    "vtrendlines": [{
        "line": [{
                "startValue": "0",
                "endValue": "20",
                "isTrendZone": "1",
                "color": "#adebff",
                "alpha": "25"
            },
            {
                "startValue": "20",
                "endValue": "40",
                "isTrendZone": "1",
                "color": "#adebff",
                "alpha": "15"
            },
            {
                "startValue": "40",
                "endValue": "60",
                "isTrendZone": "1"
            },
            {
                "startValue": "60",
                "endValue": "80",
                "isTrendZone": "1",
                "color": "#f2a485",
                "alpha": "25"
            },
            {
                "startValue": "80",
                "endValue": "100",
                "isTrendZone": "1",
                "color": "#f2a485",
                "alpha": "15"
            }
        ]
    }]
}

A bubble chart with the x-axis segmented looks like this:

FusionCharts will load here..

Click here to edit the above chart.

Configure X-axis Labels

You can configure the display mode of the x-axis labels for scatter and bubble line chart. You can either choose to make the chart automatically generate the x-axis labels along with vertical divisional lines or you can explicitly define each x-axis label. Additionally, you can also opt to mix these two modes.

To configure the x-axis labels set the xAxisLabelMode attribute to specify the mode to render the x-axis labels. This attribute takes three values:

  • Auto (default)

  • Categories

  • Mixed

Auto Mode

In the auto mode, the chart automatically calculates and displays the x-axis labels. In this mode, the chart ignores the categories object array and allows the x-axis to inherit the properties similar to that of the vertical y-Axis.

A bubble chart with the x-axis labels rendered in the auto mode looks like this:

FusionCharts will load here..

Click here to edit the above chart.

In the above chart, you can see that the x-axis labels are automatically calculated and displayed. These x-axis labels are based on x-axis values which in turn are generated using the x values of the chart data. Additionally, along with each label, a vertical divisional line is also rendered.

Categories Mode

In this mode, the x-axis display labels explicitly defined by the objects in the category array within the categories object array.

A bubble chart with the x-axis labels rendered in the categories mode looks like this:

FusionCharts will load here..

Click here to edit the above chart.

In the above chart, you can see that the labels explicitly defined in the category object array within the categories object array are displayed. The automatically calculated labels are not displayed.

To render the x-axis labels in the categories, set the value of the xAxisLabelMode attribute to CATEGORIES.

Mixed Mode

This mode is a combination of the auto mode and the category mode. It allows the x-axis to display the automatically calculated x-axis labels as well as the explicitly defined x-axis labels simultaneously.

A bubble chart with the x-axis labels rendered in the mixed mode looks like this:

FusionCharts will load here..

Click here to edit the above chart.

In the above chart, you can see that the x-axis displays the automatically calculated labels as well as the explicitly defined labels.

To render the x-axis labels in the categories, set the value of the xAxisLabelMode attribute to MIXED.

By default, when xAxisLabelMode attribute is not defined, and when categories are not explicitly defined in the data, the chart displays x-axis labels in the auto mode.

In case, categories are defined (and the xAxisLabelMode attribute is not defined), the chart switches to the categories mode. You can also force any of the above three modes by explicitly defining the mode using the xAxisLabelMode attribute.

Configure the x-axis Vertical Divisional Lines

X-axis vertical divisional lines are vertical lines running through the canvas in the chart. These lines are important in case of bubble charts as they divide the canvas into different sections. You can configure these lines as per your requirement.

Configure the vertical divisional lines, by following the points below:

  • Set the adjustDiv attribute to explicitly set the lower and upper limit values and the number of divisional lines for this x-axis. By default, this is done automatically. Set this attribute to 0 to disable the automatic adjustment. To enable it, set this attribute to 1.

  • To show the divisional lines' values along the x-axis, set the value of showXAxisValues to 1.

  • Set the numVDivLines attributes to specify the number of vertical axis divisional lines to be rendered on the chart.

  • By default, all divisional lines show their values. However, opt to skip every x(th) divisional line values using xAxisValuesStep attribute.

{
  "chart": {
    "adjustVDiv": "1",
    "showXAxisValues": "1",
    "numVDivlines": "5",
    "xAxisValuesStep": "1"
  }
}

  • Set the vDivlineColor attribute to specify the hex color code for the vertical divisional lines.

  • Set the vDivlineThickness attribute to specify the thickness of the vertical divisional lines. This attribute takes values between 1 (thinnest) and 5 (thickest).

  • Set the vDivlineAlpha attribute to specify the transparency for the vertical divisional lines. This attribute takes values between 0 (transparent) and 100 (opaque).

  • To render the vertical divisional lines as dashed lines, set the value of vDivlineIsDashed attribute to 1. The default value of this attribute is 0, which renders the normal divisional line.

  • Set the vDivlineDashLen attribute to specify the length of each dash.

  • Set the vDivlineDashGap attribute to specify the gap between each dash.

{
  "chart": {
    "vDivlineColor": "ff0000",
    "vDivlineThickness": "2",
    "vDivlineAlpha": "70",
    "vDivlineIsDashed": "1",
    "vDivlineDashLen": "4",
    "vDivlineDashGap": "3"
  }
}

  • Set the showAlternateVGridColor attribute to specify the alternate color for the vertical grid bands. The hex color code for the vertical grids is specified in alternateVGridColor attribute.

  • Set the alternateVGridAlpha attribute to specify the transparency for the alternate vertical grid bands. This attribute takes values between 0 (transparent) and 100 (opaque).

Refer to the code below:

{
  "chart": {
    "showAlternateVGridColor": "1",
    "alternateVGridColor": "0ffff0",
    "alternateVGridAlpha": "40"
  }
}

The chart will look like as shown below:

FusionCharts will load here..

Click here to edit the above chart.

Connect Scatter Plots by a Line

In scatter charts, you can connect the scatter plots by a line. Set the drawLine attribute to 1, which will connect the data points using a line. The default value for this attribute is 0. This attribute belongs to the dataset object.

Refer to the code given below:

{
  "chart": {
    "drawLine": "1"
  }
}

A scatter chart with all the data points connected by a line looks like this:

FusionCharts will load here..

Click here to edit the above chart.

Draw Regression Lines

In scatter and bubble line chart, each data point has two distinct numeric values: the x value for the x-axis and the y value for the y-axis.

A regression line, rendered as a straight line, is used to show the trend of y values for the x values or the trend of x values for the y values. A regression line, therefore, can be used to derive a particular trend from the scattered data points in the chart canvas and predict values accordingly. For example, regression lines can be used to find trends and predict future sales, stock prices, currency exchange rates, productivity gains resulting from a training program, and so on.

For scatter and bubble charts, regression lines can be drawn based on the values provided in the charts.

There are several methods to calculate and draw regression lines; scatter charts, using linear regression, use the least-squares deviation method (also known as the least absolute deviation method). This method calculates the best-fitting straight-line for the observed data by minimizing the sum of the squares of the vertical deviation of each data point from the line (if a point lies on the fitted line exactly, then its vertical deviation is 0). As the deviation values are first squared and then summed, there are no cancellations between positive and negative values.

To show the regression lines in the chart, set the showRegressionLine attribute to 1. The default value of this attribute is 0, which hides the line. This attribute belongs to the dataset object.

Refer to the code given below:

{
    "chart": {
        ...
    },
    "dataset": [{
        "showRegressionLine": "1"
    }]
}

A scatter chart with regression lines looks like this:

FusionCharts will load here..

Click here to edit the above chart.

Modes of Regression

Regression lines can be drawn in one of the following modes:

  • Y on X: (Default mode) When y values are predicted, or a trend of y values is calculated, based on the xvalues

  • X on Y: When x values are predicted, or a trend of x values is calculated, based on the y values

The scatter chart with regression lines shown above uses the Y on X mode.

Here, let's try out the same chart with the regression lines drawn using the X on Y mode. A brief description of the attributes used to set the mode and customize regression lines are:

  • Setting the showYonX attribute to 0 will draw the regression lines in X on Y mode. The default value for this attribute is 1, which draws the regression lines in Y on X mode. This attribute belongs to the dataset object.

  • To set the color in which regression line will be drawn, specify the hex color code to regressionLineColor attribute.

  • Set the thickness of the regression line using regressionLineThickness attribute.

  • Set the transparency of the regression line using regressionLineAlpha attribute.

Refer to the code below:

{
  "chart": {
    "showYonX": "1",
    "regressionLineColor": "ff0000",
    "regressionLineThickness": "5",
    "regressionLineAlpha": "70"
  }
}

The same chart with regression lines drawn using the X on Y mode looks like this:

FusionCharts will load here..

Click here to edit the above chart.

The formulae used to draw the regression lines for both the modes are given below:

Y on X: The regression equation of Y on X is the equation of the best fitting straight line in the form y=a+bx, where x is the explanatory variable and y is the dependent variable and b=(n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σx² – (Σx)²).

X on Y: The regression equation of X on Y is the equation of the best fitting straight line in the form x=a+by, where y is the explanatory variable and x is the dependent variable and b=(n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σy² – (Σy)²).

Draw Quadrants

Dividing the canvas of scatter/bubble line chart into quadrants makes the analysis of the chart easier. Set the value of drawQuadrant attribute to 1 to draw quadrants for the chart. The default value of this attribute is 0.

Refer to the code given below:

{
  "chart": {
    "drawQuadrant": "1"
  }
}

A bubble chart rendered with quadrants looks like this:

FusionCharts will load here..

Click here to edit the above chart.

A bubble line chart rendered with quadrants can also be drawn at user-defined positions. To specify the position of the vertical and horizontal quadrant lines, set the value to quadrantXVal and quadrantYVal attribute respectively. The value of these attribute should be within the range of its corresponding relative axis (and not pixels).

Refer to the code given below:

{
  "chart": {
    //Drawing quadrants on chart
    "drawQuadrant": "1",

    //Setting x quadrant value to 54
    "quadrantXVal": "54",

    //Setting y quadrant value to 12000
    "quadrantYVal": "12000"
  }
}

A bubble chart rendered with quadrants drawn at user-defined positions looks like this:

FusionCharts will load here..

Click here to edit the above chart.

Display Quadrant Labels

In XY charts you can also set the label for all individual quadrants. To add labels the charts, follow the points given below:

  • Set the quadrantLabelTL attribute to specify the label of the top-left quadrant.

  • Set the quadrantLabelTR attribute to specify the label of the top-right quadrant.

  • Set the quadrantLabelBL attribute to specify the label of the bottom-left quadrant.

  • Set the quadrantLabelBR attribute to specify the label of the bottom-right quadrant.

Refer to the code given below:

{
  "chart": {
    "quadrantLabelTL": "Low Price / High Sale",
    "quadrantLabelTR": "High Price / High Sale",
    "quadrantLabelBL": "Low Price / Low Sale",
    "quadrantLabelBR": "High Price / Low Sale"
  }
}

A bubble line chart with quadrant labels displayed looks like this:

FusionCharts will load here..

Click here to edit the above chart.

Customize Quadrant Labels

The quadrant labels shown in the above chart can be customized according to the use case. Each cosmetic property can be customized by setting the attribute for it. You can customize the font, font color, the transparency and the size of the font. The cosmetics of the label border and the background can also be customized if required.

We'll create a sample using some of the cosmetic properties for the quadrant labels. Refer to the code given below:

{
  "chart": {
    "quadrantLabelFontItalic": "1",
    "quadrantLabelFontBold": "1",
    "quadrantLabelTLFontColor": "#123456",
    "quadrantLabelTRFontColor": "#ABCDEF",
    "quadrantLabelBLFontColor": "#123ABC",
    "quadrantLabelBRFontColor": "#DEF456"
  }
}

A bubble chart showcasing the above cosmetic attributes for quadrant labels is shown below:

FusionCharts will load here..

Click here to edit the above chart.

Customize Quadrant Lines

Customize the quadrant lines in the bubble line chart using the list of attributes given below:

  • Set the quadrantLineThickness attribute to specify the thickness of the quadrant lines.

  • Set the value of quadrantLineAlpha attribute to specify the transparency of the quadrant lines between 0 (transparent) and 100 (opaque).

  • Set the quadrantLineColor attribute to specify the hex color code for the quadrant lines.

  • To render the quadrant lines as dashed lines, set the quadrantLineIsDashed attribute to 1.

  • Set the quadrantLineDashLen attribute to specify the length of each dash.

  • Set the quadrantLineDashGap attribute to specify the gap between each dash.

  • Set the quadrantLabelPadding attribute to specify the space between quadrant labels and the associated quadrant lines.

Refer to the code given below:

{
  "chart": {
    "quadrantLineThickness": "2",
    "quadrantLineAlpha": "30",
    "quadrantLineColor": "#ac3d44",
    "quadrantLineIsDashed": "1",
    "quadrantLineDashLen": "2",
    "quadrantLineDashGap": "3",
    "quadrantLabelPadding": "5"
  }
}

A bubble chart rendered with customized quadrant lines looks like this:

FusionCharts will load here..

Click here to edit the above chart.

Conclusion

Scatter and bubble line chart are powerful tools for visualizing data with multiple numeric parameters. Scatter charts plot two numeric parameters and can include features like data point connections, regression lines, and categorical zones. Bubble charts add a third numeric parameter through bubble sizes and can be customized with data labels, quadrants, and customized quadrant labels and lines.

Both chart types offer extensive customization, including x-axis labels, vertical divisional, and regression lines. Follow our guide and use our interactive editor to create and customize impactful scatter and bubble charts, unlocking the full potential of your data visualizations.

Go Beyond Basic Charts! Craft Powerful Scatter and Bubble Line Chart Visualizations

Go beyond basic charts! Craft powerful scatter and bubble line chart visualizations with our in-depth guide and interactive editor. Transform your data into powerful insights and make impactful presentations.