ChartJS: Draw line between two data points on hover

ssarljames

enter image description here

Hi everyone, I have created the chart shown in the image.

Does anyone know how to draw a line between dataset of same index when trying to hover on either data (the red line).

I'm using ChartJS on VueJS component

uminder

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can draw the line directly on the canvas using CanvasRenderingContext2D.stroke().

In below code snippet, I use the afterDraw hook and draw the line in case the tooltip would be shown otherwise. Please consult addPlugin from vue-chart.js documentation to learn how to add such inline plugin in Vue.js.

var chart = new Chart('canvas', {
  type: 'line',
  plugins: [{
    afterDraw: chart => {
      if (chart.tooltip._active && chart.tooltip._active.length) {
        const ctx = chart.ctx;
        ctx.save();
        const activePoint = chart.tooltip._active[0];
        const x = activePoint.tooltipPosition().x; 
        const yAxis = chart.scales['y-axis-0'];
        const value1 = chart.data.datasets[0].data[activePoint._index];
        const value2 = chart.data.datasets[1].data[activePoint._index];
        const y1 = yAxis.getPixelForValue(value1);
        const y2 = yAxis.getPixelForValue(value2);
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'green';
        ctx.stroke();
        ctx.restore();
      }
    }
  }],
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{
        data: [13, 10, 12, 13, 9, 12],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        fill: false
      },
      {
        data: [10, 7, 9, 10, 6, 9],
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        borderColor: 'rgb(255, 159, 64)'
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Chartjs Line Color Between Two Points

Draw arrow between on line between two points

Draw line between two distinct points

R: draw a line between two points in ggplot

Draw line between two points in JavaScript?

Draw curved line between two points

Draw a line between points

Matplotlib how to draw vertical line between two Y points

Javascript + svg, draw sinus (wave) line between two given points

How to draw a line between two points over an image in swift 3?

Draw line between two given points (OpenCV, Python)

How to draw a line between two given points in R with plotly?

How to draw a line between two points objective-C

How to draw a line between two points with js and CSS

Is there a way to draw a line between two points on a HTML page without Canvas?

Draw a line between points, ignoring missing data, with matplotlib

ChartJs line chart - display permanent icon above some data points with text on hover

Draw an arc between two points

Draw a line between two points from different groups while simultaneously dogging the points

Draw line between points with groups in ggplot

draw line between select points in ggplot

Draw a line to connect points between subfigures

How to draw a line between two points when holding one axis fixed (time series)

How to draw a line / link between two points on a D3 map based on latitude / longitude?

How to draw line between two points in JavaScript - Google Maps Api Route

Draw borders on line chartjs

Draw SceneKit object between two points

Draw a bended arrow between two points in gnuplot

set line color between two points on line