estoy tratando de editarlo en las etiquetas:{}, pero solo cambia el color, pero no el texto, avíseme si hay alguna forma de complemento: {
legend: { display: true, position: 'top', labels: { text: "qasim", color: "red", } }, title: { display: false, text: "Status", }, tooltip: { enabled: false, position: "nearest", external: "" } }Deberá usar una función de generar etiquetas personalizada para esto:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { plugins: { legend: { labels: { generateLabels: (chart) => { const datasets = chart.data.datasets; const { labels: { usePointStyle, pointStyle, textAlign, color } } = chart.legend.options; return chart._getSortedDatasetMetas().map((meta) => { const style = meta.controller.getStyle(usePointStyle ? 0 : undefined); const borderWidth = Chart.helpers.toPadding(style.borderWidth); return { text: 'Custom text: ' + datasets[meta.index].label, fillStyle: style.backgroundColor, fontColor: color, hidden: !meta.visible, lineCap: style.borderCapStyle, lineDash: style.borderDash, lineDashOffset: style.borderDashOffset, lineJoin: style.borderJoinStyle, lineWidth: (borderWidth.width + borderWidth.height) / 4, strokeStyle: style.borderColor, pointStyle: pointStyle || style.pointStyle, rotation: style.rotation, textAlign: textAlign || style.textAlign, borderRadius: 0, // TODO: v4, default to style.borderRadius // Below is extra data used for toggling the datasets datasetIndex: meta.index }; }, this); } } } } } } 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/3.7.1/chart.js"></script> </body>