DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Vishwas R
Vishwas R

Posted on • Updated on

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 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
    CanvasJS WordPress Plugin

  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"]
Enter fullscreen mode Exit fullscreen mode
  • Passing as optionsurl
[canvasjschart optionsurl="URL-to-JSON-File"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.