Getting Started
    Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Knowledge Base
    Sample Applications
    FAQ
    Troubleshooting
Components / Charts / API / LegendComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

LegendComponent

The configuration options of the Chart legend (see example).

Selector

kendo-chart-legend

Inputs

NameTypeDefaultDescription

align

"center" | "start" | "end"

The legend is horizontally aligned when legend.position is set to "top" or "bottom". The legend is vertically aligned when legend.position is set to "left" or "right".

The supported values are:

  • "start"—The legend is aligned to the start.
  • "center"—The legend is aligned to the center.
  • "end"—The legend is aligned to the end.

background

string

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

border

Border

The border of the legend.

height

number

The height of the legend when legend.orientation is set to "vertical".

inactiveItems

LegendInactiveItems

The configuration of the Chart inactive legend items.

item

LegendItem

The configuration of the Chart legend item.

labels

LegendLabels

The label configuration of the Chart legend.

margin

number | Margin

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

markers

LegendMarkers

The configuration of the Chart legend markers.

offsetX

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 moves the legend 20 pixels to the right of its initial position. Negative values move the legend to the left of its current position.

offsetY

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 moves the legend 20 pixels down from its initial position. Negative values move the legend upwards from its current position.

orientation

"vertical" | "horizontal"

The orientation of the legend items.

The supported values are:

  • "vertical"—The legend items are added vertically.
  • "horizontal"—The legend items are added horizontally.

padding

number | Padding

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

position

"top" | "bottom" | "left" | "right" | "custom"

The positions of the Chart legend.

The supported values are:

  • "top"—The legend is positioned on the top.
  • "bottom"—The legend is positioned on the bottom.
  • "left"—The legend is positioned on the left.
  • "right"—The legend is positioned on the right.
  • "custom"—The legend is positioned by using legend.offsetX and legend.offsetY.

reverse

boolean

If set to true, the legend items are reversed.

spacing

number

The distance (in pixels) between the legend items. Defaults to 6.

title

LegendTitle

The title of the Chart legend. By default, the Chart will not render a legend title.

visible

boolean

If set to true, the Chart displays the legend. By default, the Chart legend is visible.

width

number

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

Methods

notifyChanges

Updates the component fields with the specified values and refreshes the Chart.

Use this method when the configuration values cannot be set through the template.

item.notifyChanges({ visible: true });
Parameters

changes

any

An object containing the updated input fields.

In this article

Not finding the help you need?

Contact Support