Skip to main content

LineDataSet

Namespace: Wisej.Web.Ext.ChartJS3

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

Specialized data set for the Line chart.

public class LineDataSet : DataSet

The DataSetCollection creates this type of data set when the ChartType is Line, Bubble or Scatter.

When the point style, point radius or point hover radius arrays contain a single entry, the client converts them to a single value that applies to all the points.

Example:

this.chartJS31.ChartType = ChartType.Line;
this.chartJS31.Labels = new[] { "Mon", "Tue", "Wed", "Thu", "Fri" };

var visits = (LineDataSet)this.chartJS31.DataSets.Add("Visits");
visits.Data = new object[] { 120, 98, 143, 160, 110 };
visits.BorderColor = Color.SeaGreen;
visits.Fill = true;

Constructors​

Instance member LineDataSet()​

Constructs a new instance of LineDataSet.

The new data set has Type set to Line, a BorderWidth of 3, no fill, the line shown, no gap spanning, no stepping, and circle points with a radius and hover radius of 5 pixels.

Example:

var line = new LineDataSet
{
	Label = "Pressure",
	Data = new object[] { 1012, 1008, 1015 },
	BorderColor = Color.RoyalBlue
};
this.chartJS31.DataSets.Add(line);

Properties​

Instance member BorderColor​

Color: Returns or sets the color of the line. (Default: Color [Empty])

Value: The line Color. The default is Empty.

Hides the inherited BorderColor and maps to the Chart.js dataset "borderColor" property.

Example:

var line = (LineDataSet)this.chartJS31.DataSets[0];
line.BorderColor = Color.Crimson;
this.chartJS31.Update();

Instance member BorderDash​

Int32[]: Returns or sets the length and spacing of dashes. See setLineDash. (Default: null)

Value: An array of numbers that alternately specify the length of the dashes and of the gaps, in pixels. The default is null, which draws a solid line.

Maps to the Chart.js dataset "borderDash" property.

Example:

var target = (LineDataSet)this.chartJS31.DataSets.Add("Target");
target.Data = new object[] { 100, 100, 100, 100 };

// 6px dashes separated by 4px gaps.
target.BorderDash = new[] { 6, 4 };
this.chartJS31.Update();

Instance member Fill​

Boolean: Returns or sets whether to fill the area under the line. (Default: False)

Value: True to fill the area under the line using BackgroundColor; otherwise false. The default is false.

Maps to the Chart.js dataset "fill" property.

Example:

var area = (LineDataSet)this.chartJS31.DataSets.Add("Usage");
area.Data = new object[] { 30, 45, 38, 60 };
area.Fill = true;
area.BackgroundColor = Color.FromArgb(60, Color.DodgerBlue);
this.chartJS31.Update();

Instance member LineTension​

Double: Returns or sets the Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used. (Default: 0.4)

Value: The curve tension, usually between 0 and 1. The default is 0.4.

Sent to the client as the dataset "lineTension" property. Note that Chart.js 3 documents this option as "tension".

Example:

var line = (LineDataSet)this.chartJS31.DataSets[0];

// draw straight segments between the points.
line.LineTension = 0;
this.chartJS31.Update();

Instance member PointBackgroundColor​

Color[]: Returns or sets the fill colors of the points in the data set. One entry is the default color for all the points, otherwise each point can be defined as a different color.

Value: An array of Color values, or null (the default) to use the Chart.js default.

Maps to the Chart.js dataset "pointBackgroundColor" property. An array with a single entry is sent to the client as a single color.

Example:

var line = (LineDataSet)this.chartJS31.DataSets.Add("Status");
line.Data = new object[] { 80, 95, 60 };

// color each point according to its value.
line.PointBackgroundColor = new[] { Color.Orange, Color.Green, Color.Red };
this.chartJS31.Update();

Instance member PointBorderColor​

Color[]: Returns or sets the border colors of the points in the data set. One entry is the default color for all the points, otherwise each point can be defined as a different color.

Value: An array of Color values, or null (the default) to use the Chart.js default.

Maps to the Chart.js dataset "pointBorderColor" property. An array with a single entry is sent to the client as a single color.

Example:

var line = (LineDataSet)this.chartJS31.DataSets[0];
line.PointBorderColor = new[] { Color.White };
line.PointBackgroundColor = new[] { Color.SteelBlue };
this.chartJS31.Update();

Instance member PointHoverBackgroundColor​

Color: Returns or sets the point background color when hovered. (Default: Color [Empty])

Value: The hover background Color. The default is Empty.

Maps to the Chart.js dataset "pointHoverBackgroundColor" property.

Example:

var line = (LineDataSet)this.chartJS31.DataSets[0];
line.PointHoverBackgroundColor = Color.Gold;
line.PointHoverBorderColor = Color.DarkGoldenrod;
this.chartJS31.Update();

Instance member PointHoverBorderColor​

Color: Returns or sets the point border color when hovered. (Default: Color [Empty])

Value: The hover border Color. The default is Empty.

Maps to the Chart.js dataset "pointHoverBorderColor" property.

Example:

var line = (LineDataSet)this.chartJS31.DataSets.Add("Latency");
line.Data = new object[] { 45, 52, 38 };
line.PointHoverBorderColor = Color.Black;
this.chartJS31.Update();

Instance member PointHoverRadius​

Int32[]: Returns or sets the radius of the point when hovered. One entry is the default hover radius for all points, otherwise each point can define a hover radius. (Default: System.Int32[])

Value: An array of radius values in pixels. The default is a single entry of 5.

Maps to the Chart.js dataset "pointHoverRadius" property. When the array contains a single entry the client sends it as a single value. The client expects the array to contain at least one entry.

Example:

var line = (LineDataSet)this.chartJS31.DataSets.Add("Clicks");
line.Data = new object[] { 12, 19, 7 };
line.PointHoverRadius = new[] { 8 };
this.chartJS31.Update();

Instance member PointRadius​

Int32[]: Returns or sets the radius of the point shape. If set to 0, nothing is rendered. One entry is the default radius for all points, otherwise each point can define a radius. (Default: System.Int32[])

Value: An array of radius values in pixels. The default is a single entry of 5.

Maps to the Chart.js dataset "pointRadius" property. When the array contains a single entry the client sends it as a single value. The client expects the array to contain at least one entry.

Example:

// hide the points and draw only the line.
var line = (LineDataSet)this.chartJS31.DataSets[0];
line.PointRadius = new[] { 0 };
line.PointHoverRadius = new[] { 4 };
this.chartJS31.Update();

Instance member PointStyle​

PointStyle[]: Returns or sets the style of the points on the line. One entry is the default for all points, otherwise each point can define a style. (Default: Wisej.Web.Ext.ChartJS3.PointStyle[])

Value: An array of PointStyle values. The default is a single Circle entry.

Maps to the Chart.js dataset "pointStyle" property. When the array contains a single entry the client sends it as a single value. The client expects the array to contain at least one entry.

Example:

var line = (LineDataSet)this.chartJS31.DataSets.Add("Events");
line.Data = new object[] { 3, 5, 2 };
line.PointStyle = new[] { PointStyle.Triangle, PointStyle.Star, PointStyle.RectRot };
this.chartJS31.Update();

Instance member ShowLine​

Boolean: Returns or sets whether the line between the points is drawn. (Default: True)

Value: True to draw the line; false to draw only the points. The default is true.

Maps to the Chart.js dataset "showLine" property.

Example:

// show only the points, like a scatter plot.
var samples = (LineDataSet)this.chartJS31.DataSets.Add("Samples");
samples.Data = new object[] { 4, 8, 6, 9 };
samples.ShowLine = false;
this.chartJS31.Update();

Instance member SpanGaps​

Boolean: Returns or sets whether lines are drawn between points with no or null data. (Default: False)

Value: True to draw lines across the missing points; false to break the line at points with null or NaN data. The default is false.

Maps to the Chart.js dataset "spanGaps" property.

Example:

var readings = (LineDataSet)this.chartJS31.DataSets.Add("Readings");
readings.Data = new object[] { 21.5, null, 22.8, null, 23.1 };
readings.SpanGaps = true;
this.chartJS31.Update();

Instance member Stack​

String: Returns or sets the ID of the group to which this data set belongs (when stacked, each group will be a separate stack). (Default: null)

Value: The ID of the stack group, or null (the default).

Maps to the Chart.js dataset "stack" property. The data sets are stacked only when stacking is enabled on the axes, for example with Stacked.

Example:

var online = (LineDataSet)this.chartJS31.DataSets.Add("Online");
var retail = (LineDataSet)this.chartJS31.DataSets.Add("Retail");
online.Stack = "sales";
retail.Stack = "sales";

this.chartJS31.Options.Scales.yAxes[0].Stacked = true;

Instance member Stepped​

SteppedLine: Returns or sets whether and how the line is drawn as stepped values. (Default: False)

Value: One of the SteppedLine values. The default is False.

Maps to the Chart.js dataset "stepped" property. When stepped, the line tension is ignored.

Example:

var price = (LineDataSet)this.chartJS31.DataSets.Add("Price");
price.Data = new object[] { 9.99, 9.99, 12.49, 11.99 };
price.Stepped = SteppedLine.After;
this.chartJS31.Update();