search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.82k stars 6.09k forks source link

Pie chart colors don't match with pie1 pie2 theme colors #5314

Open Judp0m opened 4 months ago

Judp0m commented 4 months ago

Description

Here is an example, the colors do not match. For some reason, the labels get sorted from largest to smallest. I actually would prefer that sorting/re-ordering does not happen or be optional via the config. The doc leads me to thing this should not be re-sorted by value: Pie slices will be ordered clockwise in the same order as the labels. cf https://mermaid.js.org/syntax/pie.html#syntax

config:
    themeVariables:
        pie1: "red"
        pie2: "green"
        pie3: "blue"
        pie4: "yellow"
pie 
    title Key elements in Product X
    "Pie1-red" : 30
    "pie2-green" : 50
    "pie3-blue" : 19
    "pie4-yellow" :  1

May be related to https://github.com/mermaid-js/mermaid/pull/4774

Steps to reproduce

Plot the provided pie chart and observe the mismatch in label/colors.

Screenshots

image

Code Sample

---
config:
    themeVariables:
        pie1: "red"
        pie2: "green"
        pie3: "blue"
        pie4: "yellow"
---
pie 
    title Key elements in Product X
    "Pie1-red" : 30
    "pie2-green" : 50
    "pie3-blue" : 19
    "pie4-yellow" :  1

Setup

No response

Suggested Solutions

Make the pie1 pie2 etc match the order of the config. Additionally, Don't reorder, or make it optional.

Additional Context

No response

TheRealH0u commented 2 months ago

Has this been fixed? It's really annoying me that the colors don't match the specified difficulty that I have, instead it makes orders them from highest to lowest and puts the colors in that order.