Find intersection between the chart lines in chartjs

Question

I am trying to create a line chart that presents score level from 1-100.

Line is static and needs to be curved
but the dot on the chart is dynamic value and by that it changes its location along the existing line.

First I was thinking to add additional data that represents only the dot itself, but Y(height) is unknown.
Second attempt led me to create a second line that crosses / intersects the first one in hope of finding intersection point and making it a dot.
Unfortunately, I couldn't find a way to locate intersection.

This is expected result.

new Chart(
                 document.getElementById('lineChart'), {
                    type: 'line',
                    data: {
                       datasets: [
                          {
                             data: [
                                {
                                   x: 70, y: 0,
                                },
                                {
                                   x: 70, y: 100,
                             }],
                             fill: false,
                             borderColor: 'red',
                             showLine:true,
                          },
                          {
                             data:  [
                                {
                                   x: 0, y: 2,
                                },
                                {
                                   x: 25, y: 10,
                                },
                                {
                                   x: 50, y: 50,
                                },
                                {
                                   x: 80, y: 90,
                                },
                                {
                                   x: 100, y: 98,
                                }],
                             startWithZero: true,
                             fill:  false,
                             lineTension: 0.3,
                             borderColor: 'blue',
                          }
                       ]
                    },
                    options: {
                       bezierCurve : true,
                       lineTension: 0.3,
                       tooltips: {
                          mode: 'intersect'
                       },
                       scales: {
                          xAxes: [{
                             type: 'linear',
                             ticks: {
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                          }],
                          yAxes: [{
                             ticks: {
                                bezierCurve : true,
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                             bezierCurve : true,
                             type: 'linear',
                             lineTension: 0.3,
                             scaleLabel: {
                                lineTension: 0.1,
                                display: true,
                             }
                          }]
                       }
                    }
                 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
    <div style="width: 750px; height: 250px; margin: 0 auto;">
            <canvas style="width: 750px; height: 250px" id="lineChart"></canvas>
        </div>
</body>

You can check snippet in order to see example and how far I got.

Try to look at this one [Intersection point in line graph in Chart.js?](https://stackoverflow.com/questions/42621329/intersection-point-in-line-graph-in-chart-js) — codeNinja7, Nov 28 '19 at 10:28
@codeNinja7 Thanks, I tried to use this but in my case chart has X and Y dimension. I have updated question with a picture of what i need to achieve. — Daniel Danko, Nov 28 '19 at 10:54

Stevan Tosic · Accepted Answer · 2019-11-28T17:05:36.980

Can you try to create dynamic values

       const lineData = [
         { x: 0, y: 2 },
         { x: 10, y: 3 },
         { x: 20, y: 10 },
         { x: 30, y: 20 },
         { x: 40, y: 35 },
         { x: 50, y: 50 },
         { x: 60, y: 65 },
         { x: 70, y: 80 },
         { x: 80, y: 90 },
         { x: 90, y: 97 },
         { x: 100, y: 98 },
      ];

      const xValue = 70;

      let key = Math.floor(xValue / 10);
      let diff = (lineData[key + 1].y - lineData[key].y) / 10;
      let toAdd = (xValue - lineData[key].x) * diff;
      const yValue = lineData[key].y + toAdd;

And include dynamic values in chartJs code

         new Chart(
                 document.getElementById('lineChart'), {
                    type: 'line',
                    data: {
                       datasets: [
                          {
                             data: lineData,
                             startWithZero: true,
                             fill:  false,
                             lineTension: 0.3,
                             borderColor: 'blue',
                          }
                       ]
                    },
                    options: {
                       bezierCurve : true,
                       lineTension: 0.3,
                       tooltips: {
                          mode: 'intersect'
                       },
                       scales: {
                          xAxes: [{
                             type: 'linear',
                             ticks: {
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                          }],
                          yAxes: [{
                             ticks: {
                                bezierCurve : true,
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                             bezierCurve : true,
                             type: 'linear',
                             lineTension: 0.3,
                             scaleLabel: {
                                lineTension: 0.1,
                                display: true,
                             }
                          }]
                       }
                    }
                 })

const lineData = [
         { x: 0, y: 2 },
         { x: 10, y: 3 },
         { x: 20, y: 10 },
         { x: 30, y: 20 },
         { x: 40, y: 35 },
         { x: 50, y: 50 },
         { x: 60, y: 65 },
         { x: 70, y: 80 },
         { x: 80, y: 90 },
         { x: 90, y: 97 },
         { x: 100, y: 98 },
      ];

      const xValue = 70;

      let key = Math.floor(xValue / 10);
      let diff = (lineData[key + 1].y - lineData[key].y) / 10;
      let toAdd = (xValue - lineData[key].x) * diff;
      const yValue = lineData[key].y + toAdd;
      
      new Chart(
                 document.getElementById('lineChart'), {
                    type: 'line',
                    data: {
                       datasets: [
                          {
                             data: lineData,
                             startWithZero: true,
                             fill:  false,
                             lineTension: 0.3,
                             borderColor: 'blue',
                          }
                       ]
                    },
                    options: {
                       bezierCurve : true,
                       lineTension: 0.3,
                       tooltips: {
                          mode: 'intersect'
                       },
                       scales: {
                          xAxes: [{
                             type: 'linear',
                             ticks: {
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                          }],
                          yAxes: [{
                             ticks: {
                                bezierCurve : true,
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                             bezierCurve : true,
                             type: 'linear',
                             lineTension: 0.3,
                             scaleLabel: {
                                lineTension: 0.1,
                                display: true,
                             }
                          }]
                       }
                    }
                 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
    <div style="width: 750px; height: 250px; margin: 0 auto;">
            <canvas style="width: 750px; height: 250px" id="lineChart"></canvas>
        </div>
</body>

Thank you very much, this is exactly what i needed! – Daniel Danko Nov 28 '19 at 17:03 — Daniel Danko, Nov 28 '19 at 17:03

Find intersection between the chart lines in chartjs

1 Answers1