[Chartjs]-Find intersection between the chart lines in chartjs

by

2👍

✅

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>

Leave a comment