Category: Chart.js

Sometimes, we want to handle click events on charts in Chart.js and JavaScript.

In this article, we’ll look at how to handle click events on charts in Chart.js and JavaScript.

Handle Click Events on Charts in Chart.js and JavaScript

To handle click events on charts in Chart.js and JavaScript, we can add the onClick method into our chart.

Then we can use the getElementsAtEventForNode method to get the index of the data set entry that we clicked on.

For instance, we can write the following HTML:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

to add the script for Chart.js and canvas elements for the bar chart.

Then we can add the bar chart by writing:

const 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
}]

const ctx = document.getElementById("myChart").getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    onClick(e) {
      const activePoints = myChart.getElementsAtEventForMode(e, 'nearest', {
        intersect: true
      }, false)
      const [{
        index
      }] = activePoints;
      console.log(datasets[0].data[index]);
    }
  }
});

We have the datasets array with the data, border color, and bar colors we want to display.

Also, we have the label to set the label of the legend.

Next, we have the options property set to an object with the onClick method to catch any clicks that were made on the chart.

In it, we call myChart.getElementsAtEventForNode method with the e event object, 'nearest' and an object with intersect set to true to get the nearest object that’s been clicked on.

It returns an array with the index of the dataset data entry that we clicked on.

Then we can get the value of the bar that we clicked on with:

datasets[0].data[index]

Conclusion

To handle click events on charts in Chart.js and JavaScript, we can add the onClick method into our chart.

Then we can use the getElementsAtEventForNode method to get the index of the data set entry that we clicked on.

Sometimes, we want to add grouped bar charts with Chart.js and JavaScript.

In this article, we’ll look at how to add grouped bar charts with Chart.js and JavaScript.

Add Grouped Bar Charts with Chart.js and JavaScript

To add grouped bar charts with Chart.js and JavaScript, we just have to put all the chart data in the datasets array property.

For instance, we can add the Chart.js script and the canvas for the chart with the following HTML:

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

Then we write:

const ctx = document.getElementById('myChart').getContext('2d');
const data = {
  labels: ["Chocolate", "Vanilla", "Strawberry"],
  datasets: [{
      label: "Blue",
      backgroundColor: "blue",
      data: [3, 7, 4]
    },
    {
      label: "Red",
      backgroundColor: "red",
      data: [4, 3, 5]
    },
    {
      label: "Green",
      backgroundColor: "green",
      data: [7, 2, 6]
    }
  ]
};

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});

to get the canvas 2d context with:

const ctx = document.getElementById('myChart').getContext('2d');

Then chart data is defined with:

const data = {
  labels: ["Chocolate", "Vanilla", "Strawberry"],
  datasets: [{
      label: "Blue",
      backgroundColor: "blue",
      data: [3, 7, 4]
    },
    {
      label: "Red",
      backgroundColor: "red",
      data: [4, 3, 5]
    },
    {
      label: "Green",
      backgroundColor: "green",
      data: [7, 2, 6]
    }
  ]
};

Each entry has the data for each bar.

They’ll be grouped together into a group bar chart with Chart.js.

Then we create our chart with:

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});

We just set type to 'bar' to create a grouped bar chart.

Conclusion

To add grouped bar charts with Chart.js, we just have to put all the chart data in the datasets array property.

Sometimes, we want to disable everything on hover with Chart.js.

In this article, we’ll look at how to disable everything on hover with Chart.js.

How to disable everything on hover with Chart.js?

To disable everything on hover with Chart.js, we can set the options.events property to an empty array.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<canvas id='myChart' style='width: 300px; height: 300px'></canvas>

to add the Chart.js script and canvas.

And we write:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1,
      borderColor: 'green'
    }]
  },
  options: {
    events: []
  }
});

to select the canvas and add a line chart into it.

We set options.events to an empty array to disable everything on hover.

Now when we hover over the graph, we shouldn’t see any tooltips or hover effects displayed.

Conclusion

To disable everything on hover with Chart.js, we can set the options.events property to an empty array.

Sometimes, we want to remove the vertical line in the Chart.js line chart.

In this article, we’ll look at how to remove the vertical line in the Chart.js line chart.

How to remove the vertical line in the Chart.js line chart?

To remove the vertical line in the Chart.js line chart, we can set the options.scales.x.grid.display property to false.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<canvas id='myChart' style='width: 300px; height: 300px'></canvas>

to add the Chart.js script and canvas for the chart.

Then we write:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1,
      borderColor: 'green'
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          display: false
        }
      },
    }
  }
});

to set options.scale.x.grid.display to false to hide the vertical lines in the background.

Now we should only see the horizontal lines displayed in the background.

Conclusion

To remove the vertical line in the Chart.js line chart, we can set the options.scales.x.grid.display property to false.

To add grouped bar charts with Chart.js, we just have to put all the chart data in the datasets array property.

For instance, we can add the Chart.js script and the canvas for the chart with the following HTML:

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

Then we write:

const ctx = document.getElementById('myChart').getContext('2d');
const data = {
  labels: ["Chocolate", "Vanilla", "Strawberry"],
  datasets: [{
      label: "Blue",
      backgroundColor: "blue",
      data: [3, 7, 4]
    },
    {
      label: "Red",
      backgroundColor: "red",
      data: [4, 3, 5]
    },
    {
      label: "Green",
      backgroundColor: "green",
      data: [7, 2, 6]
    }
  ]
};

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});

to get the canvas 2d context with:

const ctx = document.getElementById('myChart').getContext('2d');

Then chart data is defined with:

const data = {
  labels: ["Chocolate", "Vanilla", "Strawberry"],
  datasets: [{
      label: "Blue",
      backgroundColor: "blue",
      data: [3, 7, 4]
    },
    {
      label: "Red",
      backgroundColor: "red",
      data: [4, 3, 5]
    },
    {
      label: "Green",
      backgroundColor: "green",
      data: [7, 2, 6]
    }
  ]
};

Each entry has the data for each bar.

They’ll be grouped together into a group bar chart with Chart.js.

Then we create our chart with:

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});

We just set type to 'bar' to create a grouped bar chart.