Using the annotations plugin for chart.js in an Angular application so I am sorry if that is kind of specific. What the annotation plugin should be doing is creating a vertical line at value=1 on the x axis.
However at this point nothing is appearing. There are no errors being thrown or anything like that however no line.
The x-axis on my chart is in float form so I have tried value=1.0
however that wasn't any more successful. I should point out that the colorschemes plugin is working perfectly so it isn't that plugins are somehow disabled either.
import * as Chart from 'chart.js';
import 'chartjs-plugin-colorschemes';
import 'chartjs-plugin-annotation';
[...]
let massPopChart = new Chart(this.myChart, {
type: 'bubble',
data: {
labels:['Jobs']
},
options: {
plugins:{
colorschemes: {
scheme: 'brewer.YlOrBr9'
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: 1,
borderColor: 'red',
borderWidth: 5,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}, legend: {
display: false
}, title: {
display: true,
text: 'Location Quotient of Jobs in Region'
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "# of Jobs"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "LQ"
}
}]
}
}
});
this.jobTitles.forEach((value) => {
var r = parseInt(this.regionData.merged_titles[value])/100;
if(r < 5) r = 5;
else if (r>15) r = 15;
massPopChart.data.datasets.push({
label: value,
data: [{
x: parseFloat(this.regionData.location_quotient[value]),
y: parseInt(this.regionData.merged_titles[value]),
r: r
}]
});
massPopChart.update();
});
My chart is being made just fine. All dots are appearing and in the colors defined by the colorscheme plugin however there is no solid red line at 1 on the x axis.
If anyone runs into this issue in the future, the solution that I stumbled upon was to go to node_modules > @types > chart.js > index.d.ts
and put the line annotation?: Object;
in the interface ChartOptions
section around line 217. Then I restructured the code like this...
let massPopChart = new Chart(this.myChart, {
type: 'bubble',
data: {
labels:['Jobs']
},
options: {
plugins:{
colorschemes: {
scheme: 'brewer.YlOrBr9'
}
}, legend: {
display: false
}, title: {
display: true,
text: 'Location Quotient of Jobs in Region'
}, annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: 1,
borderColor: 'red',
borderWidth: 5,
label: {
enabled: false,
content: 'Test label'
}
}]
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "# of Jobs"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "LQ"
}
}]
}
}
});
With the 'annotation' section moved from the 'plugins:' section and to the general 'options' section.