Seeq relies on Highcharts to render charts for many use-cases. We like Highcharts because it is a very flexible library and offers good performance for both simple and complex charts.
We try to stay up to date with our third-party libraries and I took the task of updating from Highcharts 8.1.0 to 9.2.2. The first step was to read the changelogs for all intermediate versions and I did not find any incompatible changes. Theoretically, the upgrade of the library did not require any software changes on the Seeq side, but after the upgrade, a few issues appeared.
Below is a list of issues I had to solve to make sure our application still works as expected with Highcharts 9.2.2. I’m writing this because I did not find any information related to these problems in the Highcharts release notes and it might help other developers who may want to upgrade.
Highcharts.each was removed
Highcharts.each function was removed. This problem was easy to fix by using Javascript forEach
Old code
const each = Highcharts.each;
each([series.tracker, series.markerGroup], function(tracker) {
...
}New code
[series.tracker, series.markerGroup].forEach(function(tracker) {
...}Chart bands not visible
On a chart with bands, we used xAxis: {visible: false} to hide the x-axis. This worked fine with Highcharts 8.1.0 – the bands and the series were correctly displayed. After upgrading to Highcharts 9.2.2 the chart bands disappeared.
The solution was to set the xAxis visible and configure it to not show the label and set the tickWidth to zero.
Old code
xAxis: {
...
visible: false,
...
}
New code
xAxis: {
...
labels: {
enabled: false
},
tickWidth: 0,
...
}
Axis breakArray moved under brokenAxis property
This was a compilation error because the axis breakArray array has moved under brokenAxis.
Old code
...
axis.breakArray
...
chart.xAxis[0].breakArray
...
New code
...
axis.brokenAxis.breakArray
...
chart.xAxis[0].brokenAxis.hasBreaks
...
Chart.update with oneToOne removes series when updating axes
Our application allows the user to flip X/Y axes with a press of a button. The figure below shows a Temperature / Relative Humidity chart and its flipped version Relative Humidity / Temperature.
After the upgrade, flip axis stopped working; an empty chart was displayed when the user pressed the flip button.
This was caused by a change of the Chart.update function. Instead of flipping the axis, the series were removed from the chart when the update with oneToOne=true was called.
After some debugging, I found out that oneToOne=true behaves completely differently when axis and series IDs are set (details below). The documentation Chart.update does not mention anything about this.
For our flip axis use case, the solution was to remove axis ids before updating.
delete config.xAxis.id;
delete config.yAxis.id;
chart.update(config, true, true, false);The table below illustrates the behavior of Chart.update with different configurations:
| Use case | Initial configuration | Update configuration | Update result (Axis) | Update result (Series) |
|---|---|---|---|---|
| No ids | xAxis – no id yAxis – no id | xAxis – no id yAxis – no id | x-axis and y-axis updated | untouched |
| Set ids on update | xAxis – no id yAxis – no id | xAxis – id: ‘x1’ yAxis – id: ‘y’ | x-axis and y-axis updated | untouched |
| Remove ids on update | xAxis – id: ‘x’ yAxis – id: ‘y’ | xAxis – no id yAxis – no id | x-axis and y-axis updated | untouched |
| Keep same ids on update | xAxis – id: ‘x’ yAxis – id: ‘y’ | xAxis – id: ‘x’ yAxis – id: ‘y’ | x-axis and y-axis updated | untouched |
| Set new ids on update | xAxis – id: ‘x’ yAxis – id: ‘y’ | xAxis – id: ‘x1’ yAxis – id: ‘y1’ | x-axis and y-axis updated | series removed |
| Flip ids on update | xAxis – id: ‘x’ yAxis – id: ‘y’ | xAxis – id: ‘y’ yAxis – id: ‘x’ | x-axis and y-axis removed | series removed |
More details about the internal implementation of Chart.update can be found in the discussion thread of this issue.
An example of series and axis removed when calling Chart.update can be found in this jsfiddle.
Benefits of upgrading to Highcharts 9.2.2
The upgrade was incentivized by the internal refactoring of Highcharts to better support TypeScript. The list of fixed bugs was another reason – we were able to remove some workarounds we implemented for Highcharts 8.
Along with these, we obtained a significant improvement of the rendering time – up to 45% faster for some charts. That’s a great win with just a library upgrade!
Go Highcharts!
Remove workaround for #13816: “Scatter plot doesn’t redraw when setting lineWidth to 0”
Fortunately, #13816 was fixed and we were able to remove the workaround for it.
Old code:
// Directly remove the path if we're setting lineWidth to 0
if (chartSeries && _.get(series, 'lineWidth') === 0) {
chartSeries.graph?.destroy();
chartSeries.graph = undefined;
}
Remove workaround for #8795: “Console errors when zoomed in and using series.setData with redraw set to false”
Fortunately, #7895 was fixed and we were able to remove the workaround for it.
The second arg (redraw) had to be true or errors get thrown sometimes. Redraw true can also be a performance problem if we update the data for many series. This could be done just one time after all series are updated.
Old code
chartSeries.setData(series.data, true, false, false);New code
chartSeries.setData(series.data, false, false, false);Conclusion
It was relatively simple to upgrade and most of the issues were easy to fix except for the Chart.update modification which required a lot of debugging to find out what happened. Fortunately, the wide range of tests our team implemented over the years provided good coverage and we were able to immediately detect the problems.