Spline Charts
These chart types belong to PowerCharts XT.
Spline charts are a specialized form of line charts that display smooth curves through the different data points. It integrates all the characteristics of a conventional line chart except for the fact that unlike line charts, which connect data points with straight lines, spline charts draw a fitted curved line to join the data points.
Spline charts can be used for plotting data that requires the usage of curve-fitting e.g., an impulse-response chart, a product life cycle chart, etc. It is also significantly used in designing Pareto charts.
FusionCharts Suite XT includes four types of spline charts:
Single-series spline 2D chart
Multi-series spline 2D chart
Single-series spline area 2D chart
Multi-series spline area 2D chart
Single-Series Spline 2D Chart
A single-series spline 2D chart draws a single fitted curve through the data points.
{
"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": "Single Series Spline 2D Chart Anatomy",
"imgSrc": "single-series-spline-2d-chart.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%",
"topPosition": "3%",
"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.5%",
"topPosition": "8.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": "86%",
"topPosition": "3%",
"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": "92%",
"topPosition": "71%",
"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": "83.5%",
"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": "17.5%",
"topPosition": "75%",
"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": "12%",
"topPosition": "4%",
"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.5%",
"topPosition": "42%",
"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": "49.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": "80%",
"topPosition": "30%",
"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": "42%",
"topPosition": "45%",
"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": "76.5%",
"topPosition": "48%",
"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"
}
]
}
]
}
]
}
}
To create a single-series spline 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
typeattribute. To render a spline chart, setspline.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of single-series spline 2D chart.
A simple single-series spline 2D chart looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
"lineThickness": "2",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showXAxisLine": "1",
"xAxisLineThickness": "1"
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"vline": "true",
"lineposition": "0",
"color": "#29C3BE",
"labelHAlign": "left",
"label": "National holiday"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}<chart theme="fusion" caption="Total footfall in Bakersfield Central" subcaption="Last week" xaxisname="Day" yaxisname="No. of Footfalls" linethickness="2" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" showxaxisline="1" xaxislinethickness="1">
<set label="Mon" value="15123" />
<set label="Tue" value="14233" />
<set label="Wed" value="25507" />
<vline lineposition="0" color="#29C3BE" labelhalign="left" label="National holiday" />
<set label="Thu" value="9110" />
<set label="Fri" value="15529" />
<set label="Sat" value="20803" />
<set label="Sun" value="19202" />
</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": "spline",
"dataFormat": "json",
"renderAt": "chart-container",
"width": "700",
"height": "400",
"dataSource": {
"chart": {
"theme": "fusion",
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
//Cosmetics
"lineThickness": "2",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
},
"data": [{
"label": "Mon",
"value": "15123"
}, {
"label": "Tue",
"value": "14233"
}, {
"label": "Wed",
"value": "25507"
}, {
"vline": "true",
"lineposition": "0",
"color": "#29C3BE",
"labelHAlign": "left",
"label": "National holiday"
}, {
"label": "Thu",
"value": "9110"
}, {
"label": "Fri",
"value": "15529"
}, {
"label": "Sat",
"value": "20803"
}, {
"label": "Sun",
"value": "19202"
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the single-series spline 2D chart.
Multi-Series Spline 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": "Multi-series Spline Chart Anatomy",
"imgSrc": "multi-series-spline-chart.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": "0%",
"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": "70.5%",
"topPosition": "4.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": "82%",
"topPosition": "0%",
"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": "95%",
"topPosition": "62%",
"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": "57%",
"topPosition": "75%",
"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": "75%",
"topPosition": "67%",
"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": "12%",
"topPosition": "3%",
"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": "0%",
"topPosition": "36%",
"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": "36%",
"topPosition": "44%",
"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": "82%",
"topPosition": "25%",
"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": "75.5%",
"topPosition": "82.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": "70%",
"topPosition": "23.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"
}
]
}
]
}
]
}
}
To render a multi-series spline chart:
Set the
typeattribute tomsspline.Use the
seriesnameattribute and thedataobject, which belong to thedatasetobject, to specify multiple datasets.
For a detailed list of attributes, refer to the chart attributes page of multi-series spline 2D chart.
A multi-series spline chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day",
"yAxisName": "No. of Visitor",
"showXAxisLine": "1",
"xAxisLineColor": "#999999"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"vline": "true",
"lineposition": "0",
"color": "#F2726F",
"labelHAlign": "right",
"labelPosition": "0",
"label": "National holiday"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Bakersfield Central",
"data": [
{
"value": "15123"
},
{
"value": "14233"
},
{
"value": "25507"
},
{
"value": "9110"
},
{
"value": "15529"
},
{
"value": "20803"
},
{
"value": "19202"
}
]
},
{
"seriesname": "Los Angeles Topanga",
"data": [
{
"value": "13400"
},
{
"value": "12800"
},
{
"value": "22800"
},
{
"value": "12400"
},
{
"value": "15800"
},
{
"value": "19800"
},
{
"value": "21800"
}
]
}
]
}<chart theme="fusion" caption="Number of visitors last week" subcaption="Bakersfield Central vs Los Angeles Topanga" xaxisname="Day" yaxisname="No. of Visitor" showxaxisline="1" xaxislinecolor="#999999">
<categories>
<category label="Mon" />
<category label="Tue" />
<category label="Wed" />
<vline lineposition="0" color="#F2726F" labelhalign="right" labelposition="0" label="National holiday" />
<category label="Thu" />
<category label="Fri" />
<category label="Sat" />
<category label="Sun" />
</categories>
<dataset seriesname="Bakersfield Central">
<set value="15123" />
<set value="14233" />
<set value="25507" />
<set value="9110" />
<set value="15529" />
<set value="20803" />
<set value="19202" />
</dataset>
<dataset seriesname="Los Angeles Topanga">
<set value="13400" />
<set value="12800" />
<set value="22800" />
<set value="12400" />
<set value="15800" />
<set value="19800" />
<set value="21800" />
</dataset>
</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: 'msspline',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day",
"yAxisName": "No. of Visitor",
"showXAxisLine": "1",
"xAxisLineColor": "#999999"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"vline": "true",
"lineposition": "0",
"color": "#F2726F",
"labelHAlign": "right",
"labelPosition": "0",
"label": "National holiday"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Bakersfield Central",
"data": [{
"value": "15123"
}, {
"value": "14233"
}, {
"value": "25507"
}, {
"value": "9110"
}, {
"value": "15529"
}, {
"value": "20803"
}, {
"value": "19202"
}]
}, {
"seriesname": "Los Angeles Topanga",
"data": [{
"value": "13400"
}, {
"value": "12800"
}, {
"value": "22800"
}, {
"value": "12400"
}, {
"value": "15800"
}, {
"value": "19800"
}, {
"value": "21800"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the multi-series spline chart.
Multi-Series Spline Area 2D
A multi-series spline area 2D chart is nothing but a conventional area with a smoothed curve drawn through the data points in the series. It allows you to plot data for multiple data sets.
{
"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": "Multi-series Spline Area 2D Chart Anatomy",
"imgSrc": "multi-series-spline-area-2d-chart.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": "34.5%",
"topPosition": "1.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 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": "71.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": "85%",
"topPosition": "5%",
"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": "91%",
"topPosition": "62%",
"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": "56%",
"topPosition": "74%",
"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": "67.5%",
"topPosition": "67%",
"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": "12%",
"topPosition": "3%",
"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": "2%",
"topPosition": "36%",
"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": "41.5%",
"topPosition": "22%",
"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": "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": "76%",
"topPosition": "81.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": "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": "71%",
"topPosition": "32.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"
}
]
}
]
}
]
}
}
To render a multi-series spline area 2D chart:
Set the
typeattribute tomssplinearea.Use the
seriesnameattribute and thedataobject, which belong to thedatasetobject, to specify multiple datasets.
For a detailed list of attributes, refer to the chart attributes page of multi-series spline area 2D chart.
A simple multi-series spline area 2D chart looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Number of Footfalls Last Week",
"subCaption": "Garden Groove harbour vs Crompton-Rancho Dom",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
"showXAxisLine": "1",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"vline": "true",
"lineposition": "0",
"color": "#F2726F",
"labelHAlign": "right",
"labelPosition": "0",
"label": "National holiday"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Garden Groove harbour",
"data": [
{
"value": "15123"
},
{
"value": "14233"
},
{
"value": "21507"
},
{
"value": "9110"
},
{
"value": "14829"
},
{
"value": "17503"
},
{
"value": "20202"
}
]
},
{
"seriesname": "Crompton-Rancho Dom",
"data": [
{
"value": "11400"
},
{
"value": "12800"
},
{
"value": "17800"
},
{
"value": "10400"
},
{
"value": "11800"
},
{
"value": "13100"
},
{
"value": "20800"
}
]
}
]
}<chart theme="fusion" caption="Number of Footfalls Last Week" subcaption="Garden Groove harbour vs Crompton-Rancho Dom" xaxisname="Day" yaxisname="No. of Footfalls" showxaxisline="1" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5">
<categories>
<category label="Mon" />
<category label="Tue" />
<category label="Wed" />
<vline lineposition="0" color="#F2726F" labelhalign="right" labelposition="0" label="National holiday" />
<category label="Thu" />
<category label="Fri" />
<category label="Sat" />
<category label="Sun" />
</categories>
<dataset seriesname="Garden Groove harbour">
<set value="15123" />
<set value="14233" />
<set value="21507" />
<set value="9110" />
<set value="14829" />
<set value="17503" />
<set value="20202" />
</dataset>
<dataset seriesname="Crompton-Rancho Dom">
<set value="11400" />
<set value="12800" />
<set value="17800" />
<set value="10400" />
<set value="11800" />
<set value="13100" />
<set value="20800" />
</dataset>
</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: 'mssplinearea',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Number of Footfalls Last Week",
"subCaption": "Garden Groove harbour vs Crompton-Rancho Dom",
"xAxisName": "Day",
"yAxisName": "No. of Footfalls",
"showXAxisLine": "1",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"vline": "true",
"lineposition": "0",
"color": "#F2726F",
"labelHAlign": "right",
"labelPosition": "0",
"label": "National holiday"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Garden Groove harbour",
"data": [{
"value": "15123"
}, {
"value": "14233"
}, {
"value": "21507"
}, {
"value": "9110"
}, {
"value": "14829"
}, {
"value": "17503"
}, {
"value": "20202"
}]
}, {
"seriesname": "Crompton-Rancho Dom",
"data": [{
"value": "11400"
}, {
"value": "12800"
}, {
"value": "17800"
}, {
"value": "10400"
}, {
"value": "11800"
}, {
"value": "13100"
}, {
"value": "20800"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the multi-series spline area 2D chart.
Single-Series Spline Area 2D Chart
To render a single-series spline area chart, set the type attribute to splinearea.
{
"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": "Single Series Spline Area 2D Chart Anatomy",
"imgSrc": "single-series-spline-area-2d-chart.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": "37%",
"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": "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": "51%",
"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": "76%",
"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": "83%",
"topPosition": "40%",
"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": "86%",
"topPosition": "25%",
"annotationLinks": []
},
{
"annotationNumber": "12",
"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": "49%",
"topPosition": "25%",
"annotationLinks": []
},
{
"annotationNumber": "13",
"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": "14",
"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": "15",
"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"
}
]
}
]
}
]
}
}
For a detailed list of attributes, refer to the chart attributes page of single-series spline area 2D chart.
A simple single-series spline area 2D chart looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Total sales of iPhone",
"subCaption": "Last month",
"xAxisName": "Week",
"yAxisName": "Units sold",
"showXAxisLine": "1"
},
"data": [
{
"label": "Week 1",
"value": "530"
},
{
"label": "Week 2",
"value": "660"
},
{
"label": "Week 3",
"value": "420"
},
{
"label": "Week 4",
"value": "580"
},
{
"label": "Week 5",
"value": "560"
}
]
}<chart theme="fusion" caption="Total sales of iPhone" subcaption="Last month" xaxisname="Week" yaxisname="Units sold" showxaxisline="1">
<set label="Week 1" value="530" />
<set label="Week 2" value="660" />
<set label="Week 3" value="420" />
<set label="Week 4" value="580" />
<set label="Week 5" value="560" />
</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: 'splinearea',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Total sales of iPhone",
"subCaption": "Last month",
"xAxisName": "Week",
"yAxisName": "Units sold",
"showXAxisLine": "1"
},
"data": [{
"label": "Week 1",
"value": "530"
}, {
"label": "Week 2",
"value": "660"
}, {
"label": "Week 3",
"value": "420"
}, {
"label": "Week 4",
"value": "580"
}, {
"label": "Week 5",
"value": "560"
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the single-series spline area 2D chart.
Spline and spline area charts do not support joining of empty data points in the chart. That means, if your chart does not contain data at a particular point, the data points cannot be connected to each other and will appear as a broken dataset.