Class ODSChartsLegendHolderDefinition

constructor

• new ODSChartsLegendHolderDefinition(
      legendHolderSelector: string,
      orientation?: "vertical" | "horizontal",
      seriesRef?: string[],
      postItemContent?:
          | string[]
          | { [legendNameOrLabel: string]: string }
          | (
              (
                  legendLabel: string,
                  legendName: string,
                  legendIndex: number,
                  color: string,
                  colorIndex: number,
              ) => string
          ),
      afterLegendContent?: string,
  ): ODSChartsLegendHolderDefinition

  Parameters

  • legendHolderSelector: string

    Legends container CSS selector

  • Optionalorientation: "vertical" | "horizontal"

    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 legend.orient does not exist, the default value will be 'horizontal'.

  • OptionalseriesRef: string[]

    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.

  • OptionalpostItemContent:
        | string[]
        | { [legendNameOrLabel: string]: string }
        | (
            (
                legendLabel: string,
                legendName: string,
                legendIndex: number,
                color: string,
                colorIndex: number,
            ) => string
        )

    This option defines HTML content that will be displayed after each individual legend item. It can be:

    • A function that receives legend information and returns custom HTML content for that specific legend
    • An object mapping legend labels or series names to their custom HTML content
    • An array of strings: each element is associated with the legend at the same position (index)

    Example with dynamic content based on legend information:

    postItemContent: (legendLabel, legendName, legendIndex, color, colorIndex) => {
      if (legendLabel === 'Sales') {
        return `<div class="mt-2 p-2 bg-light rounded border-start border-3 border-primary">
                 <small class="text-muted">${legendName} (${legendIndex + 1})</small>
               </div>`;
      }
      if (legendLabel === 'Profit') {
        return '<div class="mt-1 alert alert-info py-1"><small>Net profit after adjustments</small></div>';
      }
      return '';
    }
    Copy

    Example with object mapping:

    postItemContent: {
      'Sales': '<div class="mt-1 badge bg-primary-subtle text-primary-emphasis">Revenue data includes taxes</div>',
      'Profit': '<div class="mt-1 badge bg-success-subtle text-success-emphasis">Net profit after adjustments</div>'
    }
    Copy

    Example with array:

    postItemContent: [
      '<div class="mt-1 text-muted small">Contenu pour la première légende</div>',
      '<div class="mt-1 text-muted small">Contenu pour la deuxième légende</div>'
    ]
    Copy

    Param: legendLabel

    The label of the legend item

    Param: legendName

    The name of the serie corresponding to this legend item

    Param: legendIndex

    The index of the legend in the legend list (0-based)

    Param: color

    The color assigned to this legend

    Param: colorIndex

    The index of the color in the color list (0-based)

  • OptionalafterLegendContent: string

    This option defines HTML content that will be displayed after all legend items. It should be a string containing HTML content that will be added at the end of the legend group.

    Example:

    afterLegendContent: '<div class="legend-footer">Last updated: October 2025</div>'
    Copy

  Returns ODSChartsLegendHolderDefinition

OptionalafterLegendContent

afterLegendContent: '<div class="legend-footer">Last updated: October 2025</div>'
Copy

legendHolderSelector

Optionalorientation

OptionalpostItemContent

postItemContent: (legendLabel, legendName, legendIndex, color, colorIndex) => {
  if (legendLabel === 'Sales') {
    return `<div class="mt-2 p-2 bg-light rounded border-start border-3 border-primary">
             <small class="text-muted">${legendName} (${legendIndex + 1})</small>
           </div>`;
  }
  if (legendLabel === 'Profit') {
    return '<div class="mt-1 alert alert-info py-1"><small>Net profit after adjustments</small></div>';
  }
  return '';
}
Copy

postItemContent: {
  'Sales': '<div class="mt-1 badge bg-primary-subtle text-primary-emphasis">Revenue data includes taxes</div>',
  'Profit': '<div class="mt-1 badge bg-success-subtle text-success-emphasis">Net profit after adjustments</div>'
}
Copy

postItemContent: [
  '<div class="mt-1 text-muted small">Contenu pour la première légende</div>',
  '<div class="mt-1 text-muted small">Contenu pour la deuxième légende</div>'
]
Copy

OptionalseriesRef