Skip to main content

LineDataSet

Namespace: Wisej.Web.Ext.ChartJS4.Models

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

Data set for line charts.

public class LineDataSet : ChartDataSet

Sets Type to "line" and exposes line-specific Chart.js options such as Tension, Fill, Stepped and the point styling options.

Example:

var chart = new ChartJS4 { ChartType = ChartType.Line };
chart.Labels = new[] { "Mon", "Tue", "Wed", "Thu" };
chart.DataSets.Add(new LineDataSet
{
    Label = "Visitors",
    Data = new object[] { 120, 150, 90, 180 },
    BorderColor = Color.SteelBlue,
    Tension = 0.4
});

Constructors​

Instance member LineDataSet()​

Initializes a new instance of the LineDataSet class.

Sets Type to "line".

Example:

var line = new LineDataSet();
line.Label = "Sales";
line.Data = new object[] { 3, 7, 4 };
chart.DataSets.Add(line);

Properties​

Instance member Animations​

Object: Returns or sets the per-dataset animation configuration. Accepts an object like new { y = new { duration = 2000 } }.

Value: An object (typically an anonymous type) whose properties are the animated properties (e.g. x, y, tension) and whose values are Chart.js animation configurations. The default is null. Maps to the Chart.js animations dataset option.

Overrides the chart-level Animations for this dataset only.

Example:

var line = new LineDataSet { Label = "Sales" };
line.Animations = new
{
    tension = new { duration = 1000, easing = "linear", from = 1, to = 0, loop = true }
};

Instance member BorderDash​

Object[]: Returns or sets the length and spacing of the line dashes. Refer to MDN (CanvasRenderingContext2D.setLineDash) for details.

Value: An array of numbers alternating dash and gap lengths in pixels (e.g. [5, 5]). The default is null (solid line). Maps to the Chart.js borderDash option.

Example:

var target = new LineDataSet { Label = "Target" };
target.BorderDash = new object[] { 6, 4 };

Instance member CubicInterpolationMode​

String: Returns or sets the algorithm to use when interpolating a smooth curve from the discrete data points. Accepted values: 'default' | 'monotone'. (Default: null)

Value: "default" (uses Tension) or "monotone" (preserves monotonicity of the data). The default is null (Chart.js default "default"). Maps to the Chart.js cubicInterpolationMode option.

Example:

var line = new LineDataSet { Label = "Monotone" };
line.CubicInterpolationMode = "monotone";

Instance member Fill​

Object: Returns or sets how the area under the line is filled. Accepts bool (true/false), int (dataset index), or string ('-1', 'origin', 'start', 'end', 'stack', 'shape').

Value: A Boolean, an Int32 (absolute dataset index), or a String: a relative index such as "-1" or "+1", or one of "origin" | "start" | "end" | "stack" | "shape". The default is null (no fill). Maps to the Chart.js fill option.

The fill color is taken from BackgroundColor.

Example:

var line = new LineDataSet { Label = "Area" };
line.Fill = "origin";
line.BackgroundColor = "rgba(54, 162, 235, 0.3)";

Instance member PointBorderColor​

Object: Returns or sets the border color of the points.

Value: A Color, a CSS color string, or an array of colors (one per data point). The default is null (Chart.js default). Maps to the Chart.js pointBorderColor option.

Example:

var line = new LineDataSet { Label = "Sales" };
line.PointBorderColor = Color.White;

Instance member PointHoverBackgroundColor​

Object: Returns or sets the point background color when hovered.

Value: A Color, a CSS color string, or an array of colors (one per data point). The default is null (Chart.js default). Maps to the Chart.js pointHoverBackgroundColor option.

Example:

var line = new LineDataSet { Label = "Sales" };
line.PointHoverBackgroundColor = "#ff6384";

Instance member PointHoverRadius​

Object: Returns or sets the point radius when hovered.

Value: A number in pixels, or an array with one value per data point. The default is null (Chart.js default). Maps to the Chart.js pointHoverRadius option.

Example:

var line = new LineDataSet { Label = "Sales" };
line.PointRadius = 4;
line.PointHoverRadius = 8;

Instance member PointRadius​

Object: Returns or sets the radius of the point shape. Accepts a number or array of numbers. (Default: 5)

Value: A number in pixels, or an array with one radius per data point. The property is null unless set (the designer default is 5). Set to 0 to hide the points. Maps to the Chart.js pointRadius option.

Example:

var line = new LineDataSet { Label = "Sales" };
line.PointRadius = new object[] { 3, 3, 8, 3 };

Instance member PointStyle​

Object: Returns or sets the style of the points. Accepts a string or array of strings ('circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle', 'false').

Value: A point style string, false to hide the points, or an array with one style per data point. The default is null (Chart.js default "circle"). Maps to the Chart.js pointStyle option.

Example:

var line = new LineDataSet { Label = "Sales" };
line.PointStyle = "rectRot";
line.PointRadius = 6;

Instance member Radius​

Object: Returns or sets the radius of the point shape for all points in the dataset. This is a shorthand for PointRadius when a single value is needed. (Default: 5)

Value: A number in pixels. The property is null unless set (the designer default is 5). Maps to the Chart.js radius option.

Unlike most other options, this property is written to the dataset JSON even when null.

Example:

var line = new LineDataSet { Label = "Sales" };
line.Radius = 0; // hide all points

Instance member SpanGaps​

Object: Returns or sets whether lines are drawn across missing data. If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. (Default: null)

Value: A Boolean or a number (maximum gap to span, in scale units). The default is null (Chart.js default false). Maps to the Chart.js spanGaps option.

Example:

var line = new LineDataSet { Label = "Readings" };
line.Data = new object[] { 5, null, 7, 9 };
line.SpanGaps = true;

Instance member Stepped​

Object: Returns or sets whether the line is drawn as a stepped line. Accepts bool or one of 'before', 'after', 'middle'.

Value: true (same as "before"), false, or one of "before" | "after" | "middle". The default is null (not stepped). Maps to the Chart.js stepped option.

When a stepped line is enabled, Tension is ignored.

Example:

var line = new LineDataSet { Label = "Steps" };
line.Stepped = "middle";

Instance member Tension​

Double: Returns or sets the Bezier curve tension of the line (0 for straight lines). (Default: 0)

Value: A Double, typically between 0 and 1. The default is 0.0 (straight lines). Maps to the Chart.js tension option.

Ignored when CubicInterpolationMode is "monotone" or when Stepped is enabled.

Example:

var line = new LineDataSet { Label = "Smooth" };
line.Tension = 0.4;

Methods​

Instance member ResetFill()​

Resets the Fill property to its default value of null.

Used by the Visual Studio designer when the user resets the property.

Example:

line.ResetFill();

Instance member ResetTension()​

Resets the Tension property to its default value of 0.0.

Used by the Visual Studio designer when the user resets the property.

Example:

line.ResetTension();

Instance member ShouldSerializeFill()​

Determines whether the Fill property should be serialized by the designer.

Returns: Boolean. true if Fill is not null; otherwise false.

Used by the Visual Studio designer to decide whether to generate code for the property.

Example:

if (line.ShouldSerializeFill())
    line.ResetFill();

Instance member ShouldSerializeTension()​

Determines whether the Tension property should be serialized by the designer.

Returns: Boolean. true if Tension is not 0.0 (its default value); otherwise false.

Used by the Visual Studio designer to decide whether to generate code for the property.

Example:

if (line.ShouldSerializeTension())
    line.ResetTension();