score:0

i was looking for an answer to a similar problem, and i ended up with the following hack which isn't necessarily a better hack than yours :-)

link to fiddle: https://jsfiddle.net/hdahle/obc4amfh/

var colors = ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
var votes = [5, 6, 35, 76, 20, 10];

var ctx = document.getelementbyid('mychart');
var mychart = new chart(ctx, {
  options: {
    responsive: true,
    legend: {
      display: false
    }
  },
  type: 'line',
  data: {
    labels: colors,
    datasets: [{
      label: 'votes',
      data: votes,
      bordercolor: 'rgba(30,150,60,0.8)',
      backgroundcolor: 'rgba(30,150,60,0.3)',
      borderwidth: 1,
      fill: true,
    }]
  }
});

function drawhorizontalline(value, color) {
  let d = [];
  for (let i = 0; i < mychart.data.labels.length; i++) {
    d.push(value)
  }
  mychart.data.datasets.push({
    data: d,
    pointradius: 0,
    type: 'line',
    bordercolor: color,
    borderwidth: 1,
    fill: false,
  });
  mychart.update();
}

drawhorizontalline(76, 'rgba(175,40,50,0.6)');
drawhorizontalline(44, 'rgba(175,40,50,0.6)');
drawhorizontalline(21, 'rgba(175,40,50,0.6)');
drawhorizontalline(12, 'rgba(175,40,50,0.6)');
drawhorizontalline(3, 'rgba(175,40,50,0.6)');

Related Query

More Query from same tag