vishwas-r / WP-CanvasJS

WP CanvasJS plugin allows you to create and add interactive Charts & StockCharts to your wordpress page and posts using CanvasJS library.

CanvasJS for WordPress

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.

Documentation

• Plugin Documentation: https://github.com/vishwas-r/WP-CanvasJS/wiki
• CanvasJS Official API Documentation: https://canvasjs.com/docs/

CanvasJS Library

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 Gallery / Demos

CanvasJS Chart Gallery CanvasJS StockChart Gallery

How to add CanvasJS to your WordPress Page / Post?

CanvasJS Chart

• 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"]

CanvasJS StockChart

• 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"]

Styling Chart Container

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 avoid style="width: 100%; height: 300px"

Plugin Testing

• Last Tested with: WordPress 6.4.3, CanvasJS Charts v3.7.43 & CanvasJS StockCharts v1.7.43
• Last Tested on: Mar 13, 2024

License

MIT