All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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