Series with the same name (series.name) are "mysteriously" dropped when chart is re-rendered.

[les2]

There's a requirement brought about by the logic in getSeriesMap and it's uses in ember-highcharts/components/high-charts that all series names' are unique within a single chart.

I thought that this was for the best the first time I hit this behavior and simply renamed the chart series (the names were the same because the charts are generated from a web form and the user happened to add the same series to a chart twice during editing session).

To reproduce:

• add several series to the highchart with the same value for name.
• wait for initial render to complete: notice that the chart renders fine
• cause a re-render (e.g., if chart options are rendered from a computed property whose dependent key changes)

result:

• all but one of the series with the same name are removed from the chart

The case for not using name as a unique key

• TODO (I have a use case in our app for this that I can describe later)

Workaround

I have monkey-patched ember-highcharts locally by modifying the a couple of functions:

export function getSeriesMapKey(seriesItem) {
  return seriesItem.name + (seriesItem.stack ? `_stack_${seriesItem.stack}` : '');
}

export function getSeriesMap(seriesGroup) {
  const seriesMap = seriesGroup.reduce((seriesMap, seriesItem) => {
    seriesMap[getSeriesMapKey(seriesItem)] = seriesItem;
    return seriesMap;
  }, {});

  return seriesMap;
}

As well as updated didReceiveAttrs of the high-charts component. To use the getSeriesMapKey function.

I'm happy to create a better description of the issue, a reproduction app using ember-fiddle, and discussing workarounds, as well as PRing a permanent fix here.

[nlfurniss]

I’d be very interested in a fiddle or demo app