Below StockChart shows how to create Spline Area Chart with Navigator & Range Selector.
$(function () { var dataPoints = []; var stockChartOptions = { title:{ text:"StockChart with Spline Area Chart" }, subtitles: [{ text: "Litecoin Price (in Eur)" }], theme: "dark2", exportEnabled: true, charts: [{ axisX: { crosshair: { enabled: true, snapToDataPoint: true, valueFormatString: "DD MMM YYYY", } }, axisY: { title: "Litecoin Price", prefix: "€", crosshair: { enabled: true, valueFormatString: "€#,###", } }, toolTip: { shared: true }, data: [{ type: "splineArea", yValueFormatString: "€#,###.##", dataPoints : dataPoints }] }], navigator: { axisX: { labelFontColor: "#F5F5F5", labelFontFamily: "Trebuchet MS" }, slider: { minimum: new Date(2018, 01, 01), maximum: new Date(2018, 11, 01) } } } $.getJSON("https://canvasjs.com/data/docs/ltceur2018.json", function(data) { for(var i = 0; i < data.length; i++){ dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)}); } $("#chartContainer").CanvasJSStockChart(stockChartOptions); }); });