Charting - Legend Enhancements

[pavelgruba]

The Problem

The current Legend implementation does not allow you to reorder legend items, hide items based on custom criteria, or add a title to the legend.

The Proposed Solution

Customize Legend Items

We added the legend.customizeItems callback that allows you to change the order, text, and visibility of legend items. It accepts an array of legend items as a parameter. Modify the array and return it from the callback.

The following example shows how to draw legend items in reverse order:

let vectorMapOptions = {
    legends: [{
        customizeItems(items) {
            return items.reverse();
        }
    }]
};

In the following example, we hide legend items for the series that do not have data points:

let chartOptions = {
    legend: {
        customizeItems(items) {
            items.forEach(item => {
                item.visible = item.series.getAllPoints().length > 0;
            });
            return items;
        }
    }
};

Legend Title

To set a title for your legend, you can now use the legend.title option. It provides you with the same capabilities as the widget's title option: you can customize the title's appearance and position and add a subtitle.

The following code demonstrates how to add titles to legends in the VectorMap widget. The title option can be specified with a string value or an object (when you configure the title in greater detail):

let vectorMapOptions = {
    legends: [{
        title: "World population percentages"
    }, {
        title: {
            text: "Cities population",
            font: {
                size: 18
            },
            margin: {
                bottom: 14
            }
        }
    }]
};

Try It

Live Sandbox

jQuery

Angular

Installation

Follow the installation guide from the release page and leave us feedback on this topic.

We Need Your Feedback

Take a Quick Poll

Do you find the new Legend enhancements useful?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

[pavelgruba]

These features are now available in the v19.1 release. If you have questions or find any bugs, feel free to create new GitHub issues or tickets in our Support Center.