Example of Multi Axis Combination in React Chart

All Controls
/
Chart
/
Multi Axis Combination

This example visualizes monthly global climate signals during 2025 using temperature anomaly, atmospheric CO₂, and Arctic sea ice extent data. Multiple axes are used to compare measurements with different units and value ranges in a single chart.

More Details...

Loading....
Description

The chart demonstrates how unrelated datasets with very different value ranges can be plotted together for a unified view of climate signals.

In this example, you can see how to render and configure multiple axes in a single chart. The combination chart includes the following features:

  • An area series for Arctic sea ice extent on the outer-right Y axis.
  • A line series for temperature anomalies on the primary Y axis.
  • A spline series for atmospheric CO₂ on the inner-right Y axis.
  • Distinct color-coded axes, labels, and legends for each measurement.
  • Annotations that highlight the temperature anomaly peak, seasonal CO₂ peak, and annual sea ice minimum.

Tooltip and Crosshair are enabled in this example. Hover over a point or tap on one on touch-enabled devices to see the shared tooltip, and move the cursor along the chart to track values across the three axes.

Injecting Module

Chart component features are segregated into individual feature-wise modules. To use line, spline, area, annotation, tooltip, legend, crosshair, highlight, and date-time category axis features, inject the required modules into services.

More information on multiple axes can be found in this documentation section .