[charts] Allows to customize elements color based on its value

[RayHughes]

[charts] Allows to customize elements color based on its value

[alexfauquette]

About why you need to pass the mouse over, the props.style.y.animation.to is NaN at first render so your component does not render.

About how to get the information, using the useScale sounds to be ok. Maybe better would be that we pass this information to the component to simplify this.

For now, the ownerState get id and dataIndex which are the series' id and the index of the data rendered. So if you data is not too complicated, the best might be to rely on that information.

https://codesandbox.io/p/sandbox/mui-bar-chart-with-rounded-corders-right-forked-h5jvsd?file=%2FDemo.js%3A17%2C52-17%2C54

[RayHughes]

I solved this using the useYScale hook. Not sure if it's the best solution. Feedback appreciated.

A side affect is that the hover element has the wrong bar color associated

Once the BarElement export fix is released the custom rect can be replaced. #11234

Updated Code Pen: https://codesandbox.io/p/sandbox/mui-bar-chart-with-rounded-corders-right-forked-trvfp4?file=%2FDemo.js

export const BarChart = () => {
  const SlotBarElement = (props) =>{
    const yAxisScale = useYScale('left_axis_id')
    const yAxisValue = yAxisScale.invert(props.style.y.animation.to)
    const isBelowBar = yAxisValue < 8.5
    const color = isBelowBar ? '#ff0000' : '#00ff00'

    // work around export of BarElement
    return <rect
      fill={color}
      height={props.style.height.animation.to}
      width={props.style.width.animation.to}
      x={props.style.x.animation.to}
      y={props.style.y.animation.to}
    />
  }

  return (
    <ResponsiveChartContainer
        height={350}
        series={[
          { type: 'bar', data: [11, 10, 1, 9], yAxisKey: 'left_axis_id'},
        ]}
        xAxis={[{ scaleType: 'band', data: ['11/15', '11/16', '11/17', '11/18'] }]}
        yAxis={[{ id: 'left_axis_id'}]}
    >
      <BarPlot slots={{bar: SlotBarElement}}/>
      <ChartsXAxis />
      <ChartsYAxis axisId="left_axis_id" position="left"/>
      <ChartsReferenceLine label={'8.5'} labelAlign="end" y={8.5}/>
      <ChartsTooltip/>
    </ResponsiveChartContainer>
  )
}

[RayHughes]

For some reason the colors do not change automatically. Sometimes I have to mouse over the chart before they swap. Any thoughts why?

[RayHughes]

Thank you @alexfauquette this resolved my problem!!

[alexfauquette]

I'm just keeping this issue open to track the progress on simplifying conditional rendering of bar elements

[RayHughes]

I'm just keeping this issue open to track the progress on simplifying conditional rendering of bar elements

Makes sense..

I noticed the tooltip popup shows the default bar color and not the custom color of the bar. It's not a big deal for me, but figured I'd call it out since you're using this for tracking.

[alexfauquette]

I noticed the tooltip popup shows the default bar color and not the custom color of the bar.

Interesting. That's a sign the customization should probably not be into the component customization (bar, line, ...) but at a higher level to have coherence between chart element, the legend and the tooltip