JavaScript/jQuery 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.
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.
- 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.
- 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.