Estoy creando un gráfico para representar algunos datos usando el gráfico js.
const data = { labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"], datasets: [ { label: "Sales Made", data: [3, 7, 4, 5], borderColor: ["#03A9F5"], }, ], }; const options = { tension: 0.4, title: { display: true, text: "linechrt", }, scales: { y: [ { display: true, stacked: true, ticks: { beginAtZero: true, steps: 10, stepValue: 5, min: 0, max: 100, }, }, ], }, };ahora he mirado tutoriales en línea e incluso la documentación, pero no he obtenido una respuesta clara sobre cómo pintar el área debajo de la línea. ChartJs tiene muchas versiones y las respuestas anteriores a esta pregunta, especialmente aquí en Stack, no parecen funcionar.
Para otros gráficos como el código de barra
backGroundColor: ["red"]en el objeto de conjuntos de datos funciona bien, pero si trato de hacer lo mismo para un gráfico de líneas, no funciona. El icono de la etiqueta superior en el que hace clic para ocultar o mostrar el gráfico es el único que parece responder al cambio de color de fondo. El área debajo de la línea no lo hace. Por favor ayuda.
<Line data={data} options={options} />Debe establecer el fill en verdadero en su conjunto de datos. Y dependiendo de si está utilizando treeshaking, también deberá importar y registrar el filler de chart.js.
const data = { labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"], datasets: [ { label: "Sales Made", data: [3, 7, 4, 5], borderColor: ["#03A9F5"], fill: true, backgroundColor: 'pink' }, ], };