Skip to main content

OptionsScalesTicks

Namespace: Wisej.Web.Ext.ChartJS3

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

Represents the options for the ticks element of the axes.

public class OptionsScalesTicks : OptionsBase

Maps to the Chart.js 3 ticks option of a scale. Use the Ticks property to access it.

Example:

var ticks = this.chartJS31.Options.Scales.yAxes[0].Ticks;
ticks.StepSize = 10;
ticks.Color = Color.SteelBlue;

Constructors​

Instance member OptionsScalesTicks()​

Default constructor.

Example:

var ticks = new OptionsScalesTicks();
ticks.Reverse = true;
this.chartJS31.Options.Scales.yAxes[0].Ticks = ticks;
this.chartJS31.Update();

Instance member OptionsScalesTicks(owner)​

Constructs a new instance of the OptionsScalesTicks set.

NameTypeDescription
ownerOptionsBaseThe OptionsBase set of options that owns this instance.

Example:

var xAxis = this.chartJS31.Options.Scales.xAxes[0];
var ticks = new OptionsScalesTicks(xAxis);
ticks.AutoSkip = false;
xAxis.Ticks = ticks;
this.chartJS31.Update();

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.

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

Example:

// show every label, even when they overlap.
var ticks = this.chartJS31.Options.Scales.xAxes[0].Ticks;
ticks.AutoSkip = false;
this.chartJS31.Update();

Instance member BeginAtZero​

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

Value: Default is true.

Serialized as ticks.beginAtZero. Note that Chart.js 3 reads the beginAtZero option from the scale options instead of the ticks options; use Min or SuggestedMin to force the scale to start at 0. Setting this property updates the chart.

Example:

var yAxis = this.chartJS31.Options.Scales.yAxes[0];
yAxis.Ticks.BeginAtZero = false;
yAxis.SuggestedMin = 0;

Instance member Color​

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

Value: When not set, returns the ForeColor of the chart control.

Maps to the Chart.js 3 ticks.color option. Setting this property updates the chart.

Example:

var scales = this.chartJS31.Options.Scales;
scales.xAxes[0].Ticks.Color = Color.DarkSlateGray;
scales.yAxes[0].Ticks.Color = Color.DarkSlateGray;

Instance member Font​

Font: Returns or sets the font of the tick labels.

Value: When not set, returns the Font of the chart control.

Maps to the Chart.js 3 ticks.font option; the client script converts the font to the Chart.js font object (size, family and style). Setting this property updates the chart.

Example:

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

Instance member MaxRotation​

Int32: Returns or sets the maximum rotation of the tick labels, in degrees. (Default: 50)

Value: Default is 50.

Maps to the Chart.js 3 ticks.maxRotation option, which applies only to horizontal scales. Labels are rotated up to this angle, when needed, before being skipped. Changing this property doesn't update the chart automatically; call Update to refresh it.

Example:

// never rotate the labels.
var ticks = this.chartJS31.Options.Scales.xAxes[0].Ticks;
ticks.MaxRotation = 0;
this.chartJS31.Update();

Instance member MinRotation​

Int32: Returns or sets the minimum rotation of the tick labels, in degrees. (Default: 0)

Value: Default is 0.

Maps to the Chart.js 3 ticks.minRotation option, which applies only to horizontal scales. Changing this property doesn't update the chart automatically; call Update to refresh it. See also LabelRotation.

Example:

var ticks = this.chartJS31.Options.Scales.xAxes[0].Ticks;
ticks.MinRotation = 30;
ticks.MaxRotation = 90;
ticks.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.

Maps to the Chart.js 3 ticks.mirror option. Setting this property updates the chart.

Example:

// draw the y-axis labels inside the chart area.
this.chartJS31.Options.Scales.yAxes[0].Ticks.Mirror = true;

Instance member Padding​

Int32: Returns or sets the padding between the tick labels and the axis, in pixels. (Default: 10)

Value: Default is 10.

Maps to the Chart.js 3 ticks.padding option. Setting this property updates the chart.

Example:

this.chartJS31.Options.Scales.xAxes[0].Ticks.Padding = 4;

Instance member Reverse​

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

Value: Default is false.

Serialized as ticks.reverse. Note that Chart.js 3 reads the reverse option from the scale options instead of the ticks options. Setting this property updates the chart.

Example:

// show the highest values at the bottom.
this.chartJS31.Options.Scales.yAxes[0].Ticks.Reverse = true;

Instance member StepSize​

Nullable<Int32>: Returns or sets the 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. Maps to the Chart.js 3 ticks.stepSize option. Setting this property updates the chart.

Example:

var yAxis = this.chartJS31.Options.Scales.yAxes[0];
yAxis.Min = 0;
yAxis.Max = 100;
yAxis.Ticks.StepSize = 20;