Angular Chart - annotations.border

Configures the appearance of the annotation's border.

Selector: dxo-border
Type:

Object

color

Colors the annotation's border.

Type:

String

Default Value: '#dddddd'

This property supports the following colors:

cornerRadius

Makes the annotation's corners rounded.

Type:

Number

Default Value: 0, 4 (Fluent, Material)

The following table demonstrates how the corner's curvature depends on the cornerRadius value:

cornerRadius Result
cornerRadius: 0 DevExtreme Chart: annotation with cornerRadius set to 0
cornerRadius: 15 DevExtreme Chart: annotation with cornerRadius set to 15
cornerRadius: 35 DevExtreme Chart: annotation with cornerRadius set to 35

dashStyle

Specifies the dash style of the annotation's border.

Type:

DashStyle

Default Value: 'solid'

The following dash styles are available:

  • solid
    The border is a solid, continuous line.

  • longDash
    The border is displayed using long dashes.

  • dash
    The border is displayed using dashes.

  • dot
    The border is displayed using dots.

  • Any combination of 'longDash', 'dash' and 'dot'
    The border is displayed by repeating the specified combination. For instance, 'dashdotdash'.

opacity

Specifies the opacity of the annotation's border.

Type:

Number

Default Value: undefined

This property accepts a value from 0 to 1: 0 makes the border transparent; 1 makes it opaque.

visible

Specifies the visibility of the annotation's border.

Type:

Boolean

Default Value: true

width

Specifies the width of the annotation's border in pixels.

Type:

Number

Default Value: 1