Search code examples
angulartypescriptngx-charts

NGX-Charts bubble chart x-axis spacing issue

I am working on an Angular application that uses ngx-charts bubble chart. The content on the chart is updated as a user narrows in on a time range.

I'm using the bubble chart to mark certain events in time on a timeline rather than representing data so I'm deviating a little bit from it's intended use but I don't believe that should be too much of an issue.

Occasionally when the chart updates, I will get a large gap between the y-axis and the beginning of the x-axis. The start/end times of the chart are correct, I'm just having an issue with the spacing.

Chart

I'm adding data to the chart by pushing data into a new array, then assigning the new array to the displayed data array.

let newData: object[] = [];
newData.push(foo);
displayedData = newData;

I've tried forcing a re-render of the chart to get the data to display correctly.

showChart = false; // this is attached to an *ngIf in the component HTML file
displayedData = [...displayedData];
showChart = true;

The time on the chart is being adjusted via a subscription to an NGXS store value that is updated by another component.

times$.subscribe(times => {
   if (times) {
      xScaleMin = times.start;
      xScaleMax = times.stop;
   }
}

Any ideas? Thanks in advance!

Solution

  • As it turns out, I wasn't properly removing data outside of the time range. As the chart moved forward in time, there was data that was left behind that was still on the chart but before the xScaleMin value. But for some reason, the bubbles weren't appearing on the old data.