Chart tooltip disappearing when new data arrives.

[TannerGilbert]

Bug Report

Expected Behavior

Chart tooltip should update, when new values are received.

Current Behavior

Tooltip values are being removed but new values aren't added.

Steps to Reproduce

• https://stackblitz.com/edit/github-vilm5e?file=src/chart/chart-stream-example/chart-stream-example.html

Used Versions:

• typescript: 3.8.3
• @angular/cdk: 9.2.4
• @dynatrace/barista-components: 7.6.0

Attachments

[tomheller]

@TannerGilbert Thank you for reporting this. This definitely seems like a bug.

I already have a guess that we are not getting a new seriesHover event from highcharts, and therefor do not update the implicit context of the overlay.

[tomheller]

As expected, highcharts does not send a new tooptipUpdated event, if the mouse does not move.
If you have a look at the highcharts dynamic chart example 1, if you hover over a data point and do not move the mouse, the tooltip moves with the set datapoint.

My current approach to solve this, would be to see if we can either:

• Get the hovered series data from highcharts, when the data changes and fake the tooltip data in manually.
• Dispatch a fake mouse event to force highcharts to refire the tooltipUpdated event.

[tomheller]

This seems more and more like something that cannot be fixed. At least not in the way highcharts is currently wrapped into the dt-chart.

When the series data is being set, the charts update function is called:

barista/libs/barista-components/chart/src/chart.ts

Lines 232 to 236 in 24647e8

	if (series instanceof Observable) {
	this._dataSub = series.subscribe((s: DtChartSeries[]) => {
	this._currentSeries = s;
	this._update();
	});

In this update function, we need to destroy the current chart object and reinstantiate it again. Highcharts has an update function, although this will not let the consumer update all properties of the series or chart options. This has been leading to problems in the past, which is why we implemented the re-instantiation functionality in 6df1df8.

Before the change, the update function looked like this, where the new series and options were passed to the Highcharts.update function.

barista/src/lib/chart/chart.ts

Lines 543 to 553 in dd7fa6f

	private _updateChart(xAxisHasChanged: boolean): void {
	if (this._chartObject) {
	this._ngZone.runOutsideAngular(() => {
	if (xAxisHasChanged) {
	this._chartObject!.update({ series: [] }, false, true);
	}
	this._chartObject!.update({ ...this._highchartsOptions }, true, true);
	});
	this.updated.emit();
	}
	}

I currently do not see a good way to solve this issue without reintroducing old problems. Any input would be appreciated @ffriedl89 @lukasholzer.

---

The same root cause applies to issue #1412.