Angular Chart - valueAxis.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