How to create vertical arbitrary line in financial chart?

by

👍:0

Your code for getting the right pixel is incorrect if you change it to this it will work: xaxis.getPixelForValue(chart.config.data.datasets[0].data[index].x)

Live example:

var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);
    var chart = this.chart;
    var ctx = chart.chart.ctx;
    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];


      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.getPixelForValue(chart.config.data.datasets[0].data[index].x), yaxis.top);
      ctx.strokeStyle = 'red';
      ctx.lineTo(xaxis.getPixelForValue(chart.config.data.datasets[0].data[index].x), yaxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  }
});
var config = {
  type: 'line',
  data: {
    datasets: [{
      label: "My First dataset",
      data: [{
          x: moment(1591900200000),
          y: 1936.88
        }, {
          x: moment(1592159400000),
          y: 379.38
        },
        {
          x: moment(1592245800000),
          y: 2495.94
        }, {
          x: moment(1592332200000),
          y: -938.44
        },
        {
          x: moment(1592418600000),
          y: -1697.19
        }, {
          x: moment(1592505000000),
          y: -1058.44
        },
        {
          x: moment(1592764200000),
          y: 439.38
        }, {
          x: moment(1592850600000),
          y: 758.75
        }
      ],
      fill: false,
      backgroundColor: 'blue',
      borderColor: 'blue',
    }],
    lineAtIndex: 2
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
};
new Chart('chartJSContainer', config);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
</body>

Leave a comment