Skip to main content

OptionsAxisGridLines

Namespace: Wisej.Web.Ext.ChartJS

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

Specifies the grid line configuration for each axis.

public class OptionsAxisGridLines : OptionsBase

An instance of this class is exposed by the GridLines property of each axis in xAxes and yAxes and maps to the gridLines configuration of the Chart.js axis.

Example:

var gridLines = this.chartJS1.Options.Scales.yAxes[0].GridLines;
gridLines.Color = new[] { Color.LightGray };
gridLines.BorderDash = new[] { 4, 2 };
gridLines.DrawTicks = false;
this.chartJS1.Update();

Constructors​

Instance member OptionsAxisGridLines()​

Default constructor.

Creates a set of grid line options that is not yet attached to an owner.

Example:

var gridLines = new OptionsAxisGridLines();
gridLines.Display = false;
this.chartJS1.Options.Scales.xAxes[0].GridLines = gridLines;
this.chartJS1.Update();

Instance member OptionsAxisGridLines(owner)​

Constructs a new instance of the OptionsAxisGridLines set.

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

Throws:

Example:

var axis = this.chartJS1.Options.Scales.yAxes[0];
var gridLines = new OptionsAxisGridLines(axis);
gridLines.LineWidth = 2;
axis.GridLines = gridLines;

Properties​

Instance member BorderDash​

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

Value: An array of alternating dash and gap lengths in pixels; null (default) draws solid lines.

Example:

// 5px dash followed by a 3px gap.
this.chartJS1.Options.Scales.yAxes[0].GridLines.BorderDash = new[] { 5, 3 };

Instance member BorderDashOffset​

Single: Returns or sets the offset for line dashes. See lineDashOffset. (Default: 0)

Value: The dash offset in pixels. The default is 0.

Only has a visible effect when BorderDash is set.

Example:

var gridLines = this.chartJS1.Options.Scales.xAxes[0].GridLines;
gridLines.BorderDash = new[] { 6, 4 };
gridLines.BorderDashOffset = 2F;

Instance member Circular​

Boolean: Returns or sets whether grid lines are circular (on radar chart only). (Default: False)

Value: true to draw circular grid lines; false (default) to draw straight polygon segments.

Example:

this.chartJS1.ChartType = ChartType.Radar;
this.chartJS1.Options.Scales.yAxes[0].GridLines.Circular = true;

Instance member Color​

Color[]: Returns or sets the colors of the grid lines. (Default: null)

Value: An array of colors; null (default) uses the Chart.js default color.

If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.

Example:

// alternate two colors on the first grid lines.
this.chartJS1.Options.Scales.yAxes[0].GridLines.Color = new[]
{
	Color.Gray, Color.LightGray, Color.Gray, Color.LightGray
};

Instance member Display​

Boolean: Shows or hides the grid lines for the specified axis. (Default: True)

Value: true (default) to show the grid lines; false to hide them.

Example:

// hide the vertical grid lines, keep the horizontal ones.
this.chartJS1.Options.Scales.xAxes[0].GridLines.Display = false;
this.chartJS1.Options.Scales.yAxes[0].GridLines.Display = true;

Instance member DrawBorder​

Boolean: Returns or sets whether to draw the border at the edge between the axis and the chart area. (Default: True)

Value: The default is true.

Example:

this.chartJS1.Options.Scales.yAxes[0].GridLines.DrawBorder = false;

Instance member DrawOnChartArea​

Boolean: Returns or sets whether to draw lines on the chart area inside the axis lines. (Default: True)

Value: The default is true.

This is useful when there are multiple axes and you need to control which grid lines are drawn.

Example:

// draw the grid only for the first y axis.
var yAxes = this.chartJS1.Options.Scales.yAxes;
for (var i = 1; i < yAxes.Length; i++)
	yAxes[i].GridLines.DrawOnChartArea = false;

Instance member DrawTicks​

Boolean: Returns or sets whether to draw lines beside the ticks in the axis area beside the chart. (Default: True)

Value: The default is true.

The length of the tick lines is set by TickMarkLength.

Example:

this.chartJS1.Options.Scales.xAxes[0].GridLines.DrawTicks = false;

Instance member LineWidth​

Int32: Returns or sets the stroke width of grid lines. (Default: 1)

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

Example:

this.chartJS1.Options.Scales.yAxes[0].GridLines.LineWidth = 2;

Instance member OffsetGridLines​

Boolean: Returns or sets whether grid lines will be shifted to be between labels. (Default: False)

Value: The default is false.

Chart.js sets this option to true by default on the category axis of bar charts.

Example:

this.chartJS1.ChartType = ChartType.Bar;
this.chartJS1.Options.Scales.xAxes[0].GridLines.OffsetGridLines = true;

Instance member TickMarkLength​

Int32: Returns or sets the length in pixels that the grid lines will draw into the axis area. (Default: 10)

Value: The length in pixels. The default is 10.

Only applies when DrawTicks is true.

Example:

var gridLines = this.chartJS1.Options.Scales.xAxes[0].GridLines;
gridLines.DrawTicks = true;
gridLines.TickMarkLength = 5;

Instance member Z​

Int32: Returns or sets the z-index of the grid line layer. Values <= 0 are drawn under datasets, > 0 on top. (Default: 0)

Value: The default is 0.

The z grid line option was introduced in Chart.js 2.8; the Chart.js 2.7.2 library bundled with this extension ignores it.

Example:

// draw the grid lines on top of the datasets.
this.chartJS1.Options.Scales.yAxes[0].GridLines.Z = 1;

Instance member ZeroLineBorderDash​

Int32[]: Returns or sets the length and spacing of dashes of the grid line for the first index (index 0). See setLineDash. (Default: null)

Value: An array of alternating dash and gap lengths in pixels; null (default) draws a solid line.

Example:

var gridLines = this.chartJS1.Options.Scales.yAxes[0].GridLines;
gridLines.ZeroLineColor = Color.Black;
gridLines.ZeroLineBorderDash = new[] { 8, 4 };

Instance member ZeroLineBorderDashOffset​

Single: Returns or sets the offset for line dashes of the grid line for the first index (index 0). See lineDashOffset. (Default: 0)

Value: The dash offset in pixels. The default is 0.

Only has a visible effect when ZeroLineBorderDash is set.

Example:

var gridLines = this.chartJS1.Options.Scales.yAxes[0].GridLines;
gridLines.ZeroLineBorderDash = new[] { 4, 4 };
gridLines.ZeroLineBorderDashOffset = 4F;

Instance member ZeroLineColor​

Color: Returns or sets the stroke color of the grid line for the first index (index 0). (Default: Color [Empty])

Value: The default is Empty, which uses the Chart.js default color.

Example:

// highlight the zero line of a chart with negative values.
this.chartJS1.Options.Scales.yAxes[0].GridLines.ZeroLineColor = Color.Red;
this.chartJS1.Options.Scales.yAxes[0].GridLines.ZeroLineWidth = 2;

Instance member ZeroLineWidth​

Int32: Returns or sets the stroke width of the grid line for the first index (index 0). (Default: 1)

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

Example:

this.chartJS1.Options.Scales.yAxes[0].GridLines.ZeroLineWidth = 3;