Using adapters to modify legend item appearance

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 element for the specific purpose of modifying value of its properties, settings or output.

MORE INFO For more information about read "Adapters" article.

Base chart

We're going to grab a semi-simple chart from our "Legend" article that showed how you can customize the markers:

See the Pen amCharts V4: Legend (markers) by amCharts (@amcharts) on CodePen.24419

Modifying individual markers

All the markers in the above chart, while modified in appearance, look identical, save for the color.

Let's see how we can modify each one of them individually.

Adding custom data to series

Absolutely all objects in amCharts 4 can have any arbitrary data attached to them via their property dummyData.

dummyData is not used by any of the chart's elements, but it can be used by developers to attach some info, that might be useful to their custom code, like, for instance adapters.

Say, we want to modify corner radius for each of our markers. We might want to set radius for each series, via dummyData:

series1.dummyData = {
  radius: 0
}

series2.dummyData = {
  radius: 3
}

series3.dummyData = {
  radius: 8
}

series1.dummyData = {
  radius: 0
}

series2.dummyData = {
  radius: 3
}

series3.dummyData = {
  radius: 8
}

{
  // ...
  "series": [{
    // ...
    "dummyData": {
      "radius": 0
    }
  }, {
    // ...
    "dummyData": {
      "radius": 3
    }
  }, {
    // ...
    "dummyData": {
      "radius": 8
    }
  }]
}

Adding adapters to markers

As we mentioned earlier, dummyData is not used by anything, the above code will not have any effect whatsoever on its own. It's just a storage to our custom code we're about to create.

And our custom code comes in a form of an adapter (or more like several adapters).

Since we want to modify the corner radius of the the legend markers, we'll set adapters to legend.markers.template:

let marker = chart.legend.markers.template.children.getIndex(0);
// ...
marker.adapter.add("cornerRadiusTopLeft", cornerRadiusAdapter);
marker.adapter.add("cornerRadiusTopRight", cornerRadiusAdapter);
marker.adapter.add("cornerRadiusBottomLeft", cornerRadiusAdapter);
marker.adapter.add("cornerRadiusBottomRight", cornerRadiusAdapter);

function cornerRadiusAdapter(radius, target) {
  if (!target.dataItem) {
    return radius;
  }
  let settings = target.dataItem.dataContext.dummyData;
  return settings && settings.radius !== undefined ? settings.radius : radius;
}

var marker = chart.legend.markers.template.children.getIndex(0);
// ...
marker.adapter.add("cornerRadiusTopLeft", cornerRadiusAdapter);
marker.adapter.add("cornerRadiusTopRight", cornerRadiusAdapter);
marker.adapter.add("cornerRadiusBottomLeft", cornerRadiusAdapter);
marker.adapter.add("cornerRadiusBottomRight", cornerRadiusAdapter);

function cornerRadiusAdapter(radius, target) {
  if (!target.dataItem) {
    return radius;
  }
  var settings = target.dataItem.dataContext.dummyData;
  return settings && settings.radius !== undefined ? settings.radius : radius;
}

{
  // ...
  "legend": {
    // ...
    "markers": {
      "children": [{
        // ...
        "adapter": {
          "cornerRadiusTopLeft": cornerRadiusAdapter,
          "cornerRadiusTopRight": cornerRadiusAdapter,
          "cornerRadiusBottomLeft": cornerRadiusAdapter,
          "cornerRadiusBottomRight": cornerRadiusAdapter
        }
      }]
    }
  }
}

function cornerRadiusAdapter(radius, target) {
  if (!target.dataItem) {
    return radius;
  }
  var settings = target.dataItem.dataContext.dummyData;
  return settings && settings.radius !== undefined ? settings.radius : radius;
}

We've used adapters to modify the properties related to corner radius. You can use it to modify just about anything else as well.

Example

Here's how our chart looks like when we're done with it:

See the Pen amCharts 4: Legend markers adpaters by amCharts (@amcharts) on CodePen.24419