BulletChartLegendSettings

23 Sep 20252 minutes to read

Configures the legends in charts.

Properties

alignment Alignment

Legend in chart can be aligned as follows:

  • Near: Aligns the legend to the left of the bullet chart.
  • Center: Aligns the legend to the center of the bullet chart.
  • Far: Aligns the legend to the right of the bullet chart.

Defaults to ‘Center’

background string

The background color of the bullet chart legend that accepts value in hex and rgba as a valid CSS color string.

Defaults to ‘transparent’

border BorderModel

Options to customize the border of the bullet chart legend.

location LocationModel

Specifies the location of the legend, relative to the bullet chart.
If x is 20, legend moves by 20 pixels to the right of the bullet chart. It requires the position to be Custom.

<div id='BulletChart'></div>
let chart: BulletChart = new BulletChart({
...
  legendSettings: {
    visible: true,
  },
...
});
chart.appendTo('#BulletChart');

margin MarginModel

Options to customize left, right, top and bottom margins of the bullet chart.

opacity number

Opacity of the bullet chart legend.

Defaults to 1

padding number

Option to customize the padding between legend items.

Defaults to 8

position LegendPosition

Position of the legend in the bullet chart are,

  • Auto: Places the legend based on area type.
  • Top: Displays the legend at the top of the bullet chart.
  • Left: Displays the legend at the left of the bullet chart.
  • Bottom: Displays the legend at the bottom of the bullet chart.
  • Right: Displays the legend at the right of the bullet chart.
  • Custom: Displays the legend based on the given x and y values.

Defaults to ‘Auto’

shapeHeight number

Shape height of the bullet chart legend in pixels.

Defaults to 10

shapePadding number

Padding between the bullet chart legend shape and text.

Defaults to 5

shapeWidth number

Shape width of the bullet chart legend in pixels.

Defaults to 10

tabIndex number

TabIndex value for the bullet chart legend.

Defaults to 3

textStyle BulletLabelStyleModel

Options to customize the bullet chart legend text.

visible boolean

If set to true, legend will be visible.

Defaults to false