Chartjs-In Chart.js multibar graph, is there a way to highlight a single category?

by

1👍

Hope my snippet will help you.

Long story short: I have no idea how to achieve a similar result using only configuration, but manipulating with your chart after initialization does real magic.

Do not forget about chart.update() when you dynamically change something in your chart.

Cheers!

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

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

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script>
    const context = document.getElementById("myChart").getContext('2d');
    const chart = new Chart(context, {
      type: 'bar',
      data: {
        labels: ["First", "Second", "Third"],
        datasets: [{
            label: "Red",
            backgroundColor: "red",
            borderColor: [],
            borderWidth: 4,
            data: [4, 3, 5]
          },
          {
            label: "Green",
            backgroundColor: "green",
            borderColor: [],
            borderWidth: 4,
            data: [7, 2, 6]
          },
          {
            label: "Blue",
            backgroundColor: "blue",
            borderColor: [],
            borderWidth: 4,
            data: [3, 7, 4]
          },

        ]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

    const color = "yellow";
    const indexOfBordered = 1;
    chart.data.datasets.forEach(dataset => {
      dataset.borderColor[indexOfBordered] = color;
    });
    chart.update();
  </script>

</body>

</html>

Leave a comment