Create charts with JavaScript and Chart.js

Chart.js is one of the most well-known and popular JavaScript libraries for creating interactive charts and data visualizations simply and flexibly.

Its design focuses on being easy to use while offering a wide range of options for customizing charts. It allows the creation of various types of charts, such as bar, line, pie, and radar, among others.

Chart.js is open source and is based on HTML5 Canvas to draw the charts on the webpage. For example, here you have a chart created with Chart.js

Some of the features of Chart.js

• Support for multiple chart types: Includes line, bar, pie, radar, bubble, polar charts, and more.
• Interactivity: Charts are interactive by default, with features like tooltips and legends.
• Animations: Charts can be animated during rendering.
• Flexible configuration: Allows detailed customization of styles, colors, and behaviors of the charts.
• Scalability: Compatible with different screen sizes and devices.

For more information about Chart.js, we can visit the official Chart.js site and consult the full documentation. We can also explore the repository on GitHub to see the source code and contribute to the community.

Installing Chart.js

To start using Chart.js in our projects, we first need to install it. If we are using npm, we can install Chart.js with the following command:

npm install chart.js

Alternatively, we can include Chart.js directly in our HTML via a <script> tag:

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

How to Use Chart.js

Add the Element to HTML

First, we need to add the container where Chart.js will render the chart. For these examples, we will do it like this

<canvas id="myChart" width="400" height="200"></canvas>

Creating a Line Chart

const ctx = document.getElementById('myChart').getContext('2d');
const myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Monthly Sales',
      data: [10, 20, 15, 30, 25, 40, 35],
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      fill: true
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      tooltip: {
        callbacks: {
          label: function(tooltipItem) {
            return `Sales: $${tooltipItem.raw}`;
          }
        }
      }
    }
  }
});

Creating a Bar Chart

The following example shows how to create a bar chart.

const ctx = document.getElementById('myChart').getContext('2d');
const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      tooltip: {
        callbacks: {
          label: function(tooltipItem) {
            return `Votes: ${tooltipItem.raw}`;
          }
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

Creating a Pie Chart

To represent proportional data, we can use a pie chart.

const ctx = document.getElementById('myChart').getContext('2d');
const myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: 'My First Dataset',
      data: [300, 50, 100],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      tooltip: {
        callbacks: {
          label: function(tooltipItem) {
            return `Value: ${tooltipItem.raw}`;
          }
        }
      }
    }
  }
});