0

In react I to draw bar charts with different colors based for each bar based on value.

Like:

if value is 0-50 Then Green

51-100 Then Orange

101-200 Then Yellow

  <BarChart  data={data} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
          <CartesianGrid />
          <XAxis dataKey="label" tick={{ angle: -45 }} interval={0}/>
          {isIndex ?  
            <YAxis width={50} dataKey="value" domain={[0, max]} tickCount={11} type="number" /> :
            <YAxis width={50} dataKey="value" domain={[0, max]} type="number" />}
          <Tooltip content={<CustomTooltip stdVal={stdVal} unit={unit} barActiveTT={barActiveTT} lineActiveTT={lineActiveTT} />} />
        
          <Bar dataKey="value" fill="#8884d8" onMouseOver={() => { this.setState({ barActiveTT: true }) }} onMouseOut={() => { this.setState({ barActiveTT: false }) }} >
          {
              data.map((entry, index) => {
                var color="";
                if(entry.value < 50)
                {
                  color = "#00e400";
                }
                else if(entry.value > 50 && entry.value < 100)
                {
                  color =   "#ffff00";
                }
                else
                {
                  color = "#ff7e00";
                }
                return <Cell fill="{color}" />;
              })
          }
          </Bar>              
        </BarChart>

Please help

user641812
  • 335
  • 5
  • 19
  • Does [this](https://stackoverflow.com/questions/7737409/set-different-colors-for-each-column-in-highcharts) answer your question? – Parth Shah Jul 09 '20 at 19:04
  • No, I want to use react – user641812 Jul 09 '20 at 20:00
  • Use conditional rendering like [this](https://reactjs.org/docs/conditional-rendering.html). – Parth Shah Jul 09 '20 at 20:07
  • Hi @user641812, I recommend you to use the officially supported by Highcharts react wrapper: https://www.npmjs.com/package/highcharts-react-official or use color-axis feature: https://www.highcharts.com/docs/maps/color-axis – ppotaczek Jul 10 '20 at 12:50

0 Answers0