79134366

Date: 2024-10-28 16:53:21
Score: 2
Natty:
Report link

Chartjs Multiline

For add multi vertical line:

(Fork on @potatopeelings answer: https://stackoverflow.com/a/30323431/3114914)

DEMO: jsfiddle

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);
        for(let item in this.options.lineAtIndex){
          var point = this.datasets[0].points[this.options.lineAtIndex[item]['lableIndex']]
          var scale = this.scale

          // draw line
          this.chart.ctx.beginPath();
          this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
          this.chart.ctx.strokeStyle = this.options.lineAtIndex[item]['color'];
          this.chart.ctx.lineTo(point.x, scale.endPoint);
          this.chart.ctx.stroke();

          // write TEXT
          this.chart.ctx.textAlign = 'center';
          this.chart.ctx.fillText(item, point.x, scale.startPoint + 12);
        }
      
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: {
      "Text1":{
        "lableIndex":2,
        "color":'#ff0000'
      },
      "Text2":{
        "lableIndex":5,
        "color":'#3ca832'
      },
      "Text3":{
        "lableIndex":6,
        "color":'#2200ff'
      }
    }
});
Reasons:
  • Blacklisted phrase (1): stackoverflow
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @potatopeelings
  • Low reputation (0.5):
Posted by: ramin