In my Angular project, I am utilizing the ngx-charts bubble chart to illustrate events on a timeline. The chart content dynamically updates as users narrow down a specific time range.
Although I am straying slightly from the intended use of the bubble chart by marking events in time instead of showcasing data, I don't foresee it causing significant issues.
However, I have encountered an issue where there is sometimes a large gap between the y-axis and the beginning of the x-axis when the chart updates. Despite the start/end times being accurate, the spacing poses a challenge.
To populate the chart with data, I push new data into an array and then assign this updated array to the displayed data array.
let newData: object[] = [];
newData.push(foo);
displayedData = newData;
I attempted to resolve the display issue by forcing a re-render of the chart.
showChart = false; // attached to *ngIf in component HTML
displayedData = [...displayedData];
showChart = true;
The time adjustments on the chart are controlled through a subscription to an NGXS store value that gets updated by another component.
times$.subscribe(times => {
if (times) {
xScaleMin = times.start;
xScaleMax = times.stop;
}
}
If you have any suggestions or insights, they would be greatly appreciated! Thank you!