Showing/Hiding Based on Visibility of Lines in Chart

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]

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

[wjohnsto]

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