Spline Chart is useful when you want to show smooth gradual changes and is very similar to Line Chart. It uses smooth curved lines and thus are also known as Smoothed / Curved Line Chart. The given example shows simple Spline Chart along with HTML / jQuery source code that you can edit in-browser or save to run locally.
window.onload = function () {
var options = {
animationEnabled: true,
title:{
text: "Monthly Sales - 2017"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
title: "Sales (in USD)",
prefix: "$",
includeZero: false
},
data: [{
yValueFormatString: "$#,###",
xValueFormatString: "MMMM",
type: "spline",
dataPoints: [
{ x: new Date(2017, 0), y: 25060 },
{ x: new Date(2017, 1), y: 27980 },
{ x: new Date(2017, 2), y: 33800 },
{ x: new Date(2017, 3), y: 49400 },
{ x: new Date(2017, 4), y: 40260 },
{ x: new Date(2017, 5), y: 33900 },
{ x: new Date(2017, 6), y: 48000 },
{ x: new Date(2017, 7), y: 31500 },
{ x: new Date(2017, 8), y: 32300 },
{ x: new Date(2017, 9), y: 42000 },
{ x: new Date(2017, 10), y: 52160 },
{ x: new Date(2017, 11), y: 49400 }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
}
You can change the look and feel of Spline Charts by using markerSize, markerType & lineThickness properties. Also the zoomEnabled property can be used to enable or disable the zoom / pan feature.