I've been attempting to include a horizontal line in my Chart.js using the annotations plugin, but it's not cooperating.
My Chart.js version is 2.9.4, so I had to install it with the command: npm install [email protected] --save
After installation, when I tried to register it using Chart.register(annotationPlugin), I received the error:
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_10__.Chart.register is not a function
After some online research, I discovered that I could use:
Chart.plugins.register(AnnotationPlugin)Below is my chart configuration:
import BarChart from '../Charts/BarChart'
import DetailsComponent from './Reusable/Details'
import AnnotationPlugin from 'chartjs-plugin-annotation';
import Chart from 'chart.js';
export default {
data() {
return {
aud2Chart: {
chartdata: {
labels: [],
datasets: [
{
label: "Valor da nota",
fill: false,
tension: false,
pointRadius: 5,
pointHitRadius: 10,
pointHoverRadius: 10,
backgroundColor: "#556aff",
data: [],
pointBackgroundColor: []
},
],
},
options: {
annotation: {
annotations: [{
id: 'a-line-1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '15000',
borderColor: 'red',
borderWidth: 2,
}]
},
legend: {
onClick: null
},
tooltips: {
mode: 'index',
callbacks: {
label(vars){
let float = parseFloat(vars.value).toFixed(2)
let parts = float.toString().split(".")
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ")
let formatted = parts.join(".").replace('.', ',')
if(vars.datasetIndex == 0){
return 'Valor total da nota fiscal: ' + formatted
} else {
return 'Média deste momento: ' + formatted
}
}
}
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
responsive: true,
maintainAspectRatio: false,
},
},
...
The graph data is not included in the code as it is fetched from the API.
No errors are showing up in the console.
I attempted one solution I found, which involved wrapping the annotation object inside a plugin{} object, but it didn't work.
For reference, I'm using vue-chartjs as well, and I'm importing this component to display the graph:
<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
props: ["chartdata", "options"],
mounted() {
this.renderChart(this.chartdata, this.options);
},
};
</script>
Here are some of my settings:
Chart.js version: 2.9.4 Annotations plugin version: 0.5.7 Vue-chartjs version: 3.5.1
Thank you for your help!