You may wish to display the legends vertically, for example to the right of the graph.
To do this, you can use the Apache ECharts legend.orient option:
legend: {
data: ['label 0', 'label 1', 'label 2'],
orient: 'vertical',
}
NB: This orientation could also be provided through
externalizeLegends() method providing in place of the CSS selector for the caption container an object including the selector and the orientation { legendHolderSelector: string; orientation: 'vertical' | 'horizontal';} :
themeManager.externalizeLegends(myChart, {legendHolderSelector: '#barChartSH_legend', orientation: 'vertical'});
In the example below, we prefer the Apache ECharts legend.orient method.
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.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'
}]
);