Skip to content
Vishwas.R edited this page Mar 13, 2024 · 1 revision

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.

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

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

BuyMeACoffee