Skip to main content

ScaleTime

Namespace: Wisej.Web.Ext.ChartJS3

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

Options used when the axis is a time scale.

public class ScaleTime : OptionsBase

An instance of this class is exposed by the Time property of each axis in xAxes and yAxes and maps to the time configuration of the Chart.js 3 axis. The options are serialized only when the axis Type is Time. The dates are parsed and formatted using the Moment.js library loaded by the control.

Example:

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

Constructors​

Instance member ScaleTime()​

Constructs a new instance.

Creates a set of time scale options that is not attached to an owner.

Example:

var time = new ScaleTime();
time.Unit = TimeScaleTimeUnit.month;
this.chartJS31.Options.Scales.xAxes[0].Type = ScaleType.Time;
this.chartJS31.Options.Scales.xAxes[0].Time = time;

Instance member ScaleTime(owner)​

Constructs a new instance of the ScaleTime set.

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

Example:

var xAxis = this.chartJS31.Options.Scales.xAxes[0];
var time = new ScaleTime(xAxis);
time.Unit = TimeScaleTimeUnit.week;
xAxis.Type = ScaleType.Time;
xAxis.Time = time;

Properties​

Instance member DisplayFormats​

Object: Returns or sets how the different time units are formatted on the axis ticks. (Default: null)

Value: An object whose property names are the time units (i.e. day, month) and values are Moment.js format strings; null (default) uses the Chart.js defaults.

The object is serialized as-is to the time.displayFormats option of Chart.js; an anonymous type is the simplest way to specify it. Setting this property calls Update to refresh the chart.

Example:

var time = this.chartJS31.Options.Scales.xAxes[0].Time;
time.DisplayFormats = new
{
	day = "DD/MM",
	month = "MMM YY"
};

Instance member Parser​

String: Returns or sets a custom format to be used by Moment.js to parse the dates. (Default: "")

Value: A Moment.js format string. The default is an empty string, which lets Moment.js detect the format.

Use it when the data values are strings in a format that Moment.js cannot recognize automatically. Setting this property calls Update to refresh the chart.

Example:

var xAxis = this.chartJS31.Options.Scales.xAxes[0];
xAxis.Type = ScaleType.Time;
xAxis.Time.Parser = "DD/MM/YYYY";
this.chartJS31.Labels = new[] { "01/03/2024", "02/03/2024", "03/03/2024" };

Instance member Round​

Nullable<TimeScaleTimeUnit>: Returns or sets the unit to which the dates are rounded (to the start of the unit). (Default: null)

Value: One of the TimeScaleTimeUnit values, or null (default) to disable rounding.

Maps to the time.round option of Chart.js. Setting this property calls Update to refresh the chart.

Example:

// round all the timestamps to the start of the hour.
var xAxis = this.chartJS31.Options.Scales.xAxes[0];
xAxis.Type = ScaleType.Time;
xAxis.Time.Round = TimeScaleTimeUnit.hour;

Instance member TooltipFormat​

String: Returns or sets the Moment.js format string used to display the dates in the tooltips. (Default: "")

Value: A Moment.js format string. The default is an empty string, which uses the Chart.js default.

See https://momentjs.com/docs/#/displaying/format/ for the format tokens. Setting this property calls Update to refresh the chart.

Example:

var xAxis = this.chartJS31.Options.Scales.xAxes[0];
xAxis.Type = ScaleType.Time;
xAxis.Time.TooltipFormat = "ddd, MMM D YYYY h:mm a";

Instance member Unit​

Nullable<TimeScaleTimeUnit>: Returns or sets the time unit used for the ticks of the scale. (Default: null)

Value: One of the TimeScaleTimeUnit values, or null (default) to let Chart.js determine the most appropriate unit from the data.

Maps to the time.unit option of Chart.js. Setting this property calls Update to refresh the chart.

Example:

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

Instance member UnitStepSize​

Int32: Returns or sets the number of units between grid lines. (Default: 1)

Value: The default is 1.

The value is serialized as time.unitStepSize, which is the Chart.js 2 name of the option; Chart.js 3 uses time.stepSize and ignores this value. Setting this property calls Update to refresh the chart.

Example:

// a tick every 15 minutes.
var time = this.chartJS31.Options.Scales.xAxes[0].Time;
time.Unit = TimeScaleTimeUnit.minute;
time.UnitStepSize = 15;