Charjs: How to hide other lines on hover?

Question

Charjs: How to hide other lines on hover?

131 views Asked by Volatil3 At 30 January 2023 at 08:00

I am using Chart.js v3, below is the code but it is not hiding. The goal is that when I hover over a line, it hides other lines and their labels. The code is given below:

<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>
    <canvas id="myChart" width="300" height="200"></canvas>
    <script>
        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: {
                hover: {
                mode: "index",
                intersect: true
                },
                animation: {
                duration: 0
                }
            }
            });

    </script>
  </body>
</html>

Original Q&A

There are 1 answers

**user2057925** · Accepted Answer · 2023-01-30T12:40:09+00:00

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:

hover mode should 'point' and not 'index' otherwise all datasets will be hidden
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>

TechQA.

Charjs: How to hide other lines on hover?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CHART.JS

Related Questions in CHART.JS3

Popular Questions

Popular Tags

Trending Questions