I'm using chartkick and chart.js to render some line charts. Right now i'm trying to add a vertical line that displays a note that the user inputs, but I can't seem to get the annotations plugin to work.
<line-chart width="80vw" :dataset="dataset" :library="chartOptions" class="animated slideInRight delay-0.01s" v-else :data="photon.data.tempF" ytitle="Temperature F" :colors="['#ff0000']" :download="true"></line-chart>
chartOptions: {
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: "Wed Jan 23 2019 10:31:27 GMT-0500 (Eastern Standard Time)",
borderColor: "red",
label: {
content: "TODAY",
enabled: true,
position: "top"
}
}
]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
console.log(data.labels[tooltipItem.index])
console.log(tooltipItem)
return [data.datasets[0].data[tooltipItem.index],data.labels[tooltipItem.index]]
}
}
},
height: '400px',
pan: {
enabled: false,
mode: 'xy',
},
zoom: {
enabled: true,
mode: 'x',
},
drag: true,
gridLines: {
zeroLineColor: "rgba(0,255,0,1)"
},
},```
The reason why it wasn't drawing the annotations was because in my main.js I wasn't importing or registering it
import ChartAnnotationsPlugin from 'chartjs-plugin-annotation'
Chart.plugins.register(ChartAnnotationsPlugin)