This plugin allows you to create and add interactive Charts & StockCharts to your wordpress page and posts using CanvasJS library. It creates responsive high-performance Charts & StockCharts that renders across devices including iPhone, iPad, Android, Mac & PCs.
- Plugin Documentation: https://github.com/vishwas-r/WP-CanvasJS/wiki
- CanvasJS Official API Documentation: https://canvasjs.com/docs/
CanvasJS is built from ground up for high performance data visualization and can render millions of data points in a matter of milliseconds.
Note:
- This plugin requires you to have CanvasJS License. Please visit CanvasJS for more info.
CanvasJS Chart Gallery CanvasJS StockChart Gallery
- Add shortcode
[canvasjschart]
- Pass chart-options to the chart as 'options'.
[canvasjschart options="{title:{text: 'CanvasJS Column Chart'}, data: new Array({dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})}"] or
- Save chart options as json file & pass it as 'optionsurl'.
[canvasjschart optionsurl="URL"]
- Add shortcode
[canvasjsstockchart]
- Pass chart-options to the chart as 'options'.
[canvasjsstockchart options="{title:{text: 'CanvasJS StockChart'}, charts: new Array({data: new Array({dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})})}"] or
- Save chart options as json file & pass it as 'optionsurl'.
[canvasjsstockchart optionsurl="URL"]
You can pass style the chart / stockchart container by passing style parameter
[canvasjschart optionsUrl="https://api.npoint.io/5448b28da1502b036561" style="width:100%;height:360px"]
[canvasjschart options="{title:{text: 'CanvasJS Column Chart'}, data: new Array({dataPoints: new Array({ label: 'apple', y: 10 },{ label: 'orange', y: 15 },{ label: 'banana', y: 25 },{ label: 'mango', y: 30 },{ label: 'grape', y: 28 })})}" style="width:100%;height:360px"]
Note:
- Don't add space within style. i.e. Use
style="width:100%;height:300px"
and avoidstyle="width: 100%; height: 300px"
- Last Tested with: WordPress 6.4.3, CanvasJS Charts v3.7.43 & CanvasJS StockCharts v1.7.43
- Last Tested on: Mar 13, 2024
MIT