Add getBarColor in CompositeChart

[Dominic-Preap]

Hello, currently we are trying to implement pareto chart using CompositeChart and it's working well. However it would be nice if we can have getBarColor from BarChart inside CompositeChart because we wan to have conditional to show different color bar chart.

Example image of proposal

Here is our sample code

const Demo = () => {
  const data = [
    {
      product: 'TESTING 1',
      product_sales: 760.5,
      running_sales: 760.5,
      total_sales: 2111.25,
      running_sales_per: 36
    },
    {
      product: 'TESTING 2',
      product_sales: 465.0,
      running_sales: 1225.5,
      total_sales: 2111.25,
      running_sales_per: 58
    },
    {
      product: 'TESTING 3',
      product_sales: 330.0,
      running_sales: 1555.5,
      total_sales: 2111.25,
      running_sales_per: 73
    },
    {
      product: 'TESTING 4',
      product_sales: 310.0,
      running_sales: 1865.5,
      total_sales: 2111.25,
      running_sales_per: 88
    },
    {
      product: 'TESTING 5',
      product_sales: 155.0,
      running_sales: 2020.5,
      total_sales: 2111.25,
      running_sales_per: 95
    },
    {
      product: 'TESTING 1',
      product_sales: 54.5,
      running_sales: 2075.0,
      total_sales: 2111.25,
      running_sales_per: 98,
      color: 'red'
    },
    {
      product: 'TESTING 1',
      product_sales: 21.25,
      running_sales: 2096.25,
      total_sales: 2111.25,
      running_sales_per: 99,
      color: 'red'
    }
  ];
  return (
    <CompositeChart
      h={310}
      curveType="linear"
      data={data}
      dataKey="product"
      rightYAxisLabel="Percentage"
      withRightYAxis
      xAxisProps={{ angle: -20 }}
      yAxisLabel="Total Sales"
      barProps={{
        // Should be something like this
        getBarColor: value => (value > 700 ? 'teal.8' : 'blue.8')
        name: 'product_sales',
      }}
      referenceLines={[
        {
          y: 80,
          label: '80%',
          color: 'red.4',
          yAxisId: 'right',
          strokeDasharray: '5 3'
        }
      ]}
      series={[
        { name: 'product_sales', color: 'blue.7', type: 'bar', label: 'Total Sales' },
        { name: 'running_sales_per', color: 'orange.8', type: 'line', yAxisId: 'right', label: 'Percentage' }
      ]}
     
    />
  );
};