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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        valueAxis: { // or argumentAxis
            breaks: [
                { startValue: 100, endValue: 500 },
                { startValue: 1000, endValue: 2000 }
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-value-axis> <!-- or <dxo-argument-axis> -->
        <dxi-break [startValue]="100" [endValue]="500"></dxi-break>
        <dxi-break [startValue]="1000" [endValue]="2000"></dxi-break>
    </dxi-value-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxValueAxis> <!-- or DxArgumentAxis -->
            <DxBreak
                :start-value="100"
                :end-value="500"
            />
            <DxBreak
                :start-value="1000"
                :end-value="2000"
            />
        </DxValueAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxValueAxis,
    DxBreak
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxValueAxis,
        DxBreak
    }
}
</script>
React
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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        valueAxis: {
            autoBreaksEnabled: true,
            maxAutoBreakCount: 2
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-value-axis
        [autoBreaksEnabled]="true"
        [maxAutoBreakCount]="2">
    </dxi-value-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxValueAxis
            :auto-breaks-enabled="true"
            :max-auto-break-count="2"
        /> <!-- or DxArgumentAxis -->
    </DxChart>
</template>

<script>
import DxChart, {
    DxValueAxis
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxValueAxis
    }
}
</script>
React
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