Vue Chart - legend.border

Specifies legend border options.

Type:

Object

Use this object to make a legend's border visible/invisible and set up such border options as color, width etc.

color

Specifies border color.

Type:

String

Default Value: '#d3d3d3'

This option supports the following colors:

To make the border visible, set the visible property to true.

cornerRadius

Specifies a radius of a border's corners in degrees.

Type:

Number

Default Value: 0

Use this property to round a legend's border.

dashStyle

Specifies the border's dash style in the legend.

Type:

String

Default Value: 'solid'
Accepted Values: 'dash' | 'dot' | 'longDash' | 'solid'

The following values are available:

  • solid
    Displays a solid, continuous line.
  • longDash
    Displays a border using long dashes.
  • dash
    Displays a border using dashes.
  • dot
    Displays a border using dots.
  • Any combination of 'longDash', 'dash' and 'dot'
    Displays a border 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 Control. This enum accepts the following values: Solid, LongDash, Dash, and Dot.

opacity

Specifies a border's opacity.

Type:

Number

Default Value: undefined

visible

Sets a legend's border visibility state.

Type:

Boolean

Default Value: false

width

Specifies a border's width, in pixels.

Type:

Number

Default Value: 1