How to use Chart.js with Elementor and WordPress

Excerpt:

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

Ideas are the beginning points of all fortunes. – Napoleon Hill

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. I love vintage art, graphic design, cats and have an unhealthy fascination with occult topics. My skills include WordPress, Elementor, Javascript, Blender & VBA programming.

Share this on social

Share on whatsapp
WhatsApp
Share on facebook
Facebook
Share on twitter
Twitter

You may also enjoy these related posts:

PowerPoint Colour Palette Template Design 02

This is a colour scheme for designing your next PowerPoint presentation! “What Colours Your Spirit” colour palette was inspired by a scene in Marvel Studio’s Black Panther movie where T’Challa meets his Father in the beautiful Spirit World.

Read More »

How to Design PowerPoint Template Theme Colours

This article explains the little-known aspects of theme colours in PowerPoint and shows you how to create a custom theme colour in PowerPoint from scratch. This blog is part of a blog series of beautiful colour schemes for PowerPoint slide designs.

Read More »
ji9saw digital creative agency singapore