Title and Separator

The legend title is disabled by default. To enable and configure it, combine the legend() method of the chart with title() and methods of the anychart.core.ui.Title class. You can set the text, font, padding, and so on:

// enable and configure the legend title
var title = chart.legend().title();
title.enabled(true);
title.text("Total Sales: " + chart.getStat("dataPlotYSum"));
title.padding(5);
title.fontColor("#96a6a6");
title.fontSize(12);
title.fontWeight(600);

To enable and configure the title separator, combine the legend() and titleSeparator() methods with methods of the anychart.core.ui.Separator class. For example, you can set the height, fill, and stroke:

// enable and configure the title separator
var separator = chart.legend().titleSeparator()
separator.enabled(true);
separator.height(4);
separator.fill("none");
separator.stroke("#96a6a6", 2);

Here is a legend with the title and separator ajusted:

Playground

Please note that you can set the orientation of both elements: use the orientation() method of the title and the same method of the separator with one of the parameters listed in anychart.enums.Orientation:

  • top
  • bottom
  • right
  • left
chart.legend().title().orientation("left");
chart.legend().titleSeparator().orientation("left");

In the sample below, there is a legend with a vertical layout, and the title and separator are placed to the left of it:

Playground