Property 'yCategory' does not exist on type 'Point'. Did you mean 'category'?
Type 'number' has no properties in common with type 'XrangePointPartialFillOptionsObject'
What interface should I use for options?
Here is the code I'm using:
Code: Select all
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import XRange from 'highcharts/modules/xrange';
XRange(Highcharts);
@Component({
selector: 'report-chart-result-timeline-highcharts',
template: '<highcharts-chart style="width: 100%; display: block;" [options]="options" [Highcharts]="Highcharts"></highcharts-chart>'
})
export class TimelineHighchartsComponent {
Highcharts: typeof Highcharts = Highcharts;
options: Highcharts.Options = {
chart: {
type: 'xrange',
height: 500,
},
title: {
text: 'Highcharts X-range'
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
category = point.yCategory,
from = new Date(point.x),
to = new Date(point.x2);
return ix + '. ' + category + ', ' + from.toDateString() +
' to ' + to.toDateString() + '.';
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
}]
};
}
