Legend
About
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.
Position
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.
Properties
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'} |
Example
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.
//bottom
chart.layout.legend.position = 'south';
//top-left
chart.layout.legend = {
position: 'northwest',
textStyle: {
fontFamily: 'serif'
},
rectStyle: {
stroke: 'gray',
strokeWidth: 2,
fill: 'lightgray',
cornerRadius: 5
}
};
Comments
Contents