Display Day Names on Ignition Perspective XY Chart Gantt X-Axis

Overview

The Perspective XY Chart component in Inductive Automation's Ignition 8.1 platform wraps Apache ECharts and exposes its configuration through JSON-style properties on a component instance. One of the supported layouts is the Gantt chart, in which horizontal bars span a time axis at the top and categorical lanes sit on the vertical axis. The official example titled XY Chart Example - Gantt Chart in the Ignition User Manual demonstrates this pattern end-to-end with custom renderItem series entries.

The typical user complaint with the stock Gantt configuration is that the X-axis displays every timestamp in the underlying dataset: "Monday Monday Monday Tuesday Tuesday Wednesday ..." appearing at every bar boundary instead of once per calendar day. This happens because the default time-axis tick generator emits labels for every numeric date value in the data stream. Two distinct problems must be solved independently:

1. Token selection - replace numeric dates with the day-of-week token (EEEE for "Monday", EEE for "Mon") via the props.xAxes.0.date.format binding.
2. Tick density - force the axis to emit exactly one label per calendar day using splitNumber or minInterval on the same axis object.

This reference documents the binding paths, supported format tokens, tick-spacing math, and four field-proven configurations for production SCADA dashboards.

Prerequisites and Component Setup

• Ignition 8.1.x (Perspective module) or newer, with a licensed gateway running Perspective.
• A Perspective View with an XY Chart component dropped from the Chart Palette on the canvas.
• A Tag or DB-backed dataset with three columns per record: name (lane label), startTime (epoch ms or ISO string), and endTime (epoch ms or ISO string).
• Read access to the XY Chart Example - Gantt Chart page in the Ignition User Manual.

Confirm Perspective module version: in the Gateway Web Interface, navigate to Configure > Platforms > Perspective and check the installed module build. Any 8.1+ release supports the bindings described below.

Gantt Chart Data Model in Perspective

A Gantt series in the Perspective XY Chart is composed of three logical layers. The data binding supplies the values; the axis props define the labeling; the custom series renders the bars.

A minimal bar series payload looks like:

{
  "name": "Tasks",
  "type": "custom",
  "renderItem": "function(params, api) { ... }",
  "data": [
    ["Lane-A", 1716240000000, 1716412800000],
    ["Lane-B", 1716326400000, 1716502400000]
  ]
}

The numeric pair inside each array is the start and end of the bar in epoch milliseconds. The lane label is consumed by the y-axis category lookup, not by the time axis. This separation is critical: binding the day-name format to the x-axis format string will not affect the y-axis text.

Time Axis and Date Format Reference

The X-axis entry must use type: "time" for Gantt rendering. Ignition exposes date-axis formatting under the date sub-object on the axis, which translates to the binding path props.xAxes.0.date.*.

Format tokens follow the Java DateTimeFormatter symbol set, which Ignition adopts for chart axis labels. Token count must be quoted: characters inside single quotes are treated as literals (for example, 'Day 'EEEE yields Day Monday). The axis-label format string does not need to be a fully qualified date; using only EEEE returns the bare day name.

Configuring Day Names on the X-Axis

Open the XY Chart in the Perspective Designer. Click the chart to open the property editor and expand the xAxes array. Set the first axis to type = "time", then locate date.format (binding path props.xAxes.0.date.format). Enter one of the following values:

Option A - Full Day Name

Renders: Monday, Tuesday, Wednesday ...

Option B - Abbreviated Day Name

Renders: Mon, Tue, Wed ...

Option C - Day Name with Date

Renders: Mon 20 May, Tue 21 May ...

For dynamic binding rather than a static string, point props.xAxes.0.date.format to a Tag or a session custom property. A typical expression-binding path looks like {[~]Configuration/Chart/DateFormat}, which lets operators toggle the display in production without a project save.

Eliminating Duplicate Daily Labels

Selecting the right format token solves the spelling of the label, but the axis can still emit the same label for every bar in the dataset. The fix is to constrain how many ticks the axis auto-generates. Three complementary knobs exist.

Knob 1 - splitNumber

splitNumber suggests how many segments the axis should aim for across its visible domain. Pairing splitNumber with a day-level format token yields exactly the desired density for fixed-range charts.

{
  "xAxes": [
    {
      "type": "time",
      "splitNumber": 7,
      "date": { "format": "EEEE" }
    }
  ]
}

For a one-week Gantt the chart will draw roughly seven labels: Monday, Tuesday ... Sunday. For a thirty-day project, set splitNumber = 30. Treat splitNumber as a hint; ECharts may pick a nearby nice interval, so use it only when the dataset span is known.

Knob 2 - minInterval

minInterval hard-locks the smallest tick spacing in milliseconds. Forcing one-day intervals removes duplicate day labels regardless of how many data points fall within a 24-hour window.

{
  "type": "time",
  "minInterval": 86400000,
  "date": { "format": "EEEE" }
}

One day equals 86,400,000 ms. Setting minInterval = 86400000 guarantees no two ticks will land on the same calendar day, eliminating the "Monday Monday Monday" symptom outright. This is the most reliable field setting for production SCADA dashboards with variable data density.

Knob 3 - Data Source Hints

When the chart consumes a SQL query or Tag historian, round each startTime to the day boundary. Pre-aggregation reduces the label count even before the chart engine runs.

SELECT
  name,
  FLOOR(startTime / 86400000) * 86400000 AS startTime,
  CEIL(endTime  / 86400000) * 86400000 AS endTime
FROM schedule_data

Combine with Knob 1 or 2 for charts that must remain correct under data growth.

Custom Formatters and Locale Handling

For dashboards deployed in multilingual facilities, day names should follow the user's session locale. Ignition's default chart date format pulls the JVM default locale (often English). Switch to a function-based formatter on props.xAxes.0.axisLabel.formatter when the day label needs to read in Spanish, German, or Chinese.

function formatter(value, index) {
  var d = new Date(value);
  var locale = com.inductiveautomation.ignition.common.BasicLocalizedString
    .getLocale() || 'en-US';
  return d.toLocaleDateString(locale, { weekday: 'long' });
}

Provide a fallback string when the function returns null or empty. Wrap the call in try/catch to keep the chart rendering even if the locale is unsupported on the host JVM:

function safeFormatter(value, index) {
  try {
    return new Date(value)
      .toLocaleDateString('de-DE', { weekday: 'short' });
  } catch (e) {
    return new Date(value)
      .toLocaleDateString('en-US', { weekday: 'short' });
  }
}

Function formatters coexist with date.format; the function takes priority if both are present. Mixing them is a common foot-gun - use one or the other, not both.

Y-Axis Lanes and Series Configuration

While the day-name question targets the X-axis, the Gantt chart is unusable without correct lane configuration on the Y-axis. The Y-axis must use type: "category", and its data array must list every lane that any bar can occupy. Bind props.yAxes.0.data to a Tag, expression, or array property and ensure every name value in the series payload is a member of that array.

A complete custom series payload, modeled on the official Gantt example, is:

{
  "type": "custom",
  "renderItem": "params, api => { ... bar drawing ... }",
  "encode": { "x": [1, 2], "y": 0 },
  "data": [
    ["Line-A", 1716240000000, 1716412800000],
    ["Line-B", 1716326400000, 1716502400000]
  ]
}

The 0-indexed slot of every data tuple is the lane label consumed by the y-axis, slots 1 and 2 are start and end timestamps consumed by the x-axis range. Misaligning the encode map is the most frequent cause of bars missing from a Gantt chart.

Verification and Troubleshooting

After binding the format string and applying a tick-spacing setting, run this verification sequence:

1. Reload the Perspective View in a browser session. Open Developer Tools and confirm no JavaScript errors appear in the console.
2. Inspect the rendered SVG/Canvas. The x-axis tick count should equal the number of unique calendar days in the dataset.
3. Hover over a tick label. The text should match the format token (Monday for

   EEEE).

4. Switch the Perspective session locale (where supported) and confirm the day name updates when using a function-based formatter.
5. Stress test with a dense dataset (500+ bars across 90 days). The axis must still emit exactly 90 labels, not more.

Troubleshooting Matrix

For additional component-level concerns (custom render errors, projection sizing, server session concerns) refer to the XY Chart Example - Gantt Chart page and the surrounding XY Chart section in the Ignition User Manual. For project-management style Gantt charts outside Ignition, the Microsoft Project desktop Bar Styles reference documents a similar layout for non-browser contexts.

FAQ