Recharts - Horizontally Align Line and Bar Charts

user_648560 0
Viewed 9704

I am using Recharts and have a component that displays a line chart followed by a bar chart. The two charts are displaying the same seven day span, but the ticks are not aligned. The line chart starts on the Y Axis line, while the bar chart has left padding (by default).

On the line chart I tried adding padding={{left: 100 }}, which got the starting of the X axes aligned, but the rest of the ticks were off, and more importantly it isn't responsive to the screen size. As far as I can tell using something like '5%' is not allowed.

On the bar chart I tried setting the padding to zero and a negative number, but ran into the same issues with responsive scaling and tick misalignment.

Is there a way to align the ticks and data on the two graphs?

Here is the code:

<ResponsiveContainer width="95%" height={300} >
  <LineChart width={350} height={300} data={this.props.data.activityResponse.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Line type="monotone" dataKey="node.participation" stroke={this.participationColor} name="Participation" strokeWidth={this.strokeWidth} />
    <Line type="monotone" dataKey="node.focus" stroke={this.focusColor} name="Focus" strokeWidth={this.strokeWidth} />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.participation" >
      <Label value="%" position="insideLeft" />
    </YAxis>
    <Tooltip content={this.renderResponseTooltip} />
  </LineChart>
</ResponsiveContainer>
<ResponsiveContainer width="95%" height={300} >
  <BarChart width={350} height={300} data={this.props.data.activityStep.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Bar dataKey="node.stepCount" fill={this.stepColor} name="Steps" />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.stepCount" >
    </YAxis>
    <Tooltip content={this.renderStepTooltip} />
  </BarChart>
</ResponsiveContainer>

Recharts Line and Bar chart alignment

recharts reactjs charts css javascript
2 Answers

I'm not sure if you are still interested in this, since the question is pretty old, but I have found a solution that worked for me.

You can use ComposedChart to solve this. Taking your code, the solution should look something like this: 

<ResponsiveContainer width="95%" height={300} >
  <ComposedChart data={this.props.data.activityResponse.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Line type="monotone" dataKey="node.participation" stroke={this.participationColor} name="Participation" strokeWidth={this.strokeWidth} />
    <Line type="monotone" dataKey="node.focus" stroke={this.focusColor} name="Focus" strokeWidth={this.strokeWidth} />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.participation" >
      <Label value="%" position="insideLeft" />
    </YAxis>
    <Tooltip content={this.renderResponseTooltip} />
  </ComposedChart>
</ResponsiveContainer>
<ResponsiveContainer width="95%" height={300} >
  <ComposedChart data={this.props.data.activityStep.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Bar dataKey="node.stepCount" fill={this.stepColor} name="Steps" />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.stepCount" >
    </YAxis>
    <Tooltip content={this.renderStepTooltip} />
  </ComposedChart>
</ResponsiveContainer>

I also removed your width / height arguments on the charts since the ResponsiveContainer will take care of that already.

In my personal case, this solves the issue, when I try to horizontally align an Area and a Bar Chart.

enter image description here

Providing a syncid for both charts, by adding that attribute to both ComposedCharts, the Tooltip will also follow in both charts simultaneously.

enter image description here

user_44365140
Related