JavaScript/jQuery Chart - commonAnnotationSettings.border

Configures the appearance of the annotation's border.

Type:

Object

color

Colors the annotation's border.

Type:

String

Default Value: '#dddddd'

This option supports the following colors:

cornerRadius

Makes the annotation's corners rounded.

Type:

Number

Default Value: 0, 4 (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:

String

Default Value: 'solid'
Accepted Values: 'dash' | 'dot' | 'longDash' | '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'.

Use the DashStyle enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Solid, LongDash, Dash, and Dot.

opacity

Specifies the opacity of the annotation's border.

Type:

Number

Default Value: undefined

This option 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