[RFC][charts] Customisation

Roses are red, Violets are blue, Sugar is sweet And so are chart libs.

Being able to customize how charts are rendered is an important topic.

Echarts

There is a global array of colors named color and series picks their color one after the other.

And each series have its own attributes to define it's visual representation, such as lineStyle, areaStyle, symbolSize, ...

They also specify customization depending on the state. For example with the element has the mouse hover, it will apply styles defined in emphasis which is a config object similar to the series.

For example, you can define

{
  lineStyle: { ... }, // The style of the line by default
  areaStyle: { ... }, // The style of the area by default
  emphasis: {
    // The style override when an element of the series is highlighted
    lineStyle: { ... },
    areaStyle: { ... },
  }
}

I'm not a big fan of defining the style for each series because you end up with duplicated content just to say "all my mines have symbols"

Nivo

They also have a dedicated palette with possibility to use a lot of premade ones, or your custom palette https://nivo.rocks/guides/colors/

But they have the opposite approach for customization. All the elements of the chart have the same style. I did not found a way to mix lines with different style wince you have to define the lineWidth has a props of the component.

But we could imagine a similar interface with a callback:

lineWidth: number | (seriesId: string) => number

Recharts

It's more simple since the plotted elements need to be added. It's basically one props per option.

A bit surprising, for area gradients, they encourage users to define their own svg definition and reuse them with fill="url(#colorUv)". I guess some properties such as fill are just passed to the rendered component. https://recharts.org/en-US/api/AreaChart

Highcharts

In addition to the usual property propagation, Highcharts allows CSS customization which is closer to the way we allow to customize elements with styled, sx, to theming

mui / mui-x