Supported HTML5 & JavaScript Chart types

CanvasJS supports a variety of Chart Types that we are going to explain in this section. In this page we’ll give you a high level view of the Chart Types supported and then we get into individual chart types with a separate section for each one of them. Below are the Types of Charts supported by CanvasJS

Types



Simple Chart Types

Set “type” property of chart to “bar”, “column”, “line”, “area”, “pie”, “doughnut”, “scatter” and see various charts render with the same set of dataPoints.

Try it Yourself by Editing the Code below.


Stacked Charts

Stacked Charts are Multi-Series Charts, below we have a Stacked Chart chart with type as stackedColumn in all dataSeries.
You can Change type to “stackedArea”, “stackedArea100”, “stackedBar”, “stackedBar100”, “stackedColumn”, “stackedColumn100”.

Try it Yourself by Editing the Code below.


Bubble Chart

Bubble chart requires an extra parameter “z” in dataPoints, which determines the size of the bubble. We draw a bubble chart in below example.

Try it Yourself by Editing the Code below.


If you have any questions, please feel free to ask in our forums.Ask Question

Comments 17

    • Nope. This way of setting property (in general) can be advantageous when you have more than one series or when you are changing multiple properties of chart – you can batch all updates/changes and call chart.render() at once in the end – its just one extra step of calling chart.render(). Turning them into functions would have caused performance overhead (in rendering) for each property update.

    • Hello,

      “/assets/script/canvasjs.min.js” a relative path of CanvasJS on our server which will not work at your end. So please download it from our download page and use the same.

  1. This is probably a dumb question but how do I create more charts below the one I have? I probably need another but I am not able to figure it out. Any help would be great?

      • Hi Anjali,
        Thank you so much for the great example! I really appreciate it.
        I was wondering if you can help with one more thing. Using your example I added some more datapoints. Now I got more graphs with different data. The thing I want to achieve is to change “type” of the graph. As you can see I added an extra function and changed the “type” to “line” in the first function but this does not seem to work. I am hoping you can help me with a solution for this problem.
        Again I would like to thank you for your help.
        Kind regards,
        JC

  2. Hi Sunil, I am a codenewbie and I don’t understand. In the example I included http://jsfiddle.net/codingcompany/t650oyoh/1/ I think I am calling cart.render. In fact I think I am calling it twice. I have for one graph with the chart type “line” and below that chart I have got another chart with the chart type “column” so I expect to see two different graphs. Can you please explain two me why the code is not working? Thank you in advance

If you have any questions, please feel free to ask in our forums. Ask Question