• Empleos
  • Sobre nosotros
  • Empleos
    • Inicio
    • Empleos
    • Cursos y retos
  • Empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

347
Vistas
Có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 ingrese la descripción de la imagen aquí

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, } ] }} /> )}
over 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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.

over 3 years ago · Juan Pablo Isaza Denunciar

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} />; }

over 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda