How to specify the color of lines and bars in XYChart?

[jeanplevesque]

I looked at the documentation and I can't figure out how to set the color for bar and line definitions. My use-case is having multiple lines in the same chart and create a legend to explain the meaning of each line.

[eadmaster]

i think mermaid should auto-pick different web-safe colors for xygraph bars when no theme is specified.

This should make diagrams looks better. e.g.:

compare with the example here

[Piratepie]

Using the Chart Theme Variables you can set a color palette with plotColorPalette.
These colors will be applied to the lines and bars defined in the xyChart. So the first color in your palette will correspond with the first bar/line etc.

Here's a short example

---
config:
    themeVariables:
        xyChart:
            plotColorPalette: "#000000, #0000FF, #00FF00, #FF0000"
---
         %% plotColorPalette: "black, blue, green, red"
xychart-beta
    title "Different colors in xyChart"
    x-axis "numbersX" ["Group A", "Group B", "Group C", "Group D"]
    y-axis "numbersY" 0 --> 40
    %% black
    bar [20,30,25,30]
    %% blue
    bar [10,20,20,20]
    %% green
    bar [5,10,5,5]
    %% red
    line [0,5,40,2]

A legend is currently not possible, I've suggested the feature in #5326

[jeanplevesque]

Great! thank you!