title: Positive Negative Bar Chart Color w/ Recharts
body: <p>I'm trying to create a positive / negative bar chart using <a href="https://recharts.org/en-US" rel="nofollow noreferrer">Rechart</a>, but I don't know how to have the color fill set conditionally if the value is positive or negative.  I'd like to have something like this:
  <a href="https://i.stack.imgur.com/OkWEG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OkWEG.jpg" alt="enter image description here" /></a></p>
  <p>Example code from docs:</p>
  <pre><code>import React, { PureComponent } from 'react';
  import {
    BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine,
  } from 'recharts';
  
  const data = [
    {
      name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
    },
    {
      name: 'Page B', uv: -3000, pv: 1398, amt: 2210,
    },
    {
      name: 'Page C', uv: -2000, pv: -9800, amt: 2290,
    },
    {
      name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
    },
    {
      name: 'Page E', uv: -1890, pv: 4800, amt: 2181,
    },
    {
      name: 'Page F', uv: 2390, pv: -3800, amt: 2500,
    },
    {
      name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
    },
  ];
  
  export default class Example extends PureComponent {
    static jsfiddleUrl = 'https://jsfiddle.net/alidingling/q68cz43w/';
  
    render() {
      return (
        &lt;BarChart
          width={500}
          height={300}
          data={data}
          margin={{
            top: 5, right: 30, left: 20, bottom: 5,
          }}
        &gt;
          &lt;CartesianGrid strokeDasharray=&quot;3 3&quot; /&gt;
          &lt;XAxis dataKey=&quot;name&quot; /&gt;
          &lt;YAxis /&gt;
          &lt;Tooltip /&gt;
          &lt;Legend /&gt;
          &lt;ReferenceLine y={0} stroke=&quot;#000&quot; /&gt;
          &lt;Bar dataKey=&quot;pv&quot; fill=&quot;#8884d8&quot; /&gt;
          &lt;Bar dataKey=&quot;uv&quot; fill=&quot;#82ca9d&quot; /&gt;
        &lt;/BarChart&gt;
      );
    }
  }
  </code></pre>
  <p>Does anybody have example code that could accomplish this please?</p>