Configuring Carbon Charts for Sorted Time-Series Data and Label Aggregation

Useful Answer: Enable Sorting and Know Label Aggregation

When rendering time‑series data in Carbon, always set the sort option on the X‑axis and be aware that Carbon automatically hides labels when the available space per label drops below ~20 px. This prevents overlapping labels and ensures points are drawn in the correct order.

Worked Configuration Example

Below is a minimal example that shows how to configure a Carbon chart with sorted data and the default label aggregation behavior.

new Carbon.Chart('#chart-container', {
  data: {
    datasets: [{
      data: getSortedTimeSeries(), // array of numeric values in chronological order
      label: 'Metric'
    }],
    labels: getTimeLabels() // matching array of date strings, already sorted
  },
  options: {
    title: { text: 'Sorted Time‑Series with Label Aggregation' },
    scales: {
      xAxes: [{
        type: 'time',
        sort: true // ensures internal processing receives ordered points
      }]
    }
  }
});

Where to run: In any browser console or module bundler after importing Carbon. Permissions: Standard JavaScript execution. Expected check: The chart renders without missing points; open the browser devtools and inspect the SVG text elements – labels disappear only when the computed width per label falls below ~20 px.

How the Mechanism Works

Carbon’s internal processor first normalizes the input arrays. If sort: true is set on the X‑axis, the processor sorts the data points by their timestamp before passing them to the layout engine. After layout, the label‑aggregation step measures the pixel width allocated for each label; when that width is under the 20 px threshold, the label is hidden to avoid overlap. This step happens after sorting, so the hidden labels correspond to the correct data points.

Limits and Common Mistakes

• Limit: Label aggregation is purely visual; the underlying data points remain in the dataset and are still interactive (tooltips, hover). Hiding a label does not remove the point.
• Mistake: Supplying unsorted time‑series data while leaving sort false. The layout engine will connect points in the order they appear, producing incorrect lines or areas.
• Mistake: Assuming that disabling label aggregation (by forcing a minimum width via CSS) will always improve readability. For very dense datasets this can cause overlapping labels that obscure the chart.
• Mistake: Forgetting to include the SVG polyfill when targeting IE11; the chart will fail to render even if the data is sorted.

Practical Verification

1. Create a dataset with 5000 points sorted chronologically.
2. Render the chart with the configuration above.
3. Resize the container to make the label width drop below 20 px (e.g., narrow the div).
4. Observe that labels disappear while tooltips still appear on hover.
5. Unset sort: true and repeat; notice the line connects points in the wrong order.

Limitation: The 20 px threshold is hard‑coded in Carbon’s current release; adjusting it requires forking the library or using a plugin.