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;
}
}
Thanks for any assistance.