Tengo problemas para configurar chartjs-plugin-crosshair para que funcione con mi gráfico (chartjs).
Las dependencias del proyecto son:
estoy recibiendo errores:
primero: TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'dragStarted')
luego (al mover el mouse sobre el gráfico): TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'longitud')
Mi componente:
<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 } } } }¿Alguien puede ayudar?
Esto se debe a que le dio a sus básculas una identificación personalizada, volviendo a configurarlos en x e y predeterminados (al cambiar las claves de objeto de yAxes a y y de xAxes a x ) resolverá su problema:
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>