Here is an example that shows how to parse data coming from a JSON API and render chart. It also includes HTML / jQuery source code that you can edit in-browser or save to run it locally.
Read More >>
window.onload = function() { var dataPoints = []; var options = { animationEnabled: true, theme: "light2", title: { text: "Daily Sales Data" }, axisX: { valueFormatString: "DD MMM YYYY", }, axisY: { title: "USD", titleFontSize: 24 }, data: [{ type: "spline", yValueFormatString: "$#,###.##", dataPoints: dataPoints }] }; function addData(data) { for (var i = 0; i < data.length; i++) { dataPoints.push({ x: new Date(data[i].date), y: data[i].units }); } $("#chartContainer").CanvasJSChart(options); } $.getJSON("https://canvasjs.com/data/gallery/jquery/daily-sales-data.json", addData); }
You can control the intervals between the axis labels by using the interval property. Some other commonly used customization options are intervalType, xValueType, reversed, logarithmic, etc.