Angular Chart - argumentAxis.breakStyle

Configures scale break appearance.

Selector: dxo-break-style
Type:

Object

The following code snippet configures commonAxisSettings.breakStyle to customize items in valueAxis.breaks[] and argumentAxis.breaks[].

jQuery
index.js
 $(() => { $("#chartContainer").dxChart({ commonAxisSettings: { breakStyle: { color: "red", line: "straight", width: 15, }, }, argumentAxis: { breaks: [{ startValue: 1998, endValue: 2003 }], }, valueAxis: { breaks: [{ startValue: 250, endValue: 350 }], }, }) })
Angular
app.component.html
 <dx-chart> <dxo-common-axis-settings> <dxo-break-style color="red" line="straight" [width]="15" ></dxo-break-style> </dxo-common-axis-settings> <dxo-argument-axis> <dxi-break startValue="1998" endValue="2003"></dxi-break> </dxo-argument-axis> <dxo-value-axis> <dxi-break startValue="250" endValue="350"></dxi-break> <dxo-value-axis> </dx-chart>
Vue
App.vue
 <template> <DxChart> <DxCommonAxisSettings> <DxBreakStyle color="red" line="straight" :width="15" /> </DxCommonAxisSettings> <DxArgumentAxis> <DxBreak startValue="1998" endValue="2003" /> </DxArgumentAxis> <DxValueAxis> <DxBreak startValue="250" endValue="350" /> </DxValueAxis> </DxChart> </template>
React
App.tsx
 function App() { return ( <Chart> <CommonAxisSettings> <BreakStyle color="red" line="straight" width={15} /> </CommonAxisSettings> <ArgumentAxis> <Break startValue="1998" endValue="2003" /> </ArgumentAxis> <ValueAxis> <Break startValue="250" endValue="350" /> </ValueAxis> </Chart> ) }

color

Specifies the scale breaks' color.

Type:

String

Default Value: '#ababab'

This property supports the following colors:

line

Specifies the scale breaks' line style.

Type:

ScaleBreakLineStyle

Default Value: 'waved'

width

Specifies the scale breaks' width in pixels.

Type:

Number

Default Value: 5