Skip to main content

OptionsDataLabel

Namespace: Wisej.Web.Ext.ChartJS

Assembly: Wisej.Web.Ext.ChartJS (4.1.0.0)

Represents the options for the data labels.

public class OptionsDataLabel : OptionsBase

An instance of this class is exposed by DataLabel. On the client, the options are passed to the chartjs-plugin-datalabels plugin as options.plugins.datalabels. The text of each label is taken from Formatted when it contains a value for the data point, otherwise the raw data value is displayed. See options.

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.Display = true;
dataLabel.Anchor = DataLabelAnchor.End;
dataLabel.Align = DataLabelAlign.Top;
dataLabel.Color = Color.DimGray;

Constructors​

Instance member OptionsDataLabel()​

Default constructor.

Creates a set of data label options that is not yet attached to an owner.

Example:

var dataLabel = new OptionsDataLabel();
dataLabel.Display = true;
dataLabel.BackgroundColor = Color.White;
this.chartJS1.Options.DataLabel = dataLabel;

Instance member OptionsDataLabel(owner)​

Constructs a new instance of the OptionsDataLabel set.

NameTypeDescription
ownerOptionsBaseThe OptionsBase instance (usually the chart Options) that owns this set of options.

Throws:

Example:

var options = this.chartJS1.Options;
var dataLabel = new OptionsDataLabel(options);
dataLabel.Display = true;
options.DataLabel = dataLabel;

Properties​

Instance member Align​

DataLabelAlign: Returns or sets the default alignment of the data labels relative to the anchor point. (Default: Center)

Value: One of the DataLabelAlign values. The default is Center.

Maps to the align option of chartjs-plugin-datalabels. The anchor point is set by Anchor and the distance from it by Offset.

Example:

// place the labels above the top of each bar.
this.chartJS1.Options.DataLabel.Display = true;
this.chartJS1.Options.DataLabel.Anchor = DataLabelAnchor.End;
this.chartJS1.Options.DataLabel.Align = DataLabelAlign.End;

Instance member Anchor​

DataLabelAnchor: Returns or sets the default anchoring of the data labels on the associated element. (Default: Center)

Value: One of the DataLabelAnchor values. The default is Center.

Maps to the anchor option of chartjs-plugin-datalabels.

Example:

// anchor the labels at the base of each bar.
this.chartJS1.Options.DataLabel.Display = true;
this.chartJS1.Options.DataLabel.Anchor = DataLabelAnchor.Start;

Instance member BackgroundColor​

Color: Returns or sets the background color of the data labels. (Default: Color [Empty])

Value: The default is Empty (no background).

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.Display = true;
dataLabel.BackgroundColor = Color.FromArgb(200, Color.White);
dataLabel.BorderRadius = 4;

Instance member BorderColor​

Color: Returns or sets the border color of the data labels. (Default: Color [Empty])

Value: The default is Empty.

The border is drawn only when BorderWidth is greater than 0.

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.BorderColor = Color.SteelBlue;
dataLabel.BorderWidth = 1;

Instance member BorderRadius​

Int32: Returns or sets the radius of the data labels' border corners. (Default: 0)

Value: The radius in pixels. The default is 0 (square corners).

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.BackgroundColor = Color.Gold;
dataLabel.BorderRadius = 10;

Instance member BorderWidth​

Int32: Returns or sets the width of the data labels' border. (Default: 0)

Value: The width in pixels. The default is 0 (no border).

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.BorderWidth = 2;
dataLabel.BorderColor = Color.Black;

Instance member Clamp​

Boolean: Returns or sets whether the anchor position should be calculated based on the visible geometry of the associated element (i.e. the part inside the chart area). (Default: False)

Value: The default is false.

Maps to the clamp option of chartjs-plugin-datalabels. Useful to keep labels visible when the associated element is partially outside of the chart area.

Example:

this.chartJS1.Options.DataLabel.Display = true;
this.chartJS1.Options.DataLabel.Clamp = true;

Instance member Clip​

Boolean: Returns or sets whether the part of the labels which is outside the chart area will be masked. (Default: False)

Value: The default is false.

Unlike the other properties of this class, changing this value doesn't refresh the chart automatically; the new value is used the next time the chart is updated.

Example:

this.chartJS1.Options.DataLabel.Clip = true;
this.chartJS1.Update();

Instance member Color​

Color: Returns or sets the text color of the data labels. (Default: Color [Empty])

Value: The default is Empty, which uses the plugin's default color.

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.Display = true;
dataLabel.Color = Color.White;

Instance member Display​

Boolean: Shows or hides the data labels. (Default: False)

Value: true to show the data labels; false (default) to hide them.

The text displayed for each data point is taken from Formatted when available, otherwise the data value itself is shown.

Example:

var dataSet = this.chartJS1.DataSets[0];
dataSet.Data = new object[] { 1250, 980, 1430 };
dataSet.Formatted = new[] { "$1,250", "$980", "$1,430" };

this.chartJS1.Options.DataLabel.Display = true;

Instance member Font​

Font: Returns or sets the font of the data labels. (Default: null)

Value: When not set (null), returns the Font of the owner ChartJS control.

The size, family and bold style of the font are sent to the plugin's font option.

Example:

this.chartJS1.Options.DataLabel.Display = true;
this.chartJS1.Options.DataLabel.Font = new Font("Segoe UI", 9F, FontStyle.Bold);

Instance member Offset​

Int32: Returns or sets the distance (in pixels) to pull the labels away from the anchor point. (Default: 4)

Value: The distance in pixels. The default is 4.

According to the chartjs-plugin-datalabels documentation, this option is not applicable when Align is Center.

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.Anchor = DataLabelAnchor.End;
dataLabel.Align = DataLabelAlign.Top;
dataLabel.Offset = 8;

Instance member Opacity​

Single: Returns or sets the opacity of the data labels. (Default: 1)

Value: A value from 0 (fully transparent) to 1 (fully opaque). The default is 1.

Example:

this.chartJS1.Options.DataLabel.Display = true;
this.chartJS1.Options.DataLabel.Opacity = 0.7f;

Instance member Padding​

Padding: Returns or sets the padding inside the data labels.

Value: The padding in pixels. The default is 4 on all sides.

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.BackgroundColor = Color.LightYellow;
dataLabel.Padding = new Padding(6, 2, 6, 2);

Instance member Rotation​

Int32: Returns or sets the clockwise rotation of the data labels. (Default: 0)

Value: The rotation angle in degrees. The default is 0.

Example:

// vertical labels inside the bars.
this.chartJS1.Options.DataLabel.Display = true;
this.chartJS1.Options.DataLabel.Rotation = -90;

Instance member TextAlign​

DataLabelTextAlignment: Returns or sets the alignment of the text inside the data labels. (Default: Start)

Value: One of the DataLabelTextAlignment values. The default is Start.

Maps to the textAlign option of chartjs-plugin-datalabels and is mostly visible on labels with multiple lines of text.

Example:

this.chartJS1.DataSets[0].Formatted = new[] { "Q1\n1,250", "Q2\n980" };
this.chartJS1.Options.DataLabel.Display = true;
this.chartJS1.Options.DataLabel.TextAlign = DataLabelTextAlignment.Center;

Instance member TextShadowBlur​

Int32: Returns or sets the blur value of the text's shadow. (Default: 0)

Value: The blur amount in pixels. The default is 0 (no shadow).

The color of the shadow is set by TextShadowColor.

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.TextShadowColor = Color.Black;
dataLabel.TextShadowBlur = 4;

Instance member TextShadowColor​

Color: Returns or sets the color of the text's shadow. (Default: Color [Empty])

Value: The default is Empty.

The shadow is visible only when TextShadowBlur is greater than 0.

Example:

this.chartJS1.Options.DataLabel.Color = Color.White;
this.chartJS1.Options.DataLabel.TextShadowColor = Color.FromArgb(128, Color.Black);
this.chartJS1.Options.DataLabel.TextShadowBlur = 6;

Instance member TextStrokeColor​

Color: Returns or sets the stroke (outline) color of the data label text. (Default: Color [Empty])

Value: The default is Empty.

The stroke is drawn only when TextStrokeWidth is greater than 0.

Example:

var dataLabel = this.chartJS1.Options.DataLabel;
dataLabel.Color = Color.White;
dataLabel.TextStrokeColor = Color.Black;
dataLabel.TextStrokeWidth = 2;

Instance member TextStrokeWidth​

Int32: Returns or sets the width of the stroke (outline) of the data label text. (Default: 0)

Value: The width in pixels. The default is 0 (no stroke).

Example:

this.chartJS1.Options.DataLabel.TextStrokeColor = Color.Navy;
this.chartJS1.Options.DataLabel.TextStrokeWidth = 1;