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

[Judp0m]

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

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]

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.

[kilogold]

+1

[arcturionSF]

I also came across this error in version 10.9.1 . My solution is to remove the sorting by value in "createPieArcs" . Maybe the following diff helps:

--- ./dev/js/mermaid.js	2024-08-20 16:53:11.436105506 +0200
+++ ./dev/js/mermaid/mermaid.js	2024-08-20 17:13:20.106787643 +0200
@@ -52951,8 +52951,6 @@
         label: element2[0],
         value: element2[1]
       };
-    }).sort((a, b) => {
-      return b.value - a.value;
     });
     const pie2 = d3pie().value(
       (d3Section) => d3Section.value