class Legend extends BaseAttribute
https://www.chartjs.org/docs/2.7.3/configuration/legend.html
Legend inherits all the properties from BaseAttribute The chart legend displays data about the datasets that are appearing on the chart
| Attribute name | Type | Default | Description |
|---|---|---|---|
| display | boolean | true | Is the legend shown? |
| position | string | 'top' | Position of the legend. Options are: 'top', 'left', 'bottom', 'right' |
| align | string | 'center' | Alignment of the legend. Options are: 'start', 'center', 'end' |
| fullwidth | boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use |
| callbackOnclick | function | A callback that is called when a click event is registered on a label item | |
| callbackOnhover | function | A callback that is called when a 'mousemove' event is registered on top of a label item | |
| callbackOnleave | function | A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item | |
| reverse | boolean | false | Legend will show datasets in reverse order |
| rtl | boolean | true for rendering the legends from right to left | |
| textDirection | string | canvas' default | Determines the direction of the text. Default value is 'ltr` on the canvas for rendering the legend, regardless of the css specified on the canvas |
| labelBoxwidth | number | 40 | Width of coloured box |
| labelFontsize | number | 12 | Font size of text |
| labelFontstyle | string | 'normal' | Font style of text |
| labelFontcolor | Color | '#666' | Color of text |
| labelFontfamily | string | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family of legend text |
| labelPadding | number | 10 | Padding between rows of colored boxes |
| callbackGeneratelabels | function | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details | |
| callbackFilter | function | null | Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data |
| labelUsepointstyle | boolean | false | Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize) |
Items passed to the legend callbackOnclick function must implement the following interface:
{
// Label that will be displayed
text: string,
// Fill style of the legend box
fillStyle: Color,
// If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
hidden: boolean,
// For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
lineCap: string,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
lineDash: number[],
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
lineDashOffset: number,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
lineJoin: string,
// Width of box border
lineWidth: number,
// Stroke style of the legend box
strokeStyle: Color,
// Point style of the legend box (only used if usePointStyle is true)
pointStyle: string | Image,
// Rotation of the point in degrees (only used if usePointStyle is true)
rotation: number
}
<c-chart>
<c-legend
align="start"
rtl="true"
labelFontsize="16"
>
</c-legend>
</c-chart>