Vue Chart - legend.title.subtitle.font

Specifies the legend subtitle's font properties.

Selector: DxFont
Type:

Object

The following code sample illustrates how to set this property:

App.vue
  • <template>
  • <DxChart ... >
  • <DxLegend>
  • <DxTitle ... >
  • <DxSubtitle ... >
  • <DxFont
  • color="black"
  • />
  • </DxSubtitle>
  • </DxTitle>
  • </DxLegend>
  • </DxChart>
  • </template>
  •  
  • <script>
  • import DxChart, {
  • DxLegend,
  • DxTitle,
  • DxSubtitle,
  • DxFont
  • } from 'devextreme-vue/chart';
  •  
  • export default {
  • components: {
  • DxChart,
  • DxLegend,
  • DxTitle,
  • DxSubtitle,
  • DxFont
  • },
  • // ...
  • }
  • </script>

color

Specifies font color.

Type:

String

Default Value: '#232323'

This property supports the following colors:

family

Specifies font family.

Type:

String

Default Value: '"Segoe UI Light", "Helvetica Neue Light", "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif'

For details on acceptable values, refer to the Font family article.

opacity

Specifies font opacity.

Type:

Number

Default Value: 1

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

size

Specifies font size.

Type:

String

|

Number

Default Value: 14

A numeric value specifies the font size in pixels. A string value can specify the font size in any units listed here, but multi-line text only supports length units.

weight

Specifies font weight. Accepts values from 100 to 900 in increments of 100. Higher values increase boldness.

Type:

Number

Default Value: 200