How to Add CanvasJS Charts to Your WordPress Page / Posts?

CanvasJS is a JavaScript charting library which lets you add beautiful charts to your website. Using WP-CanvasJS-Charts WordPress plugin you can add CanvasJS charts to your pages & posts easily.

Prerequisites

• CanvasJS
• WordPress

CanvasJS Features

• Library supports 30+ chart types
• Beautiful themes
• Interactive tooltips & crosshair
• Multiple axes support
• Supports Linear & Logarithmic axis
• Supports Multi-Series within single chart
• Dynamic Charts
• Can render chart with 100,000 datapoints in few hundred milliseconds (100-200ms in chrome, may vary across browsers)
• Easy customization options
• Easy to integrate with any technologies like React, Angular, Vue.js, PHP, ASP.NET, Spring MVC, JSP, etc.

Installation

1. Download WP-CanvasJS-Charts WordPress Plugin & Install it (Direct Link: https://github.com/vishwas-r/WP-CanvasJS/archive/refs/tags/1.2.3.zip)
2. Go to Plugins -> Add New
3. On top of the page, click “Upload Plugin” button
4. Select the ZIP file that you downloaded
5. Click “Install Now” button
6. Click on “Activate” button

Refer this article for more information on installing WordPress plugins.

How to Add CanvasJS Charts to WordPress Page / Post?

1. [Optional] If you have a commercial license of CanvasJS, change the script link in Plugin Admin Settings Page
   

2. Add Beautiful Charts to your post / page:
   You can pass chart-options either as options parameter or by saving chart-options as JSON file & passing JSON file URL as optionsurl parameter.

• Passing 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 })})}" style="width:100%;height:300px"]

• Passing as optionsurl

[canvasjschart optionsurl="URL-to-JSON-File"]

Customizing the Look & Feel

You can easily customize the look & feel of the charts to match it with your website theme. Below example shows how to enable animation & change the theme of the chart.

[canvasjschart options="{title:{text: 'CanvasJS Column Chart'},theme:"light2",animationEnabled:true,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:300px"]

You can refer to CanvasJS documentation for more customization options available.