HomeLineDual Axis Chart
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
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
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for line values
strokestringLine color
strokeWidthnumberLine thickness in pixels (default: 1)
typestring'monotone' | 'linear' | 'step' — controls curve style
dotobject | booleanShow/hide data point dots, or pass style object
Related Charts