mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.31k forks source link

[charts] Support color scale #12378

Closed alexfauquette closed 6 months ago

alexfauquette commented 8 months ago

Introduce a way to map values to colors.

Rechart

Use a trick base on gradient color. We used this trick to create https://mui.com/x/react-charts/areas-demo/#areachartfillbyvalue

NB: During this PR, an idea for demo was to display bar chart with monthly temperature going from blue to red

D3 JS

Ordinal scale to map a finit number of value to a finit number of colors. It's just a maaping from and array of values to an array of hexa

const color = d3.scaleOrdinal(d3.schemeBlues[9]);

image

Sequential scales for continuous values. It can map a continuouse range to color interpolation

const color = d3.scaleSequential(d3.interpolateBlues);

image

The best might be to let developers provide the interpolation they want to use, and don't try to reinvent them

Echart

They have a notion of visual Map that map values to visual feature such as symbol, size, or color.

For the Gauge they went with a much simpler solution

{
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },

But for Heat chart it's what they use: https://echarts.apache.org/examples/en/editor.html?c=heatmap-large

github-actions[bot] commented 6 months ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@alexfauquette: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.