Highlighting column series on legend click

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:

Open in CodePen

It has a legend, which acts normally: toggles relative series on and off on click.

We’ve also set up our series to be somewhat semitransparent. We’re going to make them fully opaque when we implement “highlighting” functionality.

Creating active state

SIDE READING A state is a collection of property values to apply to object when certain conditions are met (e.g. it is hovered) or when applied manually by some code - one like we’re going to do. For more about states, read here.

We are going to create an "active" state for the columns in our series. Our code which triggers “highlight” will just have to apply that state to the series for it to cascade to all its columns and trigger state’s property override.

TypeScript

let hs = series.columns.template.states.create("active");hs.properties.fillOpacity = 1;

JavaScript

var hs = series.columns.template.states.create("active");hs.properties.fillOpacity = 1;

JSON

{  // …  "series": [{    // …    "columns": {      "states": {        "active": {          "properties": {            "fillOpacity": 1          }        }      }    }  }]}

The above basically means: “when active state is applied set fillOpacity of each column to 1”.

Our series is all ready. Now let’s see how we need to mod our legend.

Setting up the legend

To make this work we’ll need to do two things:

1. Disable default functionality of the legend - toggling series.
2. Add our own events to legend that would apply (or remove) the “active” state for its respective series.

Disabling default behavior

This one’s easy: simply disable toggling of the legend items:

TypeScript

chart.legend.itemContainers.template.togglable = false;

JavaScript

chart.legend.itemContainers.template.togglable = false;

JSON

{  // …  "legend": {    "itemContainers": {      "togglable": false    }  }}

Now, if you click/tap on legend item, nothing happens. Good, let’s add our own thing.

Adding custom events

Since we have disabled toggling, and built-in toggle events are not firing on legend items anymore, we can add our own "hit" event, that will do its magic.

TypeScript

chart.legend.itemContainers.template.events.on("hit", function(ev) {  let seriesColumn = ev.target.dataItem.dataContext.columns.template;  seriesColumn.isActive = !seriesColumn.isActive;});

JavaScript

chart.legend.itemContainers.template.events.on("hit", function(ev) {  var seriesColumn = ev.target.dataItem.dataContext.columns.template;  seriesColumn.isActive = !seriesColumn.isActive;});

JSON

{  // …  "legend": {    "itemContainers": {      "togglable": false,      "events": {        "hit": function(ev) {          var seriesColumn = ev.target.dataItem.dataContext.columns.template;          seriesColumn.isActive = !seriesColumn.isActive;        }      }    }  }}

Note

Setting isActive = true automatically sets "active" state on an element, while setting it to false restores default state. This way we can easily make the series automatically apply relative state by toggling isActive on a column template, which will make the state change cascade to all actual columns.

Final chart

Now that we have everything ready, let’s try it out.

Open in CodePen