0
235
ViewsChartJS color de borde diferente para la leyenda
Necesito establecer un color de borde diferente para la leyenda que el gráfico real; cada vez que agrego color de borde a los datos del gráfico, se aplica tanto a la leyenda como al gráfico. Y no pude encontrar ninguna opción para configurar diferentes colores de borde para la leyenda en la documentación
Aquí hay una captura de pantalla de lo que estoy tratando de lograr, ¿alguna idea?: 
1 answers
Answer question0
La única forma que he encontrado para hacer esto y algunas otras personalizaciones en la leyenda es implementar la interfaz de elemento de leyenda .
La respuesta aceptada aquí en combinación con la interfaz del elemento de leyenda debería ser un buen comienzo.
Aquí hay un jsfiddle que hice a partir de esa respuesta, pero actualizado para chartjs 3.7.1. La parte principal en la que centrarse es esta:
options: { plugins: { legend: { labels: { usePointStyle: true, generateLabels: function(chart) { var data = chart.data; if (data.labels.length && data.datasets.length) { return data.labels.map(function(label, i) { var meta = chart.getDatasetMeta(0); var ds = data.datasets[0]; return { text: label, fillStyle: ds.backgroundColor[i], strokeStyle: ds.legendOutline[i], lineWidth: ds.borderWidth, hidden: isNaN(ds.data[i]) || meta.data[i].hidden, index: i }; }); } else { return []; } } } } }strokeStyle es la propiedad de contorno, y he creado un campo en el conjunto de datos llamado legendOutline. legendOutline y los datos del conjunto de datos se referencian con i, por lo que legendOutline[i] apunta a la etiqueta que representa los datos[i]