DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Charts - Multiple Axes

You can display the Chart component with multiple axes for better data visualization. This demo illustrates a chart with two separate axes that display percentage and absolute values.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
www.wikipedia.org
Backend API

To configure a multi-axis chart, follow the steps below:

  1. Create and name value axes. Declare multiple objects in the valueAxis array. Each object configures a value axis. Every value axis should have a unique name.

  2. Bind series to value axes.
    Assign the name of an axis to the series.axis property. If leave the series.axis property unspecified, the series is bound to the axis declared first in the valueAxis array.

In this demo, the first axis is declared without a name and is bound to the first series. The name of the second axis is total and it is bound to the spline series. The position of the second axis is right.