[Chartjs]-How to draw horizontal line in chart js which when hovered shows the data

by

1👍

✅

I finally found the way out. The answer to this is a floating bar

{
  label: 'Total Recordings',
  data: [[data.totalrecordings -0.5, data.totalrecordings + 0.5]]
  categoryPercentage: 1,
  barPercentage: 1,
  borderColor:'rgba(2,117,216,1)',
  backgroundColor:'rgba(2,117,216,0.2)',
  order:0
}

Further to correctly show the total recordings data when you hover, use this

tooltip: {
   mode: 'index',
   callbacks: {
        label: ctx => ctx.dataset.label + ': ' + (ctx.datasetIndex == 2 ? 
                     data.totalrecordings : ctx.parsed.y)
   }
}

Leave a comment