I'm struggling with setting chartjs-plugin-crosshair to work with my chart (chartjs).
Project dependencies are:
i'm getting errors:
first: Uncaught TypeError: Cannot read properties of undefined (reading 'dragStarted')
then (on mouse move over chart): Uncaught TypeError: Cannot read properties of undefined (reading 'length')
My component:
<template>
<Line :chart-data="chartData" :plugins="[CrosshairPlugin]" :chart-options="chartOptions" ref="myChart" />
</template
<script setup>
import { Line } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale, TimeSeriesScale } from 'chart.js'
import {CrosshairPlugin,Interpolate} from 'chartjs-plugin-crosshair';
ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale, TimeSeriesScale)
const myChart = ref();
const chartData ={
labels: [1,2,3,4],
datasets: [{label:'test', data:[51,52,53,54],borderWidth:1, borderColor:'#f0f'}]
}
const chartOptions = {
interaction: {
mode: 'nearest'
},
scales: {
xAxes: {
stacked:true,
grid: {
color:"rgba(80,201,209,.3)",
borderColor:"rgba(80,201,209,1)"
},
title: {
display:true,
text: 'value'
},
ticks: {
color:"rgba(80,201,209,1)"
source: 'labels',
},
},
yAxes: {
grid: {
color:"rgba(80,201,209,.3)",
borderColor:"rgba(80,201,209,1)"
},
title: {
display: false,
},
ticks: {
color:rgba(80,201,209,1),
},
},
},
plugins: {
crosshair:
{
sync: {
enabled: false
},
zoom: {
enabled: false
},
snap: {
enabled: true
}
}
}
}
can anyone help?
This is because you gave your scales a custom ID, setting them back to the default x and y (by changing the object keys from yAxes to y and from xAxes to x) will resolve your issue:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
hover: {
intersect: false
},
scales: {
x: {
stacked: true,
grid: {
color: "rgba(80,201,209,.3)",
borderColor: "rgba(80,201,209,1)"
},
title: {
display: true,
text: 'value'
},
ticks: {
color: "rgba(80,201,209,1)",
source: 'labels',
},
},
y: {
grid: {
color: "rgba(80,201,209,.3)",
borderColor: "rgba(80,201,209,1)"
},
title: {
display: false,
},
ticks: {
color: 'rgba(80, 201, 209, 1)',
},
},
},
plugins: {
crosshair: {
sync: {
enabled: false
},
zoom: {
enabled: false
},
snap: {
enabled: true
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair"></script>
</body>