0
443
ViewsCómo cambiar los colores en los gráficos de reacción
Estoy haciendo un gráfico y estoy un poco confundido. adjuntaré una foto a continuación 
En primer lugar, quiero que el título no esté indefinido, ¿cómo cambio el título? Y quiero cambiar el color de fondo del gráfico debajo de las líneas, aquí está mi código
{data?.length > 0 && ( <Line options={options} height={"300%"} data={{ datasets: [ { backgroundColor: "rgba(204, 16, 52, 0.5)", borderColor: "#CC1034", data: data, } ] }} /> )}
·
Juan Pablo Isaza
2 answers
Answer question0
La etiqueta de la leyenda se mostrará correctamente si define la label en su conjunto de dataset , esto fue mencionado por WhiteHat en su comentario.
Para obtener el color de fondo debajo de las líneas (básicamente un gráfico de área), debe agregar fill: true al conjunto de dataset .
Para que funcione, también debe importar y registrar Filler desde chart.js .
Eche un vistazo a este Code Sandbox y vea cómo funciona.
·
Juan Pablo Isaza
Report
0
Así es como agregué estilo a mi gráfico:
function MyChart({}) { const { data } = useChartConfig({ height: 200, grouping: "primary", dataType: "ordinal", }); const getSeriesStyle = React.useCallback((series) => { // Based off my chart bars const colorPalette = { series1: "#354657", series2: "#5597e2", series3: "#28A96C", series4: "#d44401", series5: "#ffe65b", series6: "#ffab1b", }; return { fill: colorPalette[series.label], }; }, []); return <Chart data={data} getSeriesStyle={getSeriesStyle} />; }
·
Juan Pablo Isaza
Report
Answer question