Set custom colour palette in Plotly js in Angular

user_2982312 0
Viewed 862

I am using Plotly js in my recent angular project. I implemented the library successfully by using its angular based wrapper.

There is one thing that I tried to implement in many ways but failed. I am trying to use my custom color palette for its charts.

I find a work around by passing the colour in the chart data layout like,

data = [{
  values: allValues[0],
  labels: allLabels,
  type: 'pie',
  name: 'Starry Night',
  marker: {
    colors: [['rgb(56, 75, 126)', 'rgb(18, 36, 37)', 'rgb(34, 53, 101)', 'rgb(36, 55, 57)', 'rgb(6, 4, 4)']]
  },
  domain: {
    row: 0,
    column: 0
  },
  hoverinfo: 'label+percent+name',
  textinfo: 'none'
}

and it worked but it's not the perfect way because I need to add this in every chart data and need to take care of how many data points are there so I push those many color codes.

Is there any way I can provide my color palette in somewhere like config so that every time a chart gets initialize it start taking colors from the custom-defined palette.

plotly.js angular plotly javascript
1 Answers

The layout property takes a property colorway which takes a list of colour names/codes.

public graph: any = {
    data: [],
    layout: {
      colorway: ["red", "green", "blue", "goldenrod", "magenta"],
      autosize: true,
    }
}

But I haven't yet figured out how to set this globally.

user_19615740
Related