How do I color specific bars in XY Chart?

[LizThompson93]

Documentation: https://mermaid.js.org/syntax/xyChart.html#chart-theme-variables

Expectation: Specifically make the first bar red, and the other three bars dark gray.

Current: It applies the first color to all bars.

Am I using plotColorPalette wrong? It only applies the first color in the list to all bar instead of the first bar.

---
config:
    xyChart:
        width: 500
        height: 500
        chartOrientation: horizontal
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
            plotColorPalette: "#ff0000, #434455, #434455, #434455"
---
xychart-beta
    title "Sales Revenue"
    x-axis ["A", "B", "C", "D"]
    y-axis "Revenue (in $)" 0 --> 100
    bar [16.0, 21.8, 71.5, 8.3]

[Piratepie]

The colors your assign using the plotColorPalette apply to the whole array of points given to a single bar. Check out this example to see multiple colors being used in an xyChart. I've requested the support for multiple bars etc. here.

It's not optimal, but a solution to this use case would be this:

---
config:
    xyChart:
        width: 500
        height: 500
        chartOrientation: horizontal
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
            plotColorPalette: "#ff0000, #434455"
---
xychart-beta
    title "Sales Revenue"
    x-axis ["A", "B", "C", "D"]
    y-axis "Revenue (in $)" 0 --> 100
    bar [16.0, 21.8, 71.5, 8.3]
    bar [0, 21.8, 71.5, 8.3]

Loading