Range Spline Area Chart is same as the Range Area Chart except that it uses smooth curves. Given example shows Range Area Chart along with HTML / jQuery source code that you can edit in-browser or save to run it locally.
Read More >>
window.onload = function () { var options = { exportEnabled: true, animationEnabled: true, title:{ text: "Monthly Average Temperature Variation in Tokyo" }, axisX: { valueFormatString: "MMMM" }, axisY: { title: "Temperature (°C)", suffix: " °C" }, data: [{ type: "rangeSplineArea", indexLabel: "{y[#index]}°", xValueFormatString: "MMM YYYY", toolTipContent: "<b>{x}</b> </br> Min: {y[0]} °C, Max: {y[1]} °C", dataPoints: [ { x: new Date(2016, 00, 01), y: [4, 16] }, { x: new Date(2016, 01, 01), y: [7, 23] }, { x: new Date(2016, 02, 01), y: [6, 21] }, { x: new Date(2016, 03, 01), y: [13, 27] }, { x: new Date(2016, 04, 01), y: [18, 31] }, { x: new Date(2016, 05, 01), y: [19, 33] }, { x: new Date(2016, 06, 01), y: [22, 37] }, { x: new Date(2016, 07, 01), y: [24, 37] }, { x: new Date(2016, 08, 01), y: [20, 33] }, { x: new Date(2016, 09, 01), y: [13, 32] }, { x: new Date(2016, 10, 01), y: [3, 21] }, { x: new Date(2016, 11, 01), y: [8, 20] } ] }] }; $("#chartContainer").CanvasJSChart(options); }
The markers can be customized using markerType property. Other frequently used customization options include markerColor, lineThickness, lineColor, fillOpacity.