• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

333
Views
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, } ] }} /> )}
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

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.

almost 3 years ago · 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} />; }

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error