xyChart features

[Piratepie]

TL;DR: ideas on how to implement multiple bars, a legend, and points of interest

I've run into a couple of limitations using xyChart and I've come up with some suggestions here.

Multiple bars

A very common use case is showing bars over or next to each other. Here follows 2 examples:

Currently, xyChart does take in 2 bar arguments, but doesn't display them in a way that's useful. Recreating the first chart in mermaid yields the following:

xychart-beta
    title Number of Students in each group
    x-axis "numbersX" ["Group A", "Group B", "Group C", "Group D"]
    y-axis "numbersY" 0 --> 40
    bar [10,20,20,40]
    bar [20,30,25,30]

The bars overlap, hiding the smaller value. It would be great for direct comparisons if either:

• Bars could be placed side by side
• Bars could be placed on top of each other without hiding the smallest value

The example of the 2nd bar can be done in the current implementation, but without a legend becomes hard to use. Which leads me to...

Legend

There's currently no support for a legends, which makes reading the chart hard. When using multiple lines and/or bars it makes a chart barely useable.

In this example of a line xyChart there is no way of knowing which line is what.

xychart-beta
    title "Number of Students in each group"
    x-axis "numbersX" ["Group A", "Group B", "Group C", "Group D"]
    y-axis "numbersY" 0 --> 40
    line [10,20,20,40]
    line [20,30,25,30]
    line [40,30,20,10]

Plotted points

Another, more niche, use case of a line chart is to add points to project growth for example. This example shows the real data with lines and the projected usages with points plotted on the chart.

Suggested solution

A solution would be to add IDs to the bar and line element. This could be:

Naming the element like pie charts or like gantt charts

    "Girls" : bar [10,20,20,40]
    "Boys" : line [20,30,25,30]

Adding the ID as a parameter like sequence diagrams, allows for using the keyword "as"

    bar Girls [10,20,20,40]
    line Boys [20,30,25,30]

Wrapping the element with an ID like flowcharts

    girls(bar [10,20,20,40])
    boys(line [20,30,25,30])

This would help with differentiating between bars and lines, which could also be used for a legend like that already implemented in the pie chart

As for the plotted points, this could be a useful new element of xyChart which could look like this (including the ID idea mention above):

    %% id: string : point [xIndex: int, yValue: float]
    %% projected growth or shrinking in the month december would look like

xychart-beta
    title "Sales projection"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "sales" 50 --> 150
    "Grow": point [11, 110]
    "Shrink": point [11, 90]

I also saw I'm not the only one, #5207 also mentioned the legend for multiple lines.

[dschulzg]

I just discovered mermaid in our gitlab installation. I'm so impressed! SOOOO Useful! The above points are the only thing preventing me from being able to inline some charts in a markdown document!.

[sarod]

Legend is the one that is lacking the most I find when using multiple line or bars