A Legend object defines how a legend is displayed on a chart. You add a legend by setting its position. Leave the position empty to omit it. Some styling can be applied.


Set the position to one of the following values:

Value Position on chart
East Right
West Left
North Top
South Bottom
NorthEast Top-right
NorthWest Top-left
SouthEast Bottom-right
SouthWest Bottom-left
'' No legend shown (Default)

The position value isn't case-sensitive. The legend is omitted by default.


The following properties can be set:

Property Definition Type Default
position Legend's position on the chart Position ''
textStyle New Legend text's style TextStyle { color: 'black', fontSize: 12, fontWeight: 'normal', fontFamily: 'system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif"'}
rectStyle New Legend container's style RectStyle { cornerRadius: 0, stroke: 'transparent', strokeWidth: 1, strokeDashArray: 'none', fill: 'none'}


In the first example, we add a basic legend at the bottom of the chart. In the next one, we add a legend with some styling at the top-left corner of the chart.

                        chart.layout.legend.position = 'south';
                        chart.layout.legend = {
                            position: 'northwest',
                            textStyle: {
                                fontFamily: 'serif'
                            rectStyle: {
                                stroke: 'gray',
                                strokeWidth: 2,
                                fill: 'lightgray',
                                cornerRadius: 5