Skip to main content

OptionsAxisGrid

Namespace: Wisej.Web.Ext.ChartJS3

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

Specifies the grid line configuration for each axis.

public class OptionsAxisGrid : OptionsBase

An instance of this class is exposed by the Grid property of each axis in xAxes and yAxes and maps to the grid configuration of the Chart.js 3 axis. The property setters call Update, but the default grid instance of an axis is not attached to the chart: call Update() on the control to apply the changes.

Example:

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

Constructors​

Instance member OptionsAxisGrid()​

Default constructor.

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

Example:

var grid = new OptionsAxisGrid();
grid.Display = false;
this.chartJS31.Options.Scales.xAxes[0].Grid = grid;
this.chartJS31.Update();

Instance member OptionsAxisGrid(owner)​

Constructs a new instance of the OptionsAxisGrid set.

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

When the owner is attached to a ChartJS3 control, changing the properties of this instance refreshes the chart automatically.

Example:

var axis = this.chartJS31.Options.Scales.yAxes[0];
var grid = new OptionsAxisGrid(axis);
grid.LineWidth = 2;
axis.Grid = grid;
this.chartJS31.Update();

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.

Maps to the grid.borderDash option of Chart.js. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

// 5px dash followed by a 3px gap.
this.chartJS31.Options.Scales.yAxes[0].Grid.BorderDash = new[] { 5, 3 };
this.chartJS31.Update();

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. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

var grid = this.chartJS31.Options.Scales.xAxes[0].Grid;
grid.BorderDash = new[] { 6, 4 };
grid.BorderDashOffset = 2F;
this.chartJS31.Update();

Instance member Circular​

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

Value: true to draw circular grid lines; false (default) to draw polygonal grid lines.

Applies only to the radial scale used by Radar charts. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

this.chartJS31.ChartType = ChartType.Radar;
this.chartJS31.Options.Scales.yAxes[0].Grid.Circular = true;
this.chartJS31.Update();

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.

When the array contains more than one color, the first color applies to the first grid line, the second to the second grid line and so on. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

// highlight the first grid line and use light gray for the others.
this.chartJS31.Options.Scales.yAxes[0].Grid.Color = new[]
{
	Color.Red, Color.LightGray, Color.LightGray, Color.LightGray, Color.LightGray
};
this.chartJS31.Update();

Instance member Display​

Boolean: Returns or sets whether the grid lines are displayed for the axis. (Default: True)

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

Hiding the grid lines doesn't hide the axis ticks and labels; use Display to hide the whole axis. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

// remove the vertical grid lines.
this.chartJS31.Options.Scales.xAxes[0].Grid.Display = false;
this.chartJS31.Update();

Instance member DrawBorder​

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

Value: The default is true.

Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

var grid = this.chartJS31.Options.Scales.yAxes[0].Grid;
grid.DrawBorder = false;
this.chartJS31.Update();

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. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

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

this.chartJS31.Update();

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.

Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

this.chartJS31.Options.Scales.xAxes[0].Grid.DrawTicks = false;
this.chartJS31.Update();

Instance member LineWidth​

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

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

Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

var grid = this.chartJS31.Options.Scales.yAxes[0].Grid;
grid.LineWidth = 2;
grid.Color = new[] { Color.Gainsboro };
this.chartJS31.Update();

Instance member OffsetGridLines​

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

Value: The default is false.

The value is serialized as grid.offsetGridLines, which is the Chart.js 2 name of the option; Chart.js 3 uses grid.offset and ignores this value. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

this.chartJS31.ChartType = ChartType.Bar;
this.chartJS31.Options.Scales.xAxes[0].Grid.OffsetGridLines = true;
this.chartJS31.Update();

Instance member TickMarkLength​

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

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

The value is serialized as grid.tickMarkLength, which is the Chart.js 2 name of the option; Chart.js 3 uses grid.tickLength and ignores this value. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

this.chartJS31.Options.Scales.xAxes[0].Grid.TickMarkLength = 5;
this.chartJS31.Update();

Instance member Z​

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

Value: The default is 0.

Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

// draw the grid lines on top of the bars.
this.chartJS31.ChartType = ChartType.Bar;
this.chartJS31.Options.Scales.yAxes[0].Grid.Z = 1;
this.chartJS31.Update();

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; the default is null.

The zero line options were removed in Chart.js 3: the value is serialized as grid.zeroLineBorderDash and ignored by Chart.js 3. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

this.chartJS31.Options.Scales.yAxes[0].Grid.ZeroLineBorderDash = new[] { 2, 2 };
this.chartJS31.Update();

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.

The zero line options were removed in Chart.js 3: the value is serialized as grid.zeroLineBorderDashOffset and ignored by Chart.js 3. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

var grid = this.chartJS31.Options.Scales.yAxes[0].Grid;
grid.ZeroLineBorderDash = new[] { 4, 4 };
grid.ZeroLineBorderDashOffset = 2F;
this.chartJS31.Update();

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.

The zero line options were removed in Chart.js 3: the value is serialized as grid.zeroLineColor and ignored by Chart.js 3. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

this.chartJS31.Options.Scales.yAxes[0].Grid.ZeroLineColor = Color.Black;
this.chartJS31.Update();

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.

The zero line options were removed in Chart.js 3: the value is serialized as grid.zeroLineWidth and ignored by Chart.js 3. Setting this property calls Update, which refreshes the chart only when this instance is attached to a chart. The default grid instance created by the axis is not attached, so call Update() on the ChartJS3 control after changing it.

Example:

var grid = this.chartJS31.Options.Scales.yAxes[0].Grid;
grid.ZeroLineWidth = 2;
grid.ZeroLineColor = Color.DimGray;
this.chartJS31.Update();