aislingv
Posts: 19
Joined: Mon Mar 15, 2021 2:39 pm

Gantt Angular Adding series to existing chart

Hello

I am using Angular 4 to try and build a Gantt chart with a left hand side grid but I keep getting errors if I add the series after the chart has been created.
It works fine using static series data from this example: https://jsfiddle.net/BlackLabel/unphkx32/

"highcharts": "6.2.0",
"highcharts-regression": "2.0.1",

A very bad code example of what i am trying:

Code: Select all

import { NGXLogger } from 'ngx-logger';
import * as Highcharts from 'highcharts';
import * as HC_gantt from 'highcharts/modules/gantt';
HC_gantt(Highcharts);
Highcharts.setOptions({
    global: {
        useUTC: false
    },
    time: { useUTC: false }
});

export class GanttChartComponent2 {

    theChart: any;
    coloursAdded = false;
    customElements: any[] = [];
    updateFlag = false;
    Highcharts: typeof Highcharts = Highcharts; //  required
    chartConstructor: string = 'ganttChart';
    chartOptions: Highcharts.Options = {
        yAxis: {type: 'category'},
        series: [],
    };

    //  Callback function after the chart is create
    chartCallback = (chart) => {
        if (this.theChart == null) {
            this.theChart = chart;
        }
    };

    constructor(private logger: NGXLogger) {
    }

    public addSeries() {

        this.chartOptions.yAxis.type = 'category';
        this.chartOptions.grid = {
            columns: [{
              title: {
                text: 'Project'
              },
              labels: {
                format: '{point.name}'
              }
            }, {
              title: {
                text: 'Assignee'
              },
              labels: {
                format: '{point.assignee}'
              }
            }]
          };

        const d = {
            id: 'parent',
            start: Date.UTC(2017, 10, 18, 8),
            end: Date.UTC(2017, 10, 25, 16),
            name: 'Start prototype',
            assignee: 'Richards',
            y: 0
        };
        const d2 = {
            parent: 'parent',
            start: Date.UTC(2017, 10, 20, 8),
            end: Date.UTC(2017, 10, 24, 16),
            name: 'Develop',
            assignee: 'Michaels',
            y: 1
        };
        let s = {
            data: []
        };
        s.data.push(d);
        s.data.push(d2);
        this.theChart.addSeries(s);
        this.updateFlag = true;
    }
}
I end up with a Gantt chart with 0 and 1 as the only yAxis grid values so nothing like the static version.

Thanks for any assistance.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gantt Angular Adding series to existing chart

Hello aislingv!
Thanks for contacting us with your question!

Check the demo below, there you will find how to add series to the chart in angular. Unfortunately, you will have to upgrade to the newest version of Angular and Highcharts, because there are errors while updating the series. We try to keep the backward compatibility but sometimes it's not possible like in this case.

Demo: https://codesandbox.io/s/angular-forked-zv81do

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer
aislingv
Posts: 19
Joined: Mon Mar 15, 2021 2:39 pm

Re: Gantt Angular Adding series to existing chart

Hi hubert.k
Thanks for your response. I am stuck on my current versions for the moment.
I actually ended up using the treeGrid layout yaxis and was having a similar issue there of getting an existing chart to update.
In the end, instead of just updating the series, I also updated the chart options which I assume triggers a whole redraw of the chart but seems to work for now.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gantt Angular Adding series to existing chart

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Gantt”