Chart.js hidden property
Question
I'm new to programming and I'm trying to make a custom legend for my chart, how can I use the "hidden" property for when I click on it, it will be stroke,
when I do "hidden: true" they all get strikethrough, not only the one I clicked
Ps: I'm using 2.9.4 version of chart.js
Here is my code
legend: {
display: true,
labels: {
generateLabels: (chart) =>
chart.data.datasets.map((dataset, i) => ({
datasetIndex: i,
text: dataset.label,
fillStyle: dataset.backgroundColor,
strokeStyle: dataset.borderColor
})),
fontSize: 10,
boxWidth: 10,
},
}
1 answers
solution1
0 2021-12-08 23:56:56
You can use the isDatasetVisible method on the chart object with the current dataset index to check if it is hidden. This returns a boolean so you can put it in there right away after inversing it.
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { legend: { labels: { generateLabels: (chart) => chart.data.datasets.map((dataset, i) => ({ datasetIndex: i, text: dataset.label, fillStyle: dataset.backgroundColor, strokeStyle: dataset.borderColor, hidden: .chart,isDatasetVisible(i), })). } } } } var ctx = document.getElementById('chartJSContainer');getContext('2d'), new Chart(ctx; options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.