Vue Chart - legend.border

Configures the legend's border.

Type:

Object

color

Colors the legend's border.

Type:

String

Default Value: '#d3d3d3'

This option supports the following colors:

NOTE
Make the legend's border visible by setting the legend.border.visible option to true.

cornerRadius

Makes all the legend's corners rounded.

Type:

Number

Default Value: 0

This option accepts a positive number that defines a quarter ellipse's horizontal and vertical radii which determine the corner's curvature.

dashStyle

Sets a dash style for the legend'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 transparency of the legend's border.

Type:

Number

Default Value: undefined

This option accepts a value from 0 to 1, where 0 makes the border completely transparent, and 1 makes it opaque.

visible

Shows the legend's border.

Type:

Boolean

Default Value: false

width

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

Type:

Number

Default Value: 1