Native Components
    Wrapper Components
      Introduction
    • Barcodes
    • Buttons
    • Charts
    • Chat
    • DataSource
    • Date Inputs
    • Diagram
    • Dialog
    • Dropdowns
    • DropDownTree
    • Editor
    • Gantt
    • Gauges
    • Grid (wrapper)
    • Inputs
    • Layout
    • List Views
    • ListBox
    • Map
    • MediaPlayer
    • PivotGrid
    • Popups
    • Scheduler
    • ScrollView
    • Spreadsheet
    • TreeList
    • TreeMap
    • TreeView
    • Upload
    • Validator
    • Window
    • Framework & Features
    • Globalization
    • Accessibility
    • Troubleshooting
    Styling & Themes
    Common Features
    Changelog

LegendProps

legend-align String

The horizontal alignment of the legend when legend.position is top or bottom and the vertical alignment of the legend when legend.position is left or right.

The supported values are:

  • startThe legend is aligned to the start.
  • centerThe legend is aligned to the center.
  • endThe legend is aligned to the end.

legend-background String

The background color of the legend. Accepts any valid CSS color string, including hex and rgb.

legend-border-color String

The color of the border. Accepts any valid CSS color string, including hex and rgb.

legend-border-dash-type String

The dash type of the border.

The supported dash types are:

  • dashA line that consists of dashes.
  • dashDotA line that consists of a repeating dash-dot pattern.
  • dotA line that consists of dots.
  • longDashA line that consists of a repeating long-dash pattern.
  • longDashDotA line that consists of a repeating long-dash-dot pattern.
  • longDashDotDotA line that consists of a repeating long-dash-dot-dot.
  • solidA solid line.

legend-border-width Number

The width (in pixels) of the border. By default, the border width is set to zero which means that the border will not appear.

legend-height Number

The legend height when legend.orientation is set to vertical.

legend-inactive-items-labels-color String

The text color of the labels. Accepts any valid CSS color string, including hex and rgb.

legend-inactive-items-labels-font String

The font style of the labels.

legend-inactive-items-labels-template String | Function

The template which renders the labels.

The template supports the following fields:

  • textThe text of the legend item.
  • seriesThe data series.
  • valueThe point value. Available for the Donut and Pie Charts.
  • percentageThe point value represented as a percentage value. Available only for the Donut, Pie, and 100% Stacked charts.

legend-item-cursor String

The cursor style of the legend item.

legend-item-visual Function

A function for creating a custom visual for the legend items.

The available argument fields are:

  • optionsThe item options.
  • createVisualA function for getting the default visual.
  • seriesThe item series.
  • pointIndexThe index of the point in the series. Available for the Pie, Donut, and Funnel series.

legend-labels-color String

The text color of the labels. Accepts any valid CSS color string, including hex and rgb.

legend-labels-font String

The font style of the labels.

legend-labels-margin Number

The margin of the labels. A numeric value will set all margins.

legend-labels-margin-bottom Number

The bottom margin of the labels.

legend-labels-margin-left Number

The left margin of the labels.

legend-labels-margin-right Number

The right margin of the labels.

legend-labels-margin-top Number

The top margin of the labels.

legend-labels-padding Number

The padding of the labels. A numeric value will set all paddings.

legend-labels-padding-bottom Number

The bottom padding of the labels.

legend-labels-padding-left Number

The left padding of the labels.

legend-labels-padding-right Number

The right padding of the labels.

legend-labels-padding-top Number

The top padding of the labels.

legend-labels-template String | Function

The template which renders the labels.

The template supports the following fields:

  • textThe text of the legend item.
  • seriesThe data series.
  • valueThe point value. Available for the Donut and Pie Charts.
  • percentageThe point value represented as a percentage value. Available only for the Donut, Pie, and 100% Stacked charts.

legend-margin Number

The margin of the Chart legend. A numeric value will set all paddings.

legend-margin-bottom Number

The bottom margin of the Chart legend.

legend-margin-left Number

The left margin of the Chart legend.

legend-margin-right Number

The right margin of the Chart legend.

legend-margin-top Number

The top margin of the Chart legend.

legend-offset-x Number

The X offset of the Chart legend. The offset is relative to the default position of the legend. For example, a value of 20 will move the legend 20 pixels to the right of its initial position. A negative value will move the legend to the left of its current position.

legend-offset-y Number

The Y offset of the chart legend. The offset is relative to the current position of the legend. For example, a value of 20 will move the legend 20 pixels down from its initial position. A negative value will move the legend upwards from its current position.

legend-orientation String

The orientation of the legend items.

The supported values are:

  • verticalThe legend items are added vertically.
  • horizontalThe legend items are added horizontally.

legend-padding Number

The padding of the Chart legend. A numeric value will set all paddings.

legend-padding-bottom Number

The bottom padding of the Chart legend.

legend-padding-left Number

The left padding of the Chart legend.

legend-padding-right Number

The right padding of the Chart legend.

legend-padding-top Number

The top padding of the Chart legend.

legend-position String

The positions of the Chart legend.

The supported values are:

  • topThe legend is positioned on the top.
  • bottomThe legend is positioned on the bottom.
  • leftThe legend is positioned on the left.
  • rightThe legend is positioned on the right.
  • customThe legend is positioned based on legend.offsetX and legend.offsetY.

legend-reverse Boolean

If legend-reverse is set to true, the legend items will be reversed. Available in versions 2013.3.1306 and later.

legend-spacing Number

The spacing between the labels in pixels when legend.orientation is horizontal.

legend-visible Boolean

If legend-visible is set to true, the Chart will display the legend. By default, the chart legend is visible.

legend-width Number

The legend width when legend.orientation is set to horizontal.