Showing/Hiding Based on Visibility of Lines in Chart

[wjohnsto]

I have a line chart with a legend and 3 lines drawn. When you click the legend the lines show/hide and the graph adjusts accordingly. Out of the box the datalabels do not hide whenever a line is hidden. I am currently using this method of hiding the datalabels:

options: {
    plugins: {
        datalabels: {
            display: (context: any) => {
                return !context.dataset._meta[0].hidden;
            },
        },
    },
},

This works, but the _meta[0].hidden thing seems like a hack/not something we're supposed to be using. Is there a different approach that is more stable?

[simonbrunel]

I think that's a bug, it should work out of the box.

Can you build a jsfiddle that reproduces this issue?

[hrobayo]

The same issue form me, the wjohnsto solutions works, Chart.js Version: 2.7.2 used.

Please, is there another solution?

[wjohnsto]

Here is a jsfiddle: https://jsfiddle.net/sxzqwr80/76/

[simonbrunel]

That's a bug, will be fixed in next release (labels will always be hidden if the dataset is hidden).

As a workaround, you can use:

display: function (context) {
    return context.chart.isDatasetVisible(context.datasetIndex);
}

EDIT: remove TypeScript

[hrobayo]

It's nice!, thanks.

[wjohnsto]

Sweet 👍

[jibe0123]

Thanks 😍

[hoang051195]

Thanks. And I use this for display data with condition

display: function(context) {
    return context.chart.isDatasetVisible(context.datasetIndex)
        && context.dataset.data[context.dataIndex] > 0;
}

Edit(SB): code formatting

[wjohnsto]

My code is TypeScript, so you may have to remove the non-JS stuff to get it to work.

[wjohnsto]

display: function (context) {
    return context.chart.isDatasetVisible(context.datasetIndex);
}

[simonbrunel]

@wjohnsto Thanks (I updated my comment)

[simonbrunel]

Fixed in 542ec92, will be released in 0.4.0