Soy nuevo en la programación y estoy tratando de hacer una leyenda personalizada para mi gráfico, ¿cómo puedo usar la propiedad "oculta" para cuando haga clic en ella, será trazo,
cuando hago "oculto: verdadero", todos se tachan, no solo en el que hice clic
Pd: estoy usando la versión 2.9.4 de chart.js
Aquí está mi código
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, }, }Puede usar el método isDatasetVisible en el objeto de gráfico con el índice del conjunto de datos actual para verificar si está oculto. Esto devuelve un valor booleano para que pueda colocarlo allí inmediatamente después de invertirlo.
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>