Chartjs-Charjs: How to hide other lines on hover?

by

3👍

✅

I think you should implement onHover hook in the chart options. Based on hovered element you can hide the others.
2 points of attention I guess:

  1. hover mode should 'point' and not 'index' otherwise all datasets will be hidden
  2. to have a consistent view on chart, you should set min and max on y scale.
        var ctx = document.getElementById("myChart").getContext("2d");
            var myChart = new Chart(ctx, {
            type: "line",
            data: {
                labels: [1, 2, 3, 4, 5],
                datasets: [{
                label: "Line 1",
                data: [1, 2, 3, 4, 5],
                borderColor: "red",
                backgroundColor: "rgba(255,0,0,0.2)"
                }, {
                label: "Line 2",
                data: [5, 4, 3, 2, 1],
                borderColor: "blue",
                backgroundColor: "rgba(0,0,255,0.2)"
                }, {
                label: "Line 3",
                data: [2, 4, 6, 8, 10],
                borderColor: "green",
                backgroundColor: "rgba(0,255,0,0.2)"
                }]
            },
            options: {
                scales: {
                  y: {
                    beginAtZero: true,
                    max: 10
                  }
                },
                onHover(e, elements, chart) {
                  if (elements.length) {
                    for (const el of elements) {
                      const dsCount = chart.data.datasets.length;
                      for (let i = 0; i < dsCount; i++) {
                       if (i !== el.datasetIndex) {
                         chart.setDatasetVisibility(i, false);
                       }
                      }
                    }
                    chart.update();
                  } else {
                    const dsCount = chart.data.datasets.length;
                    for (let i = 0; i < dsCount; i++) {
                       chart.setDatasetVisibility(i, true);
                    }
                    chart.update();
                  }
                },
                hover: {
                mode: "point",
                intersect: true
                },
                animation: {
                duration: 0
                }
            }
            });
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
  </head>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment