Angular Chart - commonSeriesSettings.hoverStyle.hatching

Configures hatching that applies when a user points to the series.

Type:

Object

This member is exposed by the following entities:

Hatching is filling an area or a bar (depending on the series type) with parallel diagonal lines. In the Chart UI component, it applies when a user points to a series.

direction

Specifies the direction of hatching lines.

Type:

String

Default Value: 'right'
Accepted Values: 'left' | 'none' | 'right'

The following values are available:

  • none
    Does not apply hatching.
  • right
    Draws diagonal hatching lines upwards from left to right.
  • left
    Draws diagonal hatching lines downwards from left to right.

Use the HatchingDirection enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Right, Left, and None.

opacity

Specifies how transparent hatching lines should be.

Type:

Number

Default Value: 0.75

This property accepts a value from 0 to 1, where 0 makes hatching lines completely transparent, and 1 makes them opaque.

step

Specifies the distance between two side-by-side hatching lines in pixels.

Type:

Number

Default Value: 6

width

Specifies the width of hatching lines in pixels.

Type:

Number

Default Value: 2