dataSeries – parent of dataPoints that also defines type of chart and other series wide options.

dataPoints – which is an array of all data items to be rendered.

title object with its text property set.

Call chart.render() method to render the chartĬhart “options” mainly contains 4 important items.

Pass all the Chart related “options” to the constructor as the second parameter.

You can also pass DOM element instead of ID

Instantiate a new Chart object by sending the ID of div element where the chart is to be rendered.

We encourage you to edit the code as described in the comments and familiarize yourself with the API.Ĭonsider the following tabular data to be rendered in the form of column chart.īelow is how a minimal basic Column Chart would look like. It teaches you the basics of creating HTML5 Javascript Charts with the help of interactive samples. Next Step: Go through the tutorial below to start building incredibly high performance charts easily using CanvasJS.

Now, try changing the type to various other chart types like “splineArea”, “bar”, etc… and let CanvasJS do its magic.

Voilà! You just created a doughnut chart.

Now change the type parameter to “doughnut”.

You will see the above chart running on your machine.

Copy the code template above and save it locally as HTML file.

The above code template can be used to create various types of charts.

Ready to create your first chart locally on your system using CanvasJS ?

Canvas x trial