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 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
- Download WP-CanvasJS-Charts WordPress Plugin & Install it (Direct Link: https://github.com/vishwas-r/WP-CanvasJS/archive/refs/tags/1.2.3.zip)
- Go to Plugins -> Add New
- On top of the page, click “Upload Plugin” button
- Select the ZIP file that you downloaded
- Click “Install Now” button
- Click on “Activate” button
Refer this article for more information on installing WordPress plugins.
How to Add CanvasJS Charts to WordPress Page / Post?
[Optional] If you have a commercial license of CanvasJS, change the script link in Plugin Admin Settings Page
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.
Top comments (0)