How can I stream points into jqxChart in Angular without re-rendering all histor

[jovanovicParticipant]

Hi everyone, I am working on a SaaS settings panel with Chart.

I am currently trying to solve this: How can I stream points into jqxChart in Angular without re-rendering all historical data on each update?

So far, I tested with both static data and API data, but performance drops once the dataset grows.

Is there an official pattern for this scenario?

[adminKeymaster]

Hi,

For jqxChart, the recommended approach for real-time/streaming scenarios is to update only the data source and keep a bounded window of points, rather than rebuilding the entire chart configuration or re-fetching all historical data every tick.

A few patterns that generally work well:

1. Append new points to the existing data source

Instead of replacing the whole array with a freshly generated dataset:

this.chartData.push({
  timestamp: new Date(),
  value: newValue
});

Then trigger the chart update using the jqxChart API rather than recreating the Angular component.

2. Maintain a rolling buffer

For live dashboards, don’t let the dataset grow indefinitely.

const MAX_POINTS = 1000;

this.chartData.push(point);

if (this.chartData.length > MAX_POINTS) {
  this.chartData.shift();
}

This keeps rendering costs predictable.

3. Batch updates

If data arrives very frequently (e.g., multiple times per second), buffer points and update the chart every 100–500 ms.

setInterval(() => {
  if (pendingPoints.length) {
    this.chartData.push(...pendingPoints);
    pendingPoints = [];

    this.chart.update();
  }
}, 250);

Updating 4 times per second is usually much cheaper than updating for every incoming point.

4. Avoid Angular change-detection overhead

If you’re using Angular, ensure you’re not recreating:

<jqxChart [source]="data"></jqxChart>

with a brand-new array reference on every update:

// Expensive
this.data = [...this.data, newPoint];

Prefer mutating the existing collection and invoking the chart refresh API.

5. Disable unnecessary animations

For real-time feeds, animations can become a bottleneck.

animationDuration: 0

or equivalent chart settings.

6. Consider downsampling for very large histories

If you need tens of thousands of points visible simultaneously, aggregate older data before plotting it. Most charting libraries (including jqxChart) will eventually become CPU-bound if every historical point remains visible.

One thing to note: jqxChart does not provide a specialized “streaming series” API that only paints the newest point while completely bypassing existing data processing (as some dedicated real-time charting libraries do). The common pattern is to maintain the data source, append points, keep a rolling window, and refresh the chart efficiently.

Regards,
Peter

[Author]

Posts