Ember-cli-highcharts component extension that updates series, axis and colors

dynamic-high-charts.js

import Ember from 'ember';
import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';
const { get } = Ember;

export default EmberHighChartsComponent.extend({
  callback: (chart) => {

    if (!chart.series.any((item) => { return item.data.length > 0; })) {
      chart.series.forEach((serie) => {
        serie.remove();
      });
    }
  },

  didReceiveAttrs() {
    if (!(get(this, 'content') && get(this, 'chart'))) {
      return;
    }

    let chart = get(this, 'chart');
    let noData = chart.get('noData');

    if (noData != null) {
      noData.remove();
    }

    this.hideUnusedSeries(chart, get(this, 'content').length);

    this.resetChartCounters(chart);

    this.updateSeries(chart, get(this, 'content'));

    this.updateAxis(chart, this.get('chartOptions'));

    chart.setTitle(this.get('chartOptions').title, null, false);

    return chart.redraw();

  },

  hideUnusedSeries: (chart, newLength) => {
    // If there are less series in the content then in the series, hide the unused series.
    let currentSerieCount = chart.series.length;

    for (let i = newLength; i < currentSerieCount; i++) {
      chart.series[newLength].remove(false);
    }
  },

  resetChartCounters: (chart) => {
    chart.colorCounter = chart.series.length;
    chart.symbolCounter = chart.series.length;
  },

  updateSeries: function(chart, content) {
    content.forEach((series, idx) => {
      if (chart.series[idx]) {
        chart.series[idx].update(this.getSeriesOptions(chart, series), false);
        return chart.series[idx].setData(series.data, false);
      } else {
        return chart.addSeries(series, false);
      }
    });
  },

  updateAxis: (chart, chartOptions) => {
    chart.yAxis[0].setCategories(chartOptions.yAxis.categories, false);

    chart.xAxis[0].setCategories(chartOptions.xAxis.categories, false);
    
    chart.xAxis[0].setExtremes(chartOptions.xAxis.min, chartOptions.xAxis.max, false);
  },

  getSeriesOptions: (chart, series) => {
    let type = series.type || chart.userOptions.chart.type;
    return {name: series.name, type: type, color:series.color};
  }
});