Line
Dual Axis Chart
Two Y-axes for comparing metrics with different scales. Great for revenue vs conversion rate.
Loading chart…
#dual-axis#two-axis#comparison#scale
Customization Guides & Code Snippets
◆Responsive Sizing with ResponsiveContainer
Always wrap your Line chart inside <ResponsiveContainer width="100%" height={320}> to ensure it scales cleanly across mobile and desktop displays.
◆Custom Dark Theme Tooltip
Style the hover tooltip to match your dark UI with contentStyle={{ background: '#13161a', border: '1px solid #2a3038', borderRadius: 8 }}.
When to use a Dual Axis Chart
A Dual Axis Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:
- ✓Showing trends over time (e.g. daily active users over 30 days)
- ✓Comparing multiple metrics on the same timeline
- ✓Displaying continuous data like temperature, stock prices, or heart rate
- ✓Highlighting growth rates and momentum
Tips for Recharts Dual Axis Chart
TIP 1Use type='monotone' for smooth curves instead of sharp angles
TIP 2Set dot={{ r: 4 }} to show data points without cluttering the chart
TIP 3Add a gradient fill under the line to create an area effect
TIP 4Use isAnimationActive={false} for real-time updating charts
TIP 5Multiple lines work best with 5 or fewer series — beyond that, use a table
Key Recharts Props