Improvements to DevExtreme HTML5 Chart Date/Time Axis (v17.2)

This post covers the DevExtreme Chart widget, which is available for jQuery, as an Angular component, ASP.NET MVC and ASP.NET Core MVC controls, and as a Knockout binding.

The date/time axis has been one of the weak points of the otherwise robust DevExtreme Chart control. Some customers reported issues with the generation of tick marks at the correct intervals, or with the formatting of tick labels. It was time for us to re-evaluate and improve our implementation, and we have now completed this work for v17.2.

Tick Mark Generation

Until now, the tick mark generation mechanism for date/time-scales was inherited from the numeric scale, which turned out to be a terrible idea. Axis label intervals were calculated in milliseconds, producing ticks in awkward positions, for instance at 29 days and 12 hours instead of 1 month, or at 6 days instead of a week.

Now the tick interval is calculated so that labels always show the start of reasonable date/time intervals: the first day of a week, month or year, the start of a day, the top of an hour, etc.

Axis Auto-Formatting

Before v17.2, Axis labels were generated in a straightforward manner similar to tick marks, using a single format for all of them. As a result, there were few tick labels with long text.

Now, the dxChart widget carefully chooses an axis label format for each label individually.

Label auto-formatting is used in numeric scales, too, in which case the widget chooses one of the “large number” formats. In addition, you can set up a numeric axis to show integer values exclusively.

Weekend Skipping

If your dataset contains entries for workdays only, you may want to exclude weekends and holidays from the axis. This is now possible using the options holidays and workWeek (optionally) and then setting workdaysOnly to true:

$('#chart').dxChart({
  ...
  argumentAxis: {
    // specify holidays to exclude
    holidays: [
      new Date(2017, 11, 25),
      new Date(2017, 11, 26)
    ],
    // specify which days are workdays (skipping Mondays in this example):
    workWeek: [2, 3, 4, 5],
    // activate the skipping:
    workdaysOnly: true
  }
  ...
});

Try it

A beta of v17.2 is available right now via npm:

npm i devextreme@17.2.2-pre-beta

Please let us know your thoughts about these new features!