JSFiddle - React, Tailwind, and code Playground

by Dan Welch

HTML

<div>
  <canvas id="chart" width="400" height="150"></canvas>
</div>

JavaScript

Chart.controllers.horizontalBarWithLine = Chart.controllers.horizontalBar.extend({
  draw: function() {
    Chart.controllers.horizontalBar.prototype.draw.apply(this, arguments);

    // draw line
    this.chart.chart.ctx.beginPath();
    this.chart.chart.ctx.moveTo(this.chart.options.lineAtPoint, this.chart.scales['y-axis-0'].start);
    this.chart.chart.ctx.strokeStyle = '#ff0000';
    this.chart.chart.ctx.lineTo(this.chart.options.lineAtPoint, this.chart.scales['y-axis-0'].end);
    this.chart.chart.ctx.stroke();

  }
});

var chartData = {
  labels: ['chart'],
  datasets: [{
    label: 'bar',
    backgroundColor: "rgba(0,140,186,0.6)",
    data: [50]
  }],
};

new Chart(document.getElementById("chart").getContext("2d"), {
  type: 'horizontalBarWithLine',
  data: chartData,
  options: {
    lineAtPoint: 75,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          min: 0,
          max: 100
        }
      }],
      yAxes: [{
        display: false
      }]
    }
  }
});