Specific legend holders

Legends holders for stacked bars example

In the following example, we want to display the legends for a first set of stacked bars separately from those for a second set of stacked bars and the legend for a curve.

To do this, we pass as a parameter to the externalizeLegends() method not a CSS selector of the legend container but an array of containers defined by the {legendHolderSelector: string; orientation?: 'vertical' | 'horizontal'; seriesRef?: string[]} object.

• legendHolderSelector is the CSS selector of the legend holder.
• orientation optionally indicates whether captions are displayed horizontally or vertically. By default, the value of the legend.orient option in Apache Echarts will be used if it exists, otherwise it will be 'horizontal'.
• seriesRef is an array referencing the series whose legends are to be displayed in this legend container. The reference can be the series name, the series label or simply the stack name in the case of stacked bars.
  If seriesRef is absent, this container will be the default container for non-referenced legends.

We'll then have the following code to externalize our three types of legend into three different containers:

themeManager.externalizeLegends(
  myChart,
  [{ legendHolderSelector: '#results_stack_legend', seriesRef: ['result'], orientation: 'vertical' },
    { legendHolderSelector: '#goals_stack_legend', seriesRef: ['goals'], orientation: 'vertical' },
    { legendHolderSelector: '#line_legend'
  }]
);
          

Legend holder with custom content example

In this example, we show a very simple example on how to add custom HTML content after the legend items using the postItemContent option.

The postItemContent property allows you to inject HTML content in three ways:

1. As a function: content will be customized for each legend label
2. As an object: content will be mapped directly to series names or legend labels
3. As an array: content will be matched with legends by position (first array element for first legend, etc.)

For full illustration, have a look to the next use case, here will illustrate usage of the object mapping:

themeManager.externalizeLegends(
  myChart,
  {
    legendHolderSelector: '#legend_with_custom_content',
    postItemContent: {
      'Label 1': '<small>(partial result)</small>'
    }
  }
);
          

Legend holder with custom content complex example

In this example, we demonstrate how to add custom HTML content to your legends using both postItemContent and afterLegendContent options.

There are two ways to add custom content to your legends:

1. Using postItemContent to add content after each individual legend item:
   • As a function: customize content for each legend label
   • As an object: map series names or legend labels directly to their custom content
2. Using afterLegendContent to add content that appears after all legend items:
   • As a string: single piece of content displayed at the bottom of the legend group

Here's how to use both options:

// Example 1: Function-based postItemContent - Customize content per legend
themeManager.externalizeLegends(myChart, [
      {
        // Example 1: Function-based content - Dynamic content based on legend label
        legendHolderSelector: '#legend_with_custom_content',
        orientation: 'horizontal',
        seriesRef: ['Revenue', 'Costs', 'Net Profit'],
        postItemContent: (legendLabel, legendName, legendIndex, color, colorIndex) => {
          switch(legendLabel) {
            case 'Revenue':
              return `<span class="metric-note revenue-note">
                       Gross revenue including taxes (${legendName} at index ${legendIndex + 1})
                     </span>`;
            case 'Costs':
              return `<span class="metric-note profit-note">
                       Operating expenses only (Using color ${color})
                     </span>`;
            case 'Net Profit':
              return `<span class="metric-note conversion-note">
                       After all deductions (Color palette index ${colorIndex + 1})
                     </span>`;
            default:
              return '';
          }
        }
]);
          

// Example 2: Object-based postItemContent - Map labels to content
themeManager.externalizeLegends(
  myChart,
  {
     legendHolderSelector: '#legend_with_object_content',
        orientation: 'horizontal',
        seriesRef: ['Sales 2025', 'Sales 2024', 'Growth Rate'],
        postItemContent: {
          'Sales 2025': '<span class="metric-note revenue-note">Projected data</span>',
          'Sales 2024': '<span class="metric-note profit-note">Historical data</span>',
          'Growth Rate': '<span class="metric-note conversion-note">Year-over-year change</span>'
        }
  }
);
          

// Example 3: Array-based postItemContent - Position-based content
themeManager.externalizeLegends(
  myChart,
  {
    legendHolderSelector: '#legend_with_object_content',
        orientation: 'horizontal',
        seriesRef: ['Sales 2025', 'Sales 2024', 'Growth Rate'],
        postItemContent: {
          'Sales 2025': '<span class="metric-note revenue-note">Projected data</span>',
          'Sales 2024': '<span class="metric-note profit-note">Historical data</span>',
          'Growth Rate': '<span class="metric-note conversion-note">Year-over-year change</span>'
        }
  }
);
          

// Example 4: Using afterLegendContent - Add global content after all legends
themeManager.externalizeLegends(
   myChart,
   {
     legendHolderSelector: '#legend_with_string_content',
     orientation: 'horizontal',
     seriesRef: ['Site Visits', 'Conversions', 'Success Rate'],
     afterLegendContent: '<div class="global-note">Data from our analytics platform - Updated daily</div>'
   }
);