How to use Chart.js with Elementor and WordPress

This is a step-by-step tutorial on how to create charts with Chart.Js in a Wordpress and Elementor environment.

The benefits of using Chart.js with Elementor and WordPress

Imagine you can publish live animated charts with the ease of using WordPress and Elementor as your primary web content management platform. The noteworthy benefits are:

  • Create animated charts in your WordPress posts. Hands down, it will be more memorable and visually interesting than a static chart.
  • Connect a live online data source to your charts and it will always serve as an up-to-date data visualization of the underlying data.
  • When used in a business context, line-of-business managers can use this setup to communicate accurate and timely business data to stakeholders in a transparent and trustworthy manner.

What is Chart.js?

Chart.js is a free open-source JavaScript library for data visualization and is the second most popular JS charting library on GitHub after D3.js. It supports 8 chart types: bar, line, area, pie (doughnut), bubble, radar, polar, and scatter. Chart.js is widely considered as one of the best data visualization libraries.

How-To Steps

  1. Add a new Elementor page.
  2. On the new Elementor page, add a new Section and choose a Column layout.
  3. From the Elementor widget list, drag and drop the Elementor HTML widget into the newly created column space from Step 2.
How to Chart.js with Elementor and WordPress

4. Lastly, simply copy and paste the following javascript code into the HTML widget content area.

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
console.log("hello");
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});
</script>

5. Save your Elementor page and Chart.js will create a chart on your WordPress website!

Hello I'm Derek Leong

Hello I'm Derek Leong

I create websites, PowerPoint presentations and ebooks for people I like. I love graphic design and cats. My skills include Wordpress, Elementor, Javascript, Blender & VBA programming.
ji9saw digital creative agency singapore