Choose an item

Line, Area and Column Charts

These chart types belong to FusionCharts XT.

Column 2D Chart

Column and bar charts represent data with rectangular horizontal or vertical bars. The height of the bars is proportional to the values they represent. In case of a column chart, the numeric values are plotted along the y-axis, and the data labels are plotted along the x-axis. Whereas in bar charts, the numeric values are plotted along the x-axis, and the data labels are plotted along the y-axis. Column and bar charts are best fitted when you want to compare values.

{ "header": "Chart Components (Anatomy)", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below you can find different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [{ "_itemHeader": "Chart with Single Series", "imgSrc": "chart-with-single-series-img.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. You can also configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "76.5%", "topPosition": "2.5%", "annotationLinks": [{ "linkDesc": "Learn how to add the caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "You can customize font properties and cosmetics of the caption using attributes. Know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can 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 the sub-caption. You can also configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "67.5%", "topPosition": "7.5%", "annotationLinks": [{ "linkDesc": "Learn how to add subcaption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "You can customize font properties and cosmetics of the subcaption 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": "85%", "topPosition": "17%", "annotationLinks": [{ "linkDesc": "You can customize the canvas border. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize the background color for canvas, as well as add a gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "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": "26%", "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": "5", "annotationName": "X-Axis", "annotationDesc": "X-Axis refers to a line on a chart that runs horizontally (left to right). Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes", "leftPosition": "16%", "topPosition": "84%", "annotationLinks": [] }, { "annotationNumber": "6", "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": "14.5%", "topPosition": "31.5%", "annotationLinks": [] }, { "annotationNumber": "7", "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": "72%", "topPosition": "89.5%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Y-Axis", "annotationDesc": "Y-Axis refers to a line on a chart that runs vertically (up-down) through zero. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#y-axis-position", "leftPosition": "8%", "topPosition": "5.5%", "annotationLinks": [] }, { "annotationNumber": "9", "annotationName": "Y-Axis Title", "annotationDesc": "It refers to the title of the y-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#y-axis-position", "leftPosition": "2%", "topPosition": "48%", "annotationLinks": [] }, { "annotationNumber": "10", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It provides context-sensitive information about the data point. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/tool-tips", "leftPosition": "53%", "topPosition": "43.5%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of a tooltip. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can customize the text of a tooltip and use values plotted on the chart using macros. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

In this sample, let's create our first column chart showcasing the monthly revenue for last one year for Harry's SuperMart. We have plotted the months along the x-axis and the revenue, which is a numeric value, along the y-axis.

To create a single-series column 2D 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 column chart, set column2d.

  • 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.

  • Depending on the value passed to the dataFormat, set the dataSource attribute (JSON/XML) from where the data will be fetched.

  • Specify the value for a data item using the value attribute within the data object.

For a detailed list of attributes, refer to the chart attributes page of column 2D chart.

A single-series column 2D chart looks like:

FusionCharts will load here..
{
    "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "700000",
                    "valueOnRight": "1",
                    "displayvalue": "Monthly Target"
                }
            ]
        }
    ]
}
<chart caption="Monthly revenue for last year" subcaption="Harry&#39;s SuperMart" xaxisname="Month" yaxisname="Revenues (In USD)" numberprefix="$" theme="fusion">
    <set label="Jan" value="420000" />
    <set label="Feb" value="810000" />
    <set label="Mar" value="720000" />
    <set label="Apr" value="550000" />
    <set label="May" value="910000" />
    <set label="Jun" value="510000" />
    <set label="Jul" value="680000" />
    <set label="Aug" value="620000" />
    <set label="Sep" value="610000" />
    <set label="Oct" value="490000" />
    <set label="Nov" value="900000" />
    <set label="Dec" value="730000" />
    <trendlines>
        <line startvalue="700000" valueonright="1" displayvalue="Monthly Target" />
    </trendlines>
</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: 'column2d',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$",
            "theme": "fusion"
        },
        "data": [{
                "label": "Jan",
                "value": "420000"
            },
            {
                "label": "Feb",
                "value": "810000"
            },
            {
                "label": "Mar",
                "value": "720000"
            },
            {
                "label": "Apr",
                "value": "550000"
            },
            {
                "label": "May",
                "value": "910000"
            },
            {
                "label": "Jun",
                "value": "510000"
            },
            {
                "label": "Jul",
                "value": "680000"
            },
            {
                "label": "Aug",
                "value": "620000"
            },
            {
                "label": "Sep",
                "value": "610000"
            },
            {
                "label": "Oct",
                "value": "490000"
            },
            {
                "label": "Nov",
                "value": "900000"
            },
            {
                "label": "Dec",
                "value": "730000"
            }
        ],
        "trendlines": [{
            "line": [{
                "startvalue": "700000",
                "valueOnRight": "1",
                "displayvalue": "Monthly Target"
            }]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the column 2D chart.

Column 3D Chart

To render a column chart in 3D, change the value of the type attribute from column2D to column3D. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of column 3D chart.

A single-series column 3D chart looks like:

FusionCharts will load here..
{
    "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}
<chart caption="Monthly revenue for last year" subcaption="Harry&#39;s SuperMart" xaxisname="Month" yaxisname="Revenues (In USD)" numberprefix="$" theme="fusion">
    <set label="Jan" value="420000" />
    <set label="Feb" value="810000" />
    <set label="Mar" value="720000" />
    <set label="Apr" value="550000" />
    <set label="May" value="910000" />
    <set label="Jun" value="510000" />
    <set label="Jul" value="680000" />
    <set label="Aug" value="620000" />
    <set label="Sep" value="610000" />
    <set label="Oct" value="490000" />
    <set label="Nov" value="900000" />
    <set label="Dec" value="730000" />
</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: 'column3d',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$",
            "theme": "fusion"
        },
        "data": [{
                "label": "Jan",
                "value": "420000"
            },
            {
                "label": "Feb",
                "value": "810000"
            },
            {
                "label": "Mar",
                "value": "720000"
            },
            {
                "label": "Apr",
                "value": "550000"
            },
            {
                "label": "May",
                "value": "910000"
            },
            {
                "label": "Jun",
                "value": "510000"
            },
            {
                "label": "Jul",
                "value": "680000"
            },
            {
                "label": "Aug",
                "value": "620000"
            },
            {
                "label": "Sep",
                "value": "610000"
            },
            {
                "label": "Oct",
                "value": "490000"
            },
            {
                "label": "Nov",
                "value": "900000"
            },
            {
                "label": "Dec",
                "value": "730000"
            }
        ]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the column 3D chart.

Bar 2D Chart

Now, let's create a bar 2D chart.

{ "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": "Bar Chart Anatomy", "imgSrc": "bar-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": "32.5%", "topPosition": "2%", "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 sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "51%", "topPosition": "7.5%", "annotationLinks": [{ "linkDesc": "Learn how to add subcaption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of sub-caption 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": "70%", "topPosition": "2%", "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": "31%", "topPosition": "11%", "annotationLinks": [] }, { "annotationNumber": "5", "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": "11.5%", "topPosition": "29%", "annotationLinks": [] }, { "annotationNumber": "6", "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": "30%", "topPosition": "75%", "annotationLinks": [] }, { "annotationNumber": "7", "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": "63%", "topPosition": "83%", "annotationLinks": [] }, { "annotationNumber": "8", "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": "45%", "topPosition": "41.5%", "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" }] } ] } ] } }

In the chart below, we have shown five stores in a supermarket that have highest sales. The sales figures are plotted along the x-axis, and the store names are plotted along the y-axis.

For a detailed list of attributes, refer to the chart attributes page of bar 2D chart.

To render a bar 2D chart, set the type to bar2d. A single-series bar 2D chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Top 5 Stores by Sales",
        "subCaption": "Last month",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "alignCaptionWithCanvas": "0"
    },
    "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"
        }
    ]
}
<chart theme="fusion" caption="Top 5 Stores by Sales" subcaption="Last month" yaxisname="Sales (In USD)" numberprefix="$" aligncaptionwithcanvas="0">
    <set label="Bakersfield Central" value="880000" />
    <set label="Garden Groove harbour" value="730000" />
    <set label="Los Angeles Topanga" value="590000" />
    <set label="Compton-Rancho Dom" value="520000" />
    <set label="Daly City Serramonte" value="330000" />
</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: 'bar2d',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Top 5 Stores by Sales",
            "subCaption": "Last month",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "alignCaptionWithCanvas": "0"
        },

        "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"
            }
        ]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the bar 2D chart.

Bar 3D Chart

To render a bar chart in 3D, change the value of the type attribute from bar2D to bar3D. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of bar 3D chart.

A single-series bar 3D chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Top 5 Stores by Sales",
        "subCaption": "Last month",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$",
        "alignCaptionWithCanvas": "0"
    },
    "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"
        }
    ]
}
<chart theme="fusion" caption="Top 5 Stores by Sales" subcaption="Last month" yaxisname="Sales (In USD)" numberprefix="$" aligncaptionwithcanvas="0">
    <set label="Bakersfield Central" value="880000" />
    <set label="Garden Groove harbour" value="730000" />
    <set label="Los Angeles Topanga" value="590000" />
    <set label="Compton-Rancho Dom" value="520000" />
    <set label="Daly City Serramonte" value="330000" />
</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: 'bar3d',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Top 5 Stores by Sales",
            "subCaption": "Last month",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "alignCaptionWithCanvas": "0"
        },

        "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"
            }
        ]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the bar 3D chart.

Line Chart

Line charts are commonly used to showcase the trend in data over time whereas area charts are used to display quantitative data. Information in a line or area chart is plotted on the x- and y-axis; data values are plotted using data points that are connected using line segments.

{ "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": "Line Chart Anatomy", "imgSrc": "line-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": "32.5%", "topPosition": "2%", "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 sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "57%", "topPosition": "7.5%", "annotationLinks": [{ "linkDesc": "Learn how to add sub-caption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of sub-caption 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": "85%", "topPosition": "2%", "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": "90%", "topPosition": "68%", "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": "47%", "topPosition": "80%", "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": "66.5%", "topPosition": "72%", "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": "8%", "topPosition": "2%", "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": "3%", "topPosition": "40%", "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": "18%", "topPosition": "46.5%", "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": "Anchors", "annotationDesc": "Each data point in a line/spline/area chart is represented by an anchor. Anchors help to identify the data point in the chart easily. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/anchors-and-lines", "leftPosition": "78%", "topPosition": "25%", "annotationLinks": [] }, { "annotationNumber": "11", "annotationName": "Crossline", "annotationDesc": "Cross line is a vertical line/area used as a quick reference for data plots. Learn more about it ", "annotationDescLinkPath": "/dev/chart-guide/chart-configurations/cross-line", "leftPosition": "72.5%", "topPosition": "16%", "annotationLinks": [] }, { "annotationNumber": "12", "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": "78%", "topPosition": "53.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" } ] } ] } ] } }

In the sample, let's create a line chart showcasing total footfall at Bakersfield Central. We have plotted the days along the x-axis and the number of visitors along the y-axis.

To render a line chart, set the type attribute to line.

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

A line chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Total footfall in Bakersfield Central",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "No. of Visitors",
        "lineThickness": "2"
    },
    "data": [
        {
            "label": "Mon",
            "value": "15123"
        },
        {
            "label": "Tue",
            "value": "14233"
        },
        {
            "label": "Wed",
            "value": "23507"
        },
        {
            "label": "Thu",
            "value": "9110"
        },
        {
            "label": "Fri",
            "value": "15529"
        },
        {
            "label": "Sat",
            "value": "20803"
        },
        {
            "label": "Sun",
            "value": "19202"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "18500",
                    "color": "#29C3BE",
                    "displayvalue": "Average{br}weekly{br}footfall",
                    "valueOnRight": "1",
                    "thickness": "2"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Total footfall in Bakersfield Central" subcaption="Last week" xaxisname="Day" yaxisname="No. of Visitors" linethickness="2">
    <set label="Mon" value="15123" />
    <set label="Tue" value="14233" />
    <set label="Wed" value="23507" />
    <set label="Thu" value="9110" />
    <set label="Fri" value="15529" />
    <set label="Sat" value="20803" />
    <set label="Sun" value="19202" />
    <trendlines>
        <line startvalue="18500" color="#29C3BE" displayvalue="Average{br}weekly{br}footfall" valueonright="1" thickness="2" />
    </trendlines>
</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: 'line',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Total footfall in Bakersfield Central",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "No. of Visitors",
            "lineThickness": "2"
        },
        "data": [{
                "label": "Mon",
                "value": "15123"
            },
            {
                "label": "Tue",
                "value": "14233"
            },
            {
                "label": "Wed",
                "value": "23507"
            },
            {
                "label": "Thu",
                "value": "9110"
            },
            {
                "label": "Fri",
                "value": "15529"
            },
            {
                "label": "Sat",
                "value": "20803"
            },
            {
                "label": "Sun",
                "value": "19202"
            }
        ],
        "trendlines": [{
            "line": [{
                "startvalue": "18500",
                "color": "#29C3BE",
                "displayvalue": "Average{br}weekly{br}footfall",
                "valueOnRight": "1",
                "thickness": "2"
            }]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the line chart.

Area Chart

An area chart is similar to the line chart, with the difference that the area marked by the anchors and line segments is filled.

{ "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": "Area Chart Anatomy", "imgSrc": "area-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": "64.5%", "topPosition": "1%", "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 sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "28.5%", "topPosition": "7.5%", "annotationLinks": [{ "linkDesc": "Learn how to add sub-caption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of sub-caption 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": "20%", "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": "28%", "topPosition": "70%", "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": "53%", "topPosition": "80%", "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": "72%", "topPosition": "78%", "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": "5%", "topPosition": "72%", "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": "1%", "topPosition": "20%", "annotationLinks": [] }, { "annotationNumber": "9", "annotationName": "Trendline", "annotationDesc": "Trend lines are reference horizontal or vertical lines which help to interpret data.. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "49%", "topPosition": "35%", "annotationLinks": [] }, { "annotationNumber": "10", "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": "18%", "topPosition": "46.5%", "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": "11", "annotationName": "Anchors", "annotationDesc": "Each data point in a line/spline/area chart is represented by an anchor. Anchors help to identify the data point in the chart easily. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/anchors-and-lines", "leftPosition": "87%", "topPosition": "23%", "annotationLinks": [] }, { "annotationNumber": "12", "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": "47.5%", "topPosition": "93.5%", "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": "13", "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": "78%", "topPosition": "53.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" } ] }, { "annotationNumber": "14", "annotationName": "Export Menu", "annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.", "annotationDescLinkPath": null, "leftPosition": "91.5%", "topPosition": "5%", "annotationLinks": [{ "linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ", "linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf" }, { "linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ", "linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature" }, { "linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ", "linkPath": "/chart-attributes/area2d" } ] } ] } ] } }

To render an area chart with the same use case as above, set the type to area.

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

A single-series area chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Sales of Liquor",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Sales (In USD)",
        "numberPrefix": "$"
    },
    "data": [
        {
            "label": "Mon",
            "value": "4123"
        },
        {
            "label": "Tue",
            "value": "4633"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4910"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}
<chart theme="fusion" caption="Sales of Liquor" subcaption="Last week" xaxisname="Day" yaxisname="Sales (In USD)" numberprefix="$">
    <set label="Mon" value="4123" />
    <set label="Tue" value="4633" />
    <set label="Wed" value="5507" />
    <set label="Thu" value="4910" />
    <set label="Fri" value="5529" />
    <set label="Sat" value="5803" />
    <set label="Sun" value="6202" />
</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: 'area2d',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Sales of Liquor",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$"
        },
        "data": [{
            "label": "Mon",
            "value": "4123"
        }, {
            "label": "Tue",
            "value": "4633"
        }, {
            "label": "Wed",
            "value": "5507"
        }, {
            "label": "Thu",
            "value": "4910"
        }, {
            "label": "Fri",
            "value": "5529"
        }, {
            "label": "Sat",
            "value": "5803"
        }, {
            "label": "Sun",
            "value": "6202"
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the area chart.

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

Plot Trend Elements

The trend elements on a chart include trendlines and trendzones.

Trendlines are horizontal or vertical reference lines, which aid in interpretation of data. They can be used to set context or define limits and targets. For example, while plotting quarterly sales of a company, you might want to use a trendline to depict the target sales. Trendzones are similar to trendlines except that they mark out an entire zone rather than just a line.

To plot a trendline on a chart, follow the steps given below:

  • Create a trendlines object to render one or more than one trendline.

  • Create a line object for a particular trendline.

  • In line object, set the startValue attribute to specify the starting value for the trendline. Set the endValue to specify the end value for the trendline.

  • Set the color attribute to specify the hex code for the color. Use this attribute to render the trendline and its associated text.

  • Set the displayValue attribute to display a string caption with the trendline.

Given below is the JSON code to include trendline on your chart:

{
    "chart": {
        ...
    },
    "data": [],
    "trendlines": [{
        "line": [{
            "startvalue": "175000",
            "color": "#29C3BE",
            "displayvalue": "Target - $175K"
        }]
    }]
}

A quarterly sales summary chart rendered with a trendline to show the target value looks like this:

FusionCharts will load here..

Click here to edit the column chart.

Trendzone is used to show a range of target values. The trendzone uses the same attributes as the trendline. isTrendZone is the attribute which is used to specify whether a chart will be rendered with a trendline or a trendzone. Setting this attribute to 0 will render a trendline, setting it to 1 (default) will render a trendzone.

A quarterly sales summary chart rendered with a trendzone to show a range of target values looks like this:

FusionCharts will load here..

Click here to edit the column chart.

FusionCharts Suite XT includes several options to customize trend elements. To know more, click here.

Plot Vertical Line Elements

Vertical (or horizontal in case of bar charts) separator lines are elements that can differentiate between data blocks in a chart. They can be placed between any two data points or can be aligned to specific data points.

To plot vertical line in your chart, follow the steps given below:

  • Set the vLine attribute to true to render a vertical line on the chart.

  • Specify the label attribute to set the label for the vertical line. This label will be rendered along the x-axis.

  • Set the position of the vertical line using linePosition attribute. This attribute is positioned relative to the two data points between which it is to be plotted.

Given below is the JSON code to include a vertical line on your chart:

{
  "chart": {
      ...
  },
  "data": [],
  "trendlines": [
    {
      "line": [
        {
          "vline": "true",
          "label": "Weekend Start",
          "color": "#29C3BE",
          "linePosition": "0.7"
        }
      ]
    }
  ]
}

A line chart rendered with a vertical line looks like this:

FusionCharts will load here..

Click here to edit the above chart.

FusionCharts Suite XT includes several options to customize vertical line elements. To know more, click here.

Change Chart Type

FusionCharts Suite XT allows you to change the chart type dynamically through its advanced API. You can change chart type by calling the chartType() method on any FusionCharts' instance and provide the chart name as an argument.

An example of a chart, where you can dynamically change the chart type, looks like this:

FusionCharts will load here..

Data Skipping

Visualization plays a crucial role in data science, helping data scientists to make sense of the underlying patterns within data, even before any other computation begins. With v3.12.0, FusionCharts has evolved to consume a large amount of data in standard charts.

What if you want to render 10000 data points in a single series chart with a dimension of 500x400 pixels for the line, area, and column charts. So if we take the width of the canvas as 500 pixels, an average of 20 data plots will be drawn every width of a pixel which is not very informative with respect to visualization.

Data skipping is a concept which has been introduced to draw only those plots in the canvas which actually creates a data trend without hampering the performance of the chart.

Given below is the list of attributes with the help of which you can customize your data skipping:

  • Set plotBinSize attribute to 1, to render minimum one data plot within the width of one pixel. Example, if plotBinSize: 1, minimum one column plot will be rendered within the width of one pixel. For line and area charts, minimum of two anchors connecting one single line will be drawn. If plotBinSize: 0.5, minimum two column plot on each pixel (width )will be rendered.

  • Set the labelBinSize attribute to 1, to display minimum one label in the width of one pixel.

To disable this label skipping, set this attribute to 0.

Now, let's render an area chart with 30000 data. You will notice that the chart will give a clear idea on how frequently the new trips are availed. The chart will show the data updated every hour. The chart plots with maximum and minimum value in a single pixel (width), drawn to show the pattern out of data. The plots get overlapped only if they are hidden by another plot which results to render the chart much faster than expected. The overlapping takes place based on the data trend which cannot be compromised.

An example will look like as shown below:

FusionCharts will load here..

In multi-series chart, one dataset can be overlapped (partially or completely) by another dataset only if the data plot of one dataset gets hidden by the other.