Spline Area Charts, also referred to as curved / smoothed area chart, are similar to Area Charts except that the envelope of area is a smooth curve. Given example demonstrates Spline Area Chart using jQuery plugin of CanvasJS. It also includes source code that you can edit in-browser or save to run locally.
window.onload = function () { var options = { exportEnabled: true, animationEnabled: true, title: { text: "jQuery Spline Area Chart" }, data: [ { type: "splineArea", dataPoints: [ { y: 10 }, { y: 6 }, { y: 14 }, { y: 12 }, { y: 19 }, { y: 14 }, { y: 26 }, { y: 10 }, { y: 22 } ] } ] }; $("#chartContainer").CanvasJSChart(options); }
You can change the thickness or color of line using lineThickness and lineColor property. Some other customizations include markerSize, markerType, etc.