Recharts ComposedChart start X-axis ticks from zero

user_12000088 0
Viewed 1361

I am using a ComposedChart and shoing bars and the line. Usually the line should start from 0 of x-axis. But when using the Composed Chart Not able to do that

enter image description here

If you observe in the above picture tick a should be starting at x axis (the 0 point where x and y axis started) But it's not

This is the code I am using

 <ResponsiveContainer width="100%" height="100%">
          <ComposedChart
            width={500}
            height={400}
            data={[{ count: 0, label: 'a' }, { count: 2, label: 'b' }, { count: 3, label: 'c' }]}
          >
            <CartesianGrid horizontal={false} strokeDasharray="4 4" />
            <XAxis ticks={['a', 'b', 'c']} domain={['dataMin', 'dataMax']} dataKey="label" />
            <YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} />
            <Tooltip />
            <Bar dataKey="count" barSize={20} fill="#AAE5F9" />
            <Line dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
            {/* <LabelList dataKey="name" position="insideTop" /> */}
          </ComposedChart>
        </ResponsiveContainer>

Is there anyway that I can draw the line from begining of X-axis (I mean from 0 Point of x-axis) ?

Any help would be thankfull

recharts reactjs
1 Answers

According to this github issue, You need to add scale="point" in your XAxis

<XAxis
  ticks={['a', 'b', 'c']}
  domain={['dataMin', 'dataMax']}
  dataKey="label"
  scale="point"
/>
user_86655890
Related