CODEWITHSUNDEEP
javascriptreactjschartsrecharts
Zlatka Pijeva
Zlatka Pijeva

Reputation: 71

Recharts not display negative values on LineBarAreaComposedChart React

I'm trying to optimize the graph with 6 variable values.

Sometimes some of these values are negative, and the graph does not show them.

I tried to put negative values on the Y scale, but that's not working either.

The Line itself on the graph disappears.

The wind speed line has positive values but it is not visible either.

LineBarAreaComposedChart

My code: 

<div className="row">
          <div className="col-md-12">
            <ComposedChart width={1100} height={800} data={this.state.data} stackOffset="sign">
              <XAxis dataKey="Date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <CartesianGrid strokeDasharray="3 3" />
              <Area type='monotone' dataKey='Apress' fill='#726a64' stroke='#726a64' />
              <Bar dataKey='Rain' barSize={20} fill='#000cff'>
                <LabelList dataKey="Rain" position="top" />
              </Bar>
              <Bar dataKey='Snow' barSize={20} fill='#6387ff'>
                <LabelList dataKey="Snow" position="top" />
              </Bar>
              <Line type='monotone' dataKey='Temp' stroke='#ff0000' />
              <Line type='monotone' dataKey='WindSpeed' stroke='#00ff1a' />
            </ComposedChart>
          </div>
        </div>
      </div>

Upvotes: 1

Views: 4122

Answers (1)

Yash Thakur
Yash Thakur

Reputation: 1201

Add props stackOffset=“sign” to BarChart.

The default value is none which is why you don’t get negative values.

Upvotes: 4

Related Questions