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
TypesSimple 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.
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”.
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.
17 Comments
is there a fuction to change the type instead of doing something like this chart.options.data[0].type=typeChart;
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.
Cant seem to be able to have it work. Probably need this “/assets/script/canvasjs.min.js” But i dont have it. Any help?
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.
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?
JC,
Please checkout this example.
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
http://jsfiddle.net/codingcompany/t650oyoh/1/
You just need to call chart.render() after changing the chart type.
How to change the type of chart after the chart is done?
Just “chart.options.data[0].type” and call “chart.render()”. Here is an example.
For more details on updating chart please refer this article.
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
JC,
There were couple of issue in your code – like two different functions with the same name, etc which we have fixed. Checkout this jsfiddle with the issues fixed.
Wow! Thank you so much for your help
how to add save as png button for all chart..?.but its coming defaultly for pie chart…!
My both charts are showing the same title instead of giving different titles.Please help me. My code is here:https://jsfiddle.net/lokesh005/42stutx6/
Lokesh,
Due to method-overriding, only one method is being called in both the cases. Here is the solution.