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

[s-h-a-d-o-w]

I suspect you don't need this anymore but maybe somebody else stumbles across this. There are two ways of doing it:

• If you have control over CSS, just select the appropriate rect elements and set the fill color. Currently, this seems the most elegant to me.
• Elaborating on what Piratepipe posted: their strategy can be used but requires a bit of creativity to fully take advantage of. Example:

    %% black
    bar [20,0,0,0]
    %% blue
    bar [0,10,0,0]
    %% green
    bar [0,0,5,0]