How to give a fixed color code for a specific label in mermaid pie chart?

[lemorage]

Select Topic Area

Question

Body

I have a question about Mermaid pie charts in GitHub Markdown.

For example, let’s say I have 30 blue cars, 20 yellow cars, and 5 green cars. If I code them up in a Mermaid pie chart, it looks like this:

pie
  "Yellow Car" : 20
  "Blue Car" : 30
  "Green Car" : 5

Loading

Now, if the number of yellow cars changes to 50, the chart updates like this:

pie
  "Yellow Car" : 50
  "Blue Car" : 30
  "Green Car" : 5

Loading

The issue is, the label “Yellow Car” doesn’t stay yellow. Its color changes based on how Mermaid automatically assigns colors. My question is: is there a way to make the label “Yellow Car” always appear in yellow, regardless of its proportion in the chart? Does GitHub Markdown support something like this?

[Bushra-Butt-17]

%%{init: {'themeVariables': {'pie1': '#FFD700', 'pie2': '#87CEEB', 'pie3': '#32CD32'}}}%%
pie
  title Car Colors
  "Yellow Car": 50
  "Blue Car": 30
  "Green Car": 5

Explanation:

1. The %%{init: ...}%% block initializes the Mermaid configuration, allowing you to define custom colors for the pie chart slices.
2. The pie1, pie2, and pie3 keys correspond to the slices in the order they are declared in the pie block.
   • #FFD700: Yellow (assigned to "Yellow Car").
   • #87CEEB: Light Blue (assigned to "Blue Car").
   • #32CD32: Green (assigned to "Green Car").

[agss0]

No they are not ?

%%{init: {'theme': 'base', 'themeVariables': { 
    'pie1': '#4EA72E',
    'pie2': '#FF0000',
    'pie3': '#E8E8E8'
}}}%%
pie showData 
"Green" : 5
"Red" : 29
"Grey" : 25

Loading

The color assignation is based on the increasing percentage the slices take, not "in the order they are declared in the pie block" as you said