Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Charting - Legend Enhancements #7142

Open
pavelgruba opened this issue Mar 4, 2019 · 0 comments

Comments

Projects
None yet
1 participant
@pavelgruba
Copy link
Contributor

commented Mar 4, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.