Let us consider following tabular data that needs to be rendered as a line chart.
To start with, you need to create a HTML Container (div, etc) in which to render the Chart and give it an id. This will be passed to the Chart object during its instantiation. Am calling the div element chartContainer.
<div id="chartContainer" style="height: 300px; width: 100%;">
Now that the container is present, lets create a chart object – Chart object resides in CanvasJS namespace. While instantiating the Chart, we pass id of the container element and chart options that contain all the options and data relating to the chart. Below is how the code looks for a complete chart including HTML
Below is how the Chart Looks like. You can paste the above code into the live chart editor present in CanvasJS home page to see it in action.
CanvasJS allows you to create over 14 different types of Charts and they are fully customizable. CanvasJS runs on all the devices including Smart Phones, Tablets, Desktops, etc.
You can see more examples from CanvasJS Gallery
Copyright © 2022 fenopix. All Rights Reserved