Search code examples
reactjsplotly.jsplotly-react

Change color of slices of piechart in plotly.js using react-plotly.js

import Plotly from "plotly.js";
import createPlotlyComponent from "react-plotly.js/factory";

export const Plot = createPlotlyComponent(Plotly);

export function PieChart() {
  return <Plot data={data} layout={layout} config={{ displaylogo: false }} useResizeHandler={true} style={{ width: '100%' }} />;
}

I want to change the color of Piechart slices, I referred to the documentation of plotly and added

marker: {
    color: 'rgba(255,153,51,0.6)',
    width: 1
}

too but it's not working

Solution

  • This is array,

    maker.color --> maker.colors

    You can do this as below

    marker: {
   colors: ['rgb(56, 75, 126)', 'rgb(18, 36, 37)', 'rgb(34, 53, 101)'],
   width: 1
}

    Here is DEMO for this,