CODEWITHSUNDEEP
javascriptreactjsrecharts
Pablo Estrada
Pablo Estrada

Reputation: 3472

ReChart does not render multiple Bars

I have a BarChart from rechart:

http://recharts.org/#/en-US/api/BarChart

The problem I have is that the second bar of my chart does not render unless it is equal to the value of the first bar.

If you see the valuePost key of the data array, it wont show unless you set the value to 3.

const {BarChart,ResponsiveContainer,Text, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const rows = [
{"name":"Me comparo con las demás personas.","valuePre":0,"valuePost":0},
{"name":"Todas las anteriores.","valuePre":0,"valuePost":0},
{"name":"Me critíco a mi mismo","valuePre":0,"valuePost":0},
{"name":"Me felicito a mí mismo (a) por mis logros.","valuePre":3,"valuePost":2}]

const SimpleBarChart = React.createClass({
    render () {
    return (
      <div className="question">
        <div className="question-container">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart 
              layout="vertical" data={rows}
              margin={{top: 5, right: 30, left: 20, bottom: 5}}
            >

              <YAxis axisLine={false} tickLine={false}  dataKey="name" type="category">
              </YAxis>
              <Bar 
                dataKey="valuePre" 
                fill="#00a0dc" 
                label={<Text scaleToFit={true} verticalAnchor="middle" />}
              />

              <Bar 
                dataKey="valuePost" 
                fill="#c7c7c7"  
                label={<Text verticalAnchor="middle" />}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    );
  }
})

ReactDOM.render(
  <SimpleBarChart />,
  document.getElementById('container')
);

Here's the fiddle:

http://jsfiddle.net/oqg00j2j/

Upvotes: 1

Views: 4539

Answers (1)

Nandu Kalidindi
Nandu Kalidindi

Reputation: 6280

Your Axes need to be specified what data they are going to render

GITHUB: https://github.com/recharts/recharts/issues/90

All you need to do is change the Axis tags. Check out the JSFiddle.

<YAxis 
  type="category" 
  axisLine={false} 
  tickLine={false} 
  dataKey="name" type="category" 
/>
<XAxis type="number" />

RECHARTS DEMO

Upvotes: 1

Related Questions