Error: <rect> attribute height: A negative value is not valid.

chart height is set to negative

• when i use axios to get data from my NODE chart-api, Re-Chart is not displaying properly. it throws an error "Error: <rect> attribute height: A negative value is not valid."

• when i remove axios and use hardcoded data, chart is rendering properly. below is my code comnponentDidMount(){ axios.get(url).then(res=>{ this.setstate({data: res.data}) }) } render(){ return !this.state.data.length ? "Loading" : ( <ComposedChart width={600} height={300} data={data} margin={{top: 20, right: 20, bottom: 0, left: 20}}> <CartesianGrid stroke='#fafafa'/> <XAxis dataKey="month"/> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey='sellin' barSize={20} fill='#ec1b25' label={{ position: 'top', fill: '#ec1b25', fontSize: '10px' }}/> <Bar dataKey='sellout' barSize={20} fill='#fbce06' label={{ position: 'top', fill: '#fbce06', fontSize: '10px' }}/> <Line type='monotone' dataKey='target' stroke='#ff7300' /> </ComposedChart> ) }

[joshuagish]

I’m having the same issue but for <rect> width on the bar chart.

When the browser is resized, recharts updates the width of the bars to fill space. The issue is once it shrinks past a certain width, recharts starts inputting negative values.

[toooldmohammad]

try to put your chart inside a ResponsiveContainer and don’t forgot to set its width and height like:

import {
    ResponsiveContainer,
} from 'recharts';

<ResponsiveContainer width="100%" height={400}>
    <PieChart>
        <Pie
            data={pieChart}
            innerRadius={60}
            fill="#8884d8"
            paddingAngle={5}
            dataKey="value">
        {pieChart.map((entry, index) => <Cell key={`cell-${index}`} fill={entry.color} />)}
        </Pie>
        <Legend />
        <Tooltip />
    </PieChart>
</ResponsiveContainer>

I had this issue and fixed with ResponsiveContainer