Setting the colour scheme for pie charts in the new chart component?

💬 App Building
1

Is there any way to define the colour scheme for a pie chart using the newer chart component?

There doesn't seem to be a way to map colours to the labels.
My options seem to be:

  • Manual: Clears when the options in the underlying data shift
  • Palette: Colour gradient so no useful
  • Array: Don't see a way to associate colours to variables

Am I going to have to use the older chart component and define it via Plotly?

Apologies if I am missing something obvious. I'm dealing with a wild wisdom toothache at the same time (should be called a wisDOOM tooth).

image
image1503×436 49.3 KB

image
image335×1057 37.2 KB

2

Hi @ferret141,

I'll be running a demo test in my app. You might want to try creating a transformer and use its output to set the color array in the pie chart's color section.

Transformer Code

const colorMap = {
  "B-Clarify & Expand": "#FF9800", 
  "C-Scheduled": "#F06292", 
  "D-Rescheduling": "#BA68C8" 
};

// Get the labels from the data
const labels = {{ getLeadsData.data }}.map(item => item.lead_status);


return labels.map(label => colorMap[label] || "#CCCCCC"); /

=

image
image1460×770 72.3 KB

The second option is Inline Mapping in the Chart Settings

Alternatively, you can use an inline mapping directly within the chart’s color configuration:

{{ 
  getLeadsData.data.map(item => ({
    "B-Clarify & Expand": "#FF9800", // Orange
    "C-Scheduled": "#F06292", // Pink
    "D-Rescheduling": "#BA68C8" // Purple
  })[item.lead_status] || "#CCCCCC")
}}

image
image789×888 53.4 KB

1 Like
3

Thank you @WidleStudioLLP. That was exactly what was needed.

I used the inline method.

1 Like