Skip to main content

OptionScalesAxes

Namespace: Wisej.Web.Ext.ChartJS3

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

Represents the options for the scale axes.

public abstract class OptionScalesAxes : OptionsBase

This is the base class of OptionScalesAxesX and OptionScalesAxesY and maps to a single entry of the Chart.js 3 options.scales object.

Example:

foreach (OptionScalesAxes axis in this.chartJS31.Options.Scales.yAxes)
{
	axis.Grid.Display = false;
	axis.Ticks.Color = Color.Gray;
}
this.chartJS31.Update();

Constructors​

Instance member OptionScalesAxes()​

Default constructor.

OptionScalesAxes is abstract; this constructor is invoked by the constructors of the derived axis classes.

Example:

// OptionScalesAxes is abstract; create one of the derived axis classes.
OptionScalesAxes axis = new OptionScalesAxesY();
axis.Stacked = true;
this.chartJS31.Options.Scales.yAxes = new[] { (OptionScalesAxesY)axis };
this.chartJS31.Update();

Instance member OptionScalesAxes(owner)​

Constructs a new instance of the OptionScalesAxes set.

NameTypeDescription
ownerOptionsBaseThe OptionsBase set of options that owns this instance.

When the owner belongs to a chart of type Pie, Radar, Doughnut or PolarArea, Display is initialized to false.

Example:

var scales = this.chartJS31.Options.Scales;
OptionScalesAxes axis = new OptionScalesAxesX(scales);
axis.Display = true;

Properties​

Instance member BackgroundColor​

Color: Returns or sets the background color of the scale area. (Default: Color [Empty])

Value: Default is Empty.

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

Example:

var yAxis = this.chartJS31.Options.Scales.yAxes[0];
yAxis.BackgroundColor = Color.FromArgb(20, Color.SteelBlue);
yAxis.Update();

Instance member BarPercentage​

Single: Percent (0-1) of the available width each bar should be within the category width. (Default: 0.9)

Value: Default is 0.9. A value of 1.0 makes the bars take the whole category width.

Serialized as the barPercentage option of the scale. Note that Chart.js 3 reads barPercentage from the bar data set options instead of the scale options. Changing this property doesn't update the chart automatically; call Update to refresh it.

Example:

var xAxis = this.chartJS31.Options.Scales.xAxes[0];
xAxis.BarPercentage = 1.0F;
xAxis.CategoryPercentage = 1.0F;
this.chartJS31.Update();

Instance member CategoryPercentage​

Single: Percent (0-1) of the available width each category should be within the sample width. (Default: 0.8)

Value: Default is 0.8.

Serialized as the categoryPercentage option of the scale. Note that Chart.js 3 reads categoryPercentage from the bar data set options instead of the scale options. Setting this property updates the chart.

Example:

// leave more space between the groups of bars.
this.chartJS31.Options.Scales.xAxes[0].CategoryPercentage = 0.5F;

Instance member Display​

Boolean: If true, show the scale including grid lines, ticks, and labels.

Value: Default is true. It is initialized to false for pie, radar, doughnut and polar area charts.

Maps to the Chart.js 3 display option of the scale. Setting this property updates the chart.

Example:

// hide the x-axis completely.
this.chartJS31.Options.Scales.xAxes[0].Display = false;

Instance member Grid​

OptionsAxisGrid: Returns or sets the configuration of the axis' grid lines.

Value: An OptionsAxisGrid object with the grid line options.

Maps to the Chart.js 3 grid option of the scale (gridLines in Chart.js 2). Assigning a new instance doesn't update the chart automatically; call the chart's Update() method to refresh it.

Example:

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

Instance member Id​

String: Used to identify the scale options for multi-axes charts. (Default: "")

Value: Default is an empty string.

The value is serialized as the id field of the scale, but Chart.js 3 identifies a scale by its key in options.scales, which the client script generates from the axis index ("x0", "x1", ... and "y0", "y1", ...). Use those keys in xAxisID and yAxisID to bind a data set to an axis. Changing this property doesn't update the chart automatically.

Example:

var scales = this.chartJS31.Options.Scales;
scales.yAxes = new[] { new OptionScalesAxesY(), new OptionScalesAxesY() };
scales.yAxes[0].Id = "amount";
scales.yAxes[1].Id = "percent";
scales.yAxes[1].Position = HeaderPosition.Right;
this.chartJS31.Update();

Instance member Max​

Nullable<Int32>: Returns or sets the 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.

Maps to the Chart.js 3 max option of the scale. Setting this property updates the chart.

Example:

// show percentages on a fixed 0-100 scale.
var yAxis = this.chartJS31.Options.Scales.yAxes[0];
yAxis.Min = 0;
yAxis.Max = 100;

Instance member Min​

Nullable<Int32>: Returns or sets the 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.

Maps to the Chart.js 3 min option of the scale. Setting this property updates the chart.

Example:

var yAxis = this.chartJS31.Options.Scales.yAxes[0];
yAxis.Min = -50;
yAxis.Max = 50;

Instance member Stacked​

Boolean: When true, the bars are stacked. (Default: False)

Value: Default is false.

Maps to the Chart.js 3 stacked option of the scale. To create a stacked bar chart, set this property to true on both the x-axis and the y-axis. Setting this property updates the chart.

Example:

this.chartJS31.ChartType = ChartType.Bar;
var scales = this.chartJS31.Options.Scales;
scales.xAxes[0].Stacked = true;
scales.yAxes[0].Stacked = true;

Instance member SuggestedMax​

Nullable<Int32>: Returns or sets the adjustment used when calculating the maximum data value. (Default: null)

Value: Default is null.

Maps to the Chart.js 3 suggestedMax option of the scale. Unlike Max, the scale extends beyond this value when the data contains a larger value. Setting this property updates the chart.

Example:

// the scale reaches at least 50, or more if the data requires it.
this.chartJS31.Options.Scales.yAxes[0].SuggestedMax = 50;

Instance member SuggestedMin​

Nullable<Int32>: Returns or sets the adjustment used when calculating the minimum data value. (Default: null)

Value: Default is null.

Maps to the Chart.js 3 suggestedMin option of the scale. Unlike Min, the scale extends below this value when the data contains a smaller value. Setting this property updates the chart.

Example:

var yAxis = this.chartJS31.Options.Scales.yAxes[0];
yAxis.SuggestedMin = 0;
yAxis.SuggestedMax = 10;

Instance member Ticks​

OptionsScalesTicks: Options for the chart ticks on the axes.

Value: An OptionsScalesTicks object, created on first access.

Maps to the Chart.js 3 ticks option of the scale. Assigning a new instance doesn't update the chart automatically; call the chart's Update() method to refresh it.

Throws:

Example:

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

Instance member Time​

ScaleTime: Options for the time scale type - ignored if not a time scale type.

Value: A ScaleTime object, created on first access.

Maps to the Chart.js 3 time option of the scale. These options are used only when Type is Time; the designer serializes them only in that case. Assigning a new instance updates the chart.

Example:

var xAxis = this.chartJS31.Options.Scales.xAxes[0];
xAxis.Type = ScaleType.Time;
xAxis.Time.Unit = TimeScaleTimeUnit.month;
xAxis.Time.TooltipFormat = "MMM YYYY";

Instance member Title​

OptionsScaleTitle: Options for the title displayed along the axis.

Value: An OptionsScaleTitle object, created on first access.

Maps to the Chart.js 3 title option of the scale (scaleLabel in Chart.js 2). The title is shown only when Text is not empty. Assigning a new instance doesn't update the chart automatically; call the chart's Update() method to refresh it.

Throws:

Example:

var title = this.chartJS31.Options.Scales.xAxes[0].Title;
title.Text = "Day of the week";
title.Color = Color.DarkBlue;

Instance member Type​

ScaleType: Returns or sets the type of scale being employed. (Default: Linear)

Value: One of the ScaleType values. Default is Linear.

Maps to the Chart.js 3 type option of the scale. When the type is Time, the Time options are also used. Setting this property updates the chart.

Example:

// use a logarithmic y-axis.
this.chartJS31.Options.Scales.yAxes[0].Type = ScaleType.Logarithmic;

Inherited By​

NameDescription
OptionScalesAxesXRepresents the options for the scale X axes.
OptionScalesAxesYRepresents the options for the scale Y axes.