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.

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.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>

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.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>
See Also