title: Recharts - Horizontally Align Line and Bar Charts
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Is there a way to align the ticks and data on the two graphs?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;ResponsiveContainer width="95%" height={300} &gt;
    &lt;LineChart width={350} height={300} data={this.props.data.activityResponse.edges} connectNulls={true} &gt;
      &lt;Legend verticalAlign="top" height={36}/&gt;
      &lt;Line type="monotone" dataKey="node.participation" stroke={this.participationColor} name="Participation" strokeWidth={this.strokeWidth} /&gt;
      &lt;Line type="monotone" dataKey="node.focus" stroke={this.focusColor} name="Focus" strokeWidth={this.strokeWidth} /&gt;
      &lt;XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} /&gt;
      &lt;YAxis dataKey="node.participation" &gt;
        &lt;Label value="%" position="insideLeft" /&gt;
      &lt;/YAxis&gt;
      &lt;Tooltip content={this.renderResponseTooltip} /&gt;
    &lt;/LineChart&gt;
  &lt;/ResponsiveContainer&gt;
  &lt;ResponsiveContainer width="95%" height={300} &gt;
    &lt;BarChart width={350} height={300} data={this.props.data.activityStep.edges} connectNulls={true} &gt;
      &lt;Legend verticalAlign="top" height={36}/&gt;
      &lt;Bar dataKey="node.stepCount" fill={this.stepColor} name="Steps" /&gt;
      &lt;XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} /&gt;
      &lt;YAxis dataKey="node.stepCount" &gt;
      &lt;/YAxis&gt;
      &lt;Tooltip content={this.renderStepTooltip} /&gt;
    &lt;/BarChart&gt;
  &lt;/ResponsiveContainer&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/odXRW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/odXRW.png" alt="Recharts Line and Bar chart alignment"></a></p>