Skip to main content

OptionsScalesTicks

Namespace: Wisej.Web.Ext.ChartJS

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

Represents the options for the ticks element of the axes.

public class OptionsScalesTicks : OptionsBase

Maps to the Chart.js ticks option of an axis. Use the Ticks property to access it.

Example:

var ticks = ((LineOptions)this.chartJS1.Options).Scales.yAxes[0].Ticks;
ticks.BeginAtZero = true;
ticks.FontColor = Color.SteelBlue;

Constructors​

Instance member OptionsScalesTicks()​

Default constructor.

Example:

var ticks = new OptionsScalesTicks { Min = 0, Max = 10, StepSize = 1 };
this.chartJS1.Options.Scales.yAxes[0].Ticks = ticks;

Instance member OptionsScalesTicks(owner)​

Constructs a new instance of the OptionsScalesTicks set.

NameTypeDescription
ownerOptionsBaseThe OptionsBase set of options that owns this instance.

Example:

var yAxis = this.chartJS1.Options.Scales.yAxes[0];
var ticks = new OptionsScalesTicks(yAxis);
ticks.Reverse = true;

Properties​

Instance member AutoSkip​

Boolean: If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to MaxRotation before skipping any. Turn AutoSkip off to show all labels no matter what. (Default: True)

Value: Default is true.

Changing this property doesn't update the chart automatically; call Update to refresh it.

Example:

// show every label on the x-axis.
var ticks = ((BarOptions)this.chartJS1.Options).Scales.xAxes[0].Ticks;
ticks.AutoSkip = false;
this.chartJS1.Update();

Instance member BeginAtZero​

Boolean: If true, scale will include 0 if it is not already included. (Default: True)

Value: Default is true.

Example:

// let the y-axis start near the lowest value in the data.
var ticks = ((LineOptions)this.chartJS1.Options).Scales.yAxes[0].Ticks;
ticks.BeginAtZero = false;

Instance member Font​

Font: Font of the tick labels. (Default: null)

Value: Default is null. When not set, the getter returns the Font of the chart.

The font is converted on the client to the Chart.js fontSize, fontFamily and fontStyle tick options.

Example:

var ticks = ((LineOptions)this.chartJS1.Options).Scales.xAxes[0].Ticks;
ticks.Font = new Font("Segoe UI", 9F, FontStyle.Bold);

Instance member FontColor​

Color: Tick labels color. (Default: Color [Empty])

Value: Default is Empty. When not set, the getter returns the ForeColor of the chart.

Example:

var scales = ((LineOptions)this.chartJS1.Options).Scales;
scales.xAxes[0].Ticks.FontColor = Color.DimGray;
scales.yAxes[0].Ticks.FontColor = Color.DimGray;

Instance member Max​

Nullable<Int32>: User defined maximum number for the scale, overrides maximum value from data. (Default: null)

Value: Default is null, the maximum is calculated from the data.

Example:

// fixed 0-100 range for a percentage axis.
var ticks = ((LineOptions)this.chartJS1.Options).Scales.yAxes[0].Ticks;
ticks.Min = 0;
ticks.Max = 100;

Instance member MaxRotation​

Int32: Maximum rotation of the tick labels, in degrees. (Default: 50)

Value: Default is 50.

Maps to the Chart.js maxRotation tick option. When the labels don't fit, they are rotated up to this angle before AutoSkip skips any. Changing this property doesn't update the chart automatically; call Update to refresh it.

Example:

// never rotate the x-axis labels.
var ticks = ((LineOptions)this.chartJS1.Options).Scales.xAxes[0].Ticks;
ticks.MaxRotation = 0;
this.chartJS1.Update();

Instance member Min​

Nullable<Int32>: User defined minimum number for the scale, overrides minimum value from data. (Default: null)

Value: Default is null, the minimum is calculated from the data.

Example:

var ticks = ((BarOptions)this.chartJS1.Options).Scales.yAxes[0].Ticks;
ticks.BeginAtZero = false;
ticks.Min = -50;

Instance member MinRotation​

Int32: Minimum rotation of the tick labels, in degrees. (Default: 0)

Value: Default is 0.

Maps to the Chart.js minRotation tick option. Changing this property doesn't update the chart automatically; call Update to refresh it.

Example:

var ticks = ((BarOptions)this.chartJS1.Options).Scales.xAxes[0].Ticks;
ticks.MinRotation = 30;
ticks.MaxRotation = 90;
this.chartJS1.Update();

Instance member Mirror​

Boolean: Flips tick labels around axis, displaying the labels inside the chart instead of outside. Only applicable to vertical scales. (Default: False)

Value: Default is false.

Example:

// draw the y-axis labels inside the chart area.
var ticks = ((LineOptions)this.chartJS1.Options).Scales.yAxes[0].Ticks;
ticks.Mirror = true;

Instance member Padding​

Int32: Padding between the tick label and the axis. Only applicable to horizontal scales. (Default: 10)

Value: The padding in pixels. Default is 10.

Example:

var ticks = ((LineOptions)this.chartJS1.Options).Scales.xAxes[0].Ticks;
ticks.Padding = 20;

Instance member Reverse​

Boolean: Reverses order of tick labels. (Default: False)

Value: Default is false.

Example:

// show the highest values at the bottom of the y-axis.
var ticks = ((BarOptions)this.chartJS1.Options).Scales.yAxes[0].Ticks;
ticks.Reverse = true;

Instance member StepSize​

Nullable<Int32>: User defined fixed step size for the scale. (Default: null)

Value: Default is null.

If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.

Example:

var ticks = ((LineOptions)this.chartJS1.Options).Scales.yAxes[0].Ticks;
ticks.StepSize = 5;