Skip to main content

OptionsDataLabels

Namespace: Wisej.Web.Ext.ChartJS3

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

Represents the options for the data labels.

public class OptionsDataLabels : OptionsBase

An instance of this class is exposed by the DataLabels property and maps to the plugins.datalabels configuration of the chartjs-plugin-datalabels plugin. See options. The data labels are hidden by default; set Display to true to show them. The text of each label is taken from Formatted when it is set, otherwise it is the data value rounded to the nearest integer.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.Anchor = DataLabelAnchor.End;
dataLabels.Align = DataLabelAlign.Top;
dataLabels.Color = Color.DimGray;

Constructors​

Instance member OptionsDataLabels()​

Default constructor.

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

Example:

var dataLabels = new OptionsDataLabels();
dataLabels.Display = true;
dataLabels.Color = Color.White;
this.chartJS31.Options.Plugins.DataLabels = dataLabels;
this.chartJS31.Update();

Instance member OptionsDataLabels(owner)​

Constructs a new instance of the OptionsDataLabels set.

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

Example:

var plugins = this.chartJS31.Options.Plugins;
var dataLabels = new OptionsDataLabels(plugins);
dataLabels.Display = true;
plugins.DataLabels = dataLabels;

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.

The distance from the anchor point is set by Offset. See positioning. Setting this property calls Update to refresh the chart.

Example:

// place the labels above the top of the bars.
var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.Anchor = DataLabelAnchor.End;
dataLabels.Align = DataLabelAlign.End;

Instance member Anchor​

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

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

See positioning. Setting this property calls Update to refresh the chart.

Example:

this.chartJS31.ChartType = ChartType.Bar;
this.chartJS31.Options.Plugins.DataLabels.Display = true;
this.chartJS31.Options.Plugins.DataLabels.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).

Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.BackgroundColor = Color.FromArgb(200, Color.White);
dataLabels.BorderRadius = 4;

Instance member BorderColor​

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

Value: The default is Empty (no border).

The width of the border is set by BorderWidth. Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.BorderColor = Color.SteelBlue;
dataLabels.BorderWidth = 2;

Instance member BorderRadius​

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

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

Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.BackgroundColor = Color.Orange;
dataLabels.BorderRadius = 10;

Instance member BorderWidth​

Int32: Returns or sets the width of the data label's border. (Default: 1)

Value: The width in pixels. The default is 1.

The border is drawn only when BorderColor is set. Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.BorderColor = Color.Black;
dataLabels.BorderWidth = 3;

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.

Useful to keep the labels visible when the elements are partially outside of the chart area, for example when the axis Max is lower than the data values. Setting this property calls Update to refresh the chart.

Example:

this.chartJS31.Options.Scales.yAxes[0].Max = 50;
this.chartJS31.Options.Plugins.DataLabels.Display = true;
this.chartJS31.Options.Plugins.DataLabels.Clamp = true;

Instance member Clip​

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

Value: The default is false.

Unlike the other properties of this class, the setter doesn't refresh the chart: call Update() on the ChartJS3 control to apply the change.

Example:

this.chartJS31.Options.Plugins.DataLabels.Clip = true;
this.chartJS31.Update();

Instance member Color​

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

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

Setting this property calls Update to refresh the chart.

Example:

// white labels centered inside the pie slices.
this.chartJS31.ChartType = ChartType.Pie;
this.chartJS31.Options.Plugins.DataLabels.Display = true;
this.chartJS31.Options.Plugins.DataLabels.Color = Color.White;

Instance member Display​

Boolean: Returns or sets whether the data labels are displayed. (Default: False)

Value: The default is false.

The text of each label is taken from the Formatted array of the data set when it's set, otherwise it is the data value rounded to the nearest integer. Setting this property calls Update to refresh the chart.

Example:

var dataSet = this.chartJS31.DataSets[0];
dataSet.Data = new object[] { 1250.5, 980.25, 1720.75 };
dataSet.Formatted = new[] { "$1,250.50", "$980.25", "$1,720.75" };
this.chartJS31.Options.Plugins.DataLabels.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 chart control.

Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.Font = new Font("Segoe UI", 9F, FontStyle.Bold);

Instance member Offset​

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

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

The direction is determined by Align; the offset has no effect when Align is Center. Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.Align = DataLabelAlign.Top;
dataLabels.Offset = 10;

Instance member Opacity​

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

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

Setting this property calls Update to refresh the chart.

Example:

this.chartJS31.Options.Plugins.DataLabels.Display = true;
this.chartJS31.Options.Plugins.DataLabels.Opacity = 0.7F;

Instance member Padding​

Padding: Returns or sets the padding around the text of the data labels.

Value: A Padding value in pixels. The default is 4 on all sides.

The padding is visible when BackgroundColor or BorderColor is set. Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.BackgroundColor = Color.LightYellow;
dataLabels.Padding = new Padding(6, 2, 6, 2);

Instance member Rotation​

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

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

Setting this property calls Update to refresh the chart.

Example:

// vertical labels.
this.chartJS31.Options.Plugins.DataLabels.Display = true;
this.chartJS31.Options.Plugins.DataLabels.Rotation = -90;

Instance member TextAlign​

DataLabelTextAlignment: Returns or sets the text alignment of multi-line data labels.

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

The alignment affects only labels that span multiple lines. It doesn't change the position of the label, which is controlled by Anchor and Align. Setting this property calls Update to refresh the chart.

Example:

this.chartJS31.DataSets[0].Formatted = new[] { "Q1\n120", "Q2\n95", "Q3\n143" };
this.chartJS31.Options.Plugins.DataLabels.Display = true;
this.chartJS31.Options.Plugins.DataLabels.TextAlign = DataLabelTextAlignment.Center;

Instance member TextShadowBlur​

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

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

The color of the shadow is set by TextShadowColor. Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.TextShadowColor = Color.Gray;
dataLabels.TextShadowBlur = 6;

Instance member TextShadowColor​

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

Value: The default is Empty.

Use together with TextShadowBlur to make the shadow visible. Setting this property calls Update to refresh the chart.

Example:

this.chartJS31.Options.Plugins.DataLabels.TextShadowColor = Color.Black;
this.chartJS31.Options.Plugins.DataLabels.TextShadowBlur = 4;

Instance member TextStrokeColor​

Color: Returns or sets the stroke 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. Setting this property calls Update to refresh the chart.

Example:

var dataLabels = this.chartJS31.Options.Plugins.DataLabels;
dataLabels.Display = true;
dataLabels.Color = Color.White;
dataLabels.TextStrokeColor = Color.Black;
dataLabels.TextStrokeWidth = 2;

Instance member TextStrokeWidth​

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

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

The color of the stroke is set by TextStrokeColor. Setting this property calls Update to refresh the chart.

Example:

this.chartJS31.Options.Plugins.DataLabels.TextStrokeColor = Color.White;
this.chartJS31.Options.Plugins.DataLabels.TextStrokeWidth = 3;