[Chartjs]-ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart

1👍

✅

They fixed this issue in v3 so upgrading to that is 1 solution, the other one is downgrading to version 2.8, in a git issue on their repo someone posted a workaround but that only works till version 2.8.

V3:
HorizontalBar has been removed as a type, use bar chart instead and set the index axis to y in your options

Example:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        type: 'line',
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    indexAxis: 'y'
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

V2 solutions, for if stuck on v2 with plugin support
To achieve this in 2.8 you will have to specify your data as objects and specify the x and y coordinates

Example:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    datasets: [{
      label: "Clients Signed",
      data: [2, 0, 3, 5, 1, 3, 6, 5, 3, 10]
    }, {
      label: "Quota",
      data: [{
        x: 2,
        y: 'Q2 2015'
      }, {
        x: 2,
        y: 'Q3 2015'
      }, {
        x: 2,
        y: 'Q4 2015'
      }, {
        x: 2,
        y: 'Q1 2016'
      }, {
        x: 2,
        y: 'Q2 2016'
      }, {
        x: 2,
        y: 'Q3 2016'
      }, {
        x: 2,
        y: 'Q4 2016'
      }, {
        x: 2,
        y: 'Q1 2017'
      }, {
        x: 2,
        y: 'Q2 2017'
      }, {
        x: 2,
        y: 'Q3 2017'
      }],
      type: 'line'
    }],
    labels: ["Q2 2015", "Q3 2015", "Q4 2015", "Q1 2016", "Q2 2016", "Q3 2016", "Q4 2016", "Q1 2017", "Q2 2017", "Q3 2017"]
  },
  options: {
    barPercentage: 1.0,
    categoryPercentage: 1.0
  }
});

<body>
  <div class="myChartDiv">
    <canvas id="myChart" width="600" height="400"></canvas>
  </div>
  <script src="https://npmcdn.com/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
</body>

Git issue: https://github.com/chartjs/Chart.js/issues/4096