CODEWITHSUNDEEP
datasetchart.js
Tommy Sze
Tommy Sze

Reputation: 43

Mouse over on line chart data active other data-set in Chart.js

I'm creating a line chart using Chart.js. The chart has two datasets. The x-axis is date, and y-axis is the value. When I hover the first data in dataset 1, the first data in dataset 2 is also active(zoom). That isn't I expected. Is there any way to active only the hovered data. And is there any way to active all data by their y value, not by index.

I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index. https://www.chartjs.org/docs/latest/general/interactions/modes.html

var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [{
                x: '2019-01-15',
                y: 100
            }, {
                x: '2019-02-03',
                y: 300
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(255, 0, 0, 1)',
            borderWidth: 1
        }, {
            label: 'Dataset 2',
            data: [{
                x: '2019-01-03',
                y: 150
            }, {
                x: '2019-01-15',
                y: 200
            }, {
                x: '2019-02-06',
                y: 250
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 255, 255, 1)',
            borderWidth: 1
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                }
            }],
            xAxes: [{
                type: 'time',
                position: 'bottom',
                time: {
                    min: "2019-1-1",
                    max: "2019-2-28",
                    unit: "month",
                    displayFormats: {
                        "month": "YYYY-MM",
                    }
                }
            }]
        }
    }
});

https://jsfiddle.net/t1gmrujo/2/

Upvotes: 4

Views: 5253

Answers (1)

timclutton
timclutton

Reputation: 13004

I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.

The tooltip configuration controls display of the tooltip popup, not the dataset points. Points are controlled by the hover configuration. This is mentioned on the page you linked (emphasis mine):

When configuring interaction with the graph via hover or tooltips, a number of different modes are available.

If you only want the single point you are hovering over to be highlighted, use:

options: {
  hover: {
    mode: 'point'
  }
}

If you want the whole dataset highlighted when hovering any single dataset point, use:

options: {
  hover: {
    mode: 'dataset'
  }
}

If you want to highlight the dataset and see all dataset values in the tooltip, use:

options: {
  hover: {
    mode: 'dataset'
  },
  tooltips: {
    mode: 'dataset'
  }
}

Upvotes: 5

Related Questions