Dynamically changing legend position

Type tutorial

This short tutorial will show the steps involved in dynamically changing position of the legend. Changing position The following steps are involved when changing the position of the legend, e.g. from bottom to left: For example, the below code will move the legend from bottom, to left: Demo

Grouping legend items

Type tutorial

This short tutorial will introduce two approaches that can be used to group legend items by inserting a label between its items. Approach #1 The easiest approach is to create a legend like we would do on any chart, set its data, then insert Label elements at predefined places in legend’s children list. The downside […]

Pie chart with a legend with dynamically-sized labels

Type tutorial

This demo shows how we can use events to dynamically set width for the Pie chart’s legend labels, so that the legend takes up all available space, left from the pie itself, as well as truncates the labels if there’s no space available.

A custom “heat legend” using a gradient

Type tutorial

This demo adds a Container element with a gradient-filled rectangle and some labels to create a custom “heat legend” using multi-color steps. The code Related docs The demo

Individual legend item for each column in series

Type demo

This demo shows how we can create a legend to display individual items for each column in a column series, as well as trigger hovers. Relevant code As per legend data item docs, we are using series’ dataItems list to feed the legend data, which produces an item for each column. Additionally, we are adding […]

Grouping several series into single legend item

Type demo

This demo shows how we can selectively add series to legend, then toggle multiple series with a single legend item. The code uses series’ on() method to watch for changes in its visible setting, which is triggered when series is toggled via legend. It then hides or shows related series. It also uses series’ legendLabelText […]

Adding check marks to legend markers

Type tutorial

This tutorial will walk through the steps needed to turn legend markers into checkboxes. Adding a check mark Each marker in the legend is created from a template, which is accessible via legend’s markers.template. Besides enabling us to set any setting that would be applied to any new marker created by the legend, a template […]

Show only one series at a time

Type demo

This demo shows how we can use series settings events to ensure only one series is shown on an XY chart at a time, by toggling off other series automatically.