Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

Legend

Overview

The AnyStock legend is rather alike the basic charts legend. You may use all its functions, enable or disable completely the same features. You can find some information about basic legend here. The main difference you should remember is that the legend in AnyStock is bend to the plot, not to the chart itself.

Now, let's explore the legend usage in AnyStocks and have a look at a couple of samples.

As the AnyStock legend is quite similar to other charts' legend, we're going to consider here those cases of differences or when we need to change something in it.

Positioning

We use the same methods for positioning the AnyStock Chart Legend as for the Basic Charts Legend. So, we use .orientation() and .align() methods to control legend's alignment. For more complicated settings, such as changing the items layout or space between items, we use .itemsLayout() and .itemsSpacing() accordingly. Let's create a vertically arranged legend.

// making the legend vertical
legend.itemsLayout('vertical');
// setting the space between the items
legend.itemsSpacing(1);

JsFiddle Playground

Title

By default, a Stock chart legend title shows the date and time of the hovered point on a chart, or the date and time of the last point of the chart when the mouse is out of the chart and no point is hovered. It is placed on the left side of the legend, while the whole legend is put in a line; title separator is disabled by default. We can change it all using .titleFormatter() method for changing the legend title, change its placement using some positioning methods (such as .position(), .itemsLayout()), disable the title by setting "false" to .enable(), enable the title separator with .titleSeparator() or add any of the events to make it interactive.

// turn the title on and set the position
legend.title(true);
legend.title().orientation('top').align('left');

// format the title
legend.titleFormatter(function(){
	    return "ACME Corp. Stock Prices"
});

//enable the titleSeparator
legend.titleSeparator(true);

JsFiddle Playground

Items

By default, the legend items show the name of the series with the value hovered on a stock, and the icon of the item is of square form and of the represented series' color. We can change the appearance of the items list using .itemsFormatter() method. It affects the list of items, so we can rename the items, change their icons' appearance. Look at the sample below

firstPlot.legend().itemsFormatter(function(){
            return [
                {text: "High", iconType: "circle", iconFill:"#558B2F"},
                {text: "Low", iconFill:"#D84315"},
                {text: "Close", iconType: "circle", iconFill:"#FF8F00"}
            ]
        });

JsFiddle Playground

When we've got the OHLC-series on our chart, we should use the .itemsTextFormatter() method to display all OHLC values in the legend. In the sample below we check if the series we're formatting is of OHLC type (which is necessary if your chart has a number of series) and then define what to display.

plot.legend().itemsTextFormatter(function(){
      if (this.open !== undefined){ 
      return "Open: " + this.open+ "   High: " + this.high+ "   Low: " + this.low+ "   Close: " + this.close 
      }
  });

JsFiddle Playground

One more thing should we take into account: if we've got too many data points and the data is approximated, then the legend will show the approximate value of the hovered group of points. To see the exact value of the point you should scroll the data to a non-approximated state.

Visualization

When we want to change something in the legend view, there's almost no difference in usage and editing between the basic chart legend and the AnyStock one. Let's add a background to our legend, change its size and icons and adjust the legend paginator.

// add a background
legend.background("#E1F5FE");

// change size in height
legend.height(35);

// adjust the paginator
legend.paginator(true);
legend.paginator().orientation("right");

// icons
var item = series.legendItem();
// set stroke of icons
item.iconStroke("#000")
// set type of icon marker
item.iconType("ohlc");

JsFiddle Playground

Custom Item

When creating legend you can add your own items with any information you want to see on the legend, to do that use itemsFormatter() method.

  var legend = chart.legend();
  // adjust legend items
  legend.itemsFormatter(function(items){
// push into items array
items.push({
      // set text of a new item
      text: "item text "
});
// return items array
return items;
  });

In the sample chart below we've used custom item that adds Total data to legend.

JsFiddle Playground

You can also create a custom legend. It's being done the same way as with basic chart legends, so you can look for it up in the Basic Chart Legend article.

Custom Legend

The same as we create one legend to several series in basic charts, we can do with stocks. The only difference you'd better remember is that in stocks we operate with series on plots instead of charts. Look at this in the Basic Chart Legend article.

// create custom legend
var customLegend = anychart.ui.legend();
// set sources for legend items
customLegend.itemsSource([plot_column, plot_line_ohlc]);
customLegend.enabled(true);
customLegend.hAlign("center");
customLegend.height(50);

// redraw legend every time the first chart is redrawn
chart.listen(
            "chartDraw",
            function (){
                // define legend bounds
                var legendBounds = anychart.math.rect(
                      0,
                      customLegend.getRemainingBounds().getHeight(),
                      chart.container().width(),
                      chart.container().height()
                );
                // set bounds and draw legend
                customLegend.parentBounds(legendBounds).draw();
            }
);
    
// set the bottom margin
chart.margin().bottom(chart.height() - customLegend.getRemainingBounds().getHeight());

// draw legend
customLegend.container(stage).draw();

JsFiddle Playground