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