React Chart - Scale Breaks

A scale break allows breaking off a part of the axis to improve the readability of a chart with high amplitude values. Scale breaks are available for continuous or logarithmic type axes only.

DevExtreme HTML5 JavaScript Charts Scale Breaks

Use an axis' breaks array to declare a scale break collection. Each object in this array must have the startValue and endValue fields that limit a single scale break. Note that a scale break is visible only if the range between the start and end values exceeds the tick interval.

App.js
  • import React from 'react';
  • import Chart, {
  • ValueAxis,
  • Break
  • } from 'devextreme-react/chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Chart ... >
  • <ValueAxis> {/* or ArgumentAxis */}
  • <Break
  • startValue={100}
  • endValue={500}
  • />
  • <Break
  • startValue={1000}
  • endValue={2000}
  • />
  • </ValueAxis>
  • </Chart>
  • );
  • }
  • }
  •  
  • export default App;

The value axis supports auto-calculated scale breaks, which can be enabled by setting the autoBreaksEnabled property to true. You can specify the maxAutoBreakCount property to limit the number of a scale breaks the UI component can generate.

App.js
  • import React from 'react';
  • import Chart, {
  • ValueAxis
  • } from 'devextreme-react/chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Chart ... >
  • <ValueAxis
  • autoBreaksEnabled={true}
  • maxAutoBreakCount={2}
  • /> {/* or ArgumentAxis */}
  • </Chart>
  • );
  • }
  • }
  •  
  • export default App;
See Also