Custom-ordered legend items

Type demo

This demo shows how we can use events to dynamically re-arrange Legend items per our completely custom criteria.

Activate/deactivate a pie slice on legend click instead of toggling

Type tutorial

Normally, when you click an item in PieChart’s legend, relative slice is hidden or revealed. This quick tutorial will show you how to make the slice activate/deactivate (pull out/in) instead. Setting up To make this work we’ll have to do two things: Disable regular toggling of the items. Add custom event that toggles isActive state […]

Multi-color XY heatmap

Type tutorial

Normally, heatmaps that use “heat rules” are restricted to two colors as well as gradient in-between. In tutorial we’ll see how we can use adapters to apply any number of colors to heat map based on source value. The task During the course of this tutorial we’ll transform the chart to color columns in series […]

Map heat legend with real start/end value labels

Type tutorial

A Heat legend uses regular axis to display value range/scale. For narrower setups it might mean that there are not real start/end labels. This tutorial will show how to remedy that. Problem HeatLegend uses real ValueAxis to display value labels. Value axis come with its certain logic how labels are spaced, positioned, and rounded to […]

Using percent values in series

Type tutorial

In our everyday charting we mainly use absolute values. However, sometimes we might need to show how specific value relates to other elements. In this case relative percent value is much more representative than absolute one. This tutorial will explain ways we can use such relative values. Intro Let’s start with a fairly simple stacked […]

Non-standard legend alignment

Type tutorial

You can use position to place chart Legend on top, bottom, left, or right. In all those cases, Legend will center across the edge it is placed on. This tutorial will show some other alignment options. Left and right positions When legend position is set to either “left” or “right”, it is aligned vertically to […]

Highlighting column series on legend click

Type tutorial

During the course of this tutorial we’ll modify the functionality of the legend from toggling series on and off, to rather highlighting it. Base chart Here’s our base chart we’re going to be working with: It has a legend, which acts normally: toggles relative series on and off on click. We’ve also set up our […]

Toggling multiple series with a single legend item

Type tutorial

This tutorial will show how you can toggle several Series at once, with a single Legend item. Base chart Let’s start with a basic chart with three Line series. Each Series has its own entry in the Legend. Click any of those will toggle its corresponding Series on and off. Suppose, we need to have […]

Truncating legend labels

Type tutorial

Sometimes chart legend can get out of control size-wise, especially if you have long labels. This tutorial will show how you can get it back in check by capping the length of its labels. The problem Long labels will bloat up legend size. This is especially prominent where chart size is not very big: Even […]

Using adapters to modify legend item appearance

Type tutorial

Normally the Legend will either display identical markers for all items, or make them look like their related series. This tutorial shows how you can use adapters to further customize each individual item in Legend. Prerequisites First of all, we’ll need to know what adapters are. Those are custom functions that you attach to an […]