Create charts with chart.js

Chart.JS is the best javascript based open source charting library you can use to draw a large variety of charts including simple line and bar to more complex mixed and bubble charts or radar charts. You do not need to be a master of js to use chart.js because the library is simple to use and provides extensive customizations to make beautiful charts with the help of plugins.

Sample bar chart with tooltip in chart.js (Apple geo-revenue 2022 in billions)

Plugins like datalabels, tooltip and title can help you customize and make your charts more attractive while also more informative. Customizations and animations can help you draw and configure perfect looking charts. For example, you want to draw a simple bar chart but want to assign a different color to each bar, you do not need to do much work but simply using the backgroundColors variable you can assign a unique color to each of the several bars in your chart.

Why use chart.js?

• Chart.js is easy to learn.
• Can be easily included in html.
• It is easy to install — you can use npm or the cdn link to install it.
• Creating and configuring charts is much easier with chart,js compared to the other libraries.
• It is the most popular js based charting library based on number of Github stars and downloads.
• Plugins allow you to extend chart functionality
• There is enough documentation and community support available to guide you.
• Chart types can be changed with simple changes.
• It is easy to draw charts with chart.js even with very large datasets.
• You can easily set bar thickness and height depending on the size of your dataset.

Ok, So let’s try creating a simple bar chart with the help of chart.js. Let’s see how easy or difficult it is to draw charts using chart.js.

There are three main parts to creating the chart. First, we install the library using the cdn link or npm. Second, we draw a canvas for our chart and third we include the script to create the chart.

If you want to install it on your server, here is the command:

npm install chart.js

If you want, you can add the script to install the chart to your website’s html head (before /head) and you can start creating charts on your website.

Here is the script to install the latest version (4.4.1):

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Now, that we have installed the charting library, we will first need to draw the canvas for our chart, which can be included inside a div element:

<div>
  <canvas id="myChart"></canvas>
</div>

Simple? The canvas is followed by the script to load the real chart. Check how the final script looks:

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

The data is added inside the datasets and it is easy to change the bar type by setting the type. For example, if you want the above chart to render a line chart instead of a bar chart, just change the chart type to line:

type: 'line',

That’s all. Now, you will have a line chart instead of a bar chart. You can customize the background colors according to your need. By default, the chart will apply five or six different colors to your bars in sequence. If you are just starting out with chart.js, you can try changing the values for data and labels and see how it outputs an awesome looking chart. There are a lot more configurations and customizations you can learn from the chartjs.org website. The above script is just a sample. You can add a lot more customizations to it including datalabels, custom tooltip and so on. You can aslo extend the dataset to include many more items and still the chart will render very fast and without any issues.