RizzyUI

Legend Plugin

Reference External Link

The chart legend displays data about the datasets that are appearing on the chart.

Namespace: options.plugins.legend

.Options(o => o
	.Plugins(p => p
		.Legend(l => l
			.Display(true)
			.Labels(lb => lb
				.Color("rgb(255, 99, 132)")))))
"options": {
	"plugins": {
	  "legend": {
		"display": true,
		"labels": {
		  "color": "rgb(255, 99, 132)"
		}
	  }
	}
  }

Display

Is the legend shown? Default true.

.Display(false)

Position

Position of the legend. Default top. External Link

.Position(LegendPosition.Left)

Align

Alignment of the legend. Default center. External Link

.Align(LegendAlign.End)

MaxHeight

Maximum height of the legend, in pixels.

.MaxHeight(50)

MaxWidth

Maximum width of the legend, in pixels.

.MaxWidth(50)

FullSize

Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use. Default true.

.FullSize(false)

OnClick

A callback that is called when a click event is registered on a label item. Arguments: [event, legendItem, legend].

.OnClick("onClick")

OnHover

A callback that is called when a 'mousemove' event is registered on top of a label item. Arguments: [event, legendItem, legend].

.OnHover("onHover")

OnLeave

A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. Arguments: [event, legendItem, legend].

.OnLeave("onLeave")

Reverse

Legend will show datasets in reverse order. Default false.

.Reverse(true)

Rtl

true for rendering the legends from right to left.

.Rtl(false)

TextDirection

This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas.

.TextDirection("example")

Title Settings

Reference External Link

Set the legent title configuration.

Namespace: options.plugins.legend.title

.Options(o => o
.Plugins(p => p
    .Legend(l => l
        .Display(true)
        .Title(t => t
            .Text("Legend Title")
            .Color("rgb(75, 192, 192)")))))
"options": {
	"plugins": {
	  "legend": {
		"display": true,
		"title": {
		  "color": "rgb(75, 192, 192)",
		  "text": "Legend Title"
		}
	  }
	}
}

Color

Color of text. External Link

.Color("rgb(75, 192, 192)")

Display

Is the legend title displayed. Default false

.Display(true)

Font

See font configuration. Link

.Font(f => f.Family("Helvetica").Size(10))

Padding

Padding around the title.

.Padding(2)

See padding configuration. Link

.Padding(p => p.Top(5).Bottom(10))

Text

The string title.

.Text("Legend Text")

Labels Settings

Reference External Link

Set the legent labels configuration.

Namespace: options.plugins.legend.labels

.Options(o => o
.Plugins(p => p
    .Legend(l => l
        .Display(true)
        .Labels(l => l
            .BoxWidth(50)
            .Color("rgb(75, 192, 192)")))))
"options": {
	"plugins": {
	  "legend": {
		"display": true,
		"labels": {
		  "color": "rgb(75, 192, 192)",
		  "boxWidth": 50
		}
	  }
	}
}

BoxWidth

Width of coloured box. Default 40

.BoxWidth(50)

BoxHeight

Height of the coloured box. Default font.size

.BoxHeight(10)

Color

Color of label and the strikethrough. External Link

.Color("rgb(75, 192, 192)")

Font

See font configuration. Link

.Font(f => f.Family("...").Size(10))

Padding

Padding between rows of colored boxes. Default 10

.Padding(15)

GenerateLabels

Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details.

.GenerateLabels("functionName")

Filter

Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data.

.Filter("functionName")

Sort

Sorts legend items. Type is: sort(a: LegendItem, b: LegendItem, data: ChartData): number;. Receives 3 parameters, two Legend Items and the chart data. The return value of the function is a number that indicates the order of the two legend item parameters. The ordering matches the return value of Array.prototype.sort()

.Sort("functionName")

PointStyle

If specified, this style of point is used for the legend. Only used if usePointStyle is true. Default 'circle' External Link

.PointStyle(PointStyle.Dash)

TextAlign

Horizontal alignment of the label text. Options are: 'left', 'right' or 'center'. Default 'center'

.TextAlign(TextAlign.Left)

UsePointStyle

Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size). Default false

.UsePointStyle(true)

PointStyleWidth

If usePointStyle is true, the width of the point style used for the legend.

.PointStyleWidth(1)

UseBorderRadius

Label borderRadius will match corresponding borderRadius. Default false

.UseBorderRadius(true)

BorderRadius

Override the borderRadius to use.

.BorderRadius(1.2)