Home / Questions / 51932
Accepted
Pavlo B.
Asked: 2020-02-28 03:06:00 +0800 CST 2020-02-28 03:06:00 +0800 CST

Horizontal "limit" line in chartjs

  • 772

I am making a graph and I need to make it put a horizontal line at X point of it

this is the "script" of my graph;

var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
      datasets: [{
        label: 'Reparaciones x dia',
        data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
        backgroundColor: "rgba(0,255,51,0.5)"
      }, {
        label: 'Totales',
        data: [0, 4, 5, 8, 9, 9, 9, 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 73],
        backgroundColor: "rgba(0,153,255,0.5)"
      }]
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

I need a line for example at number 15 of the vertical axis...

jquery

2 Answers

  1. Best Answer

    You can create your own plugin for Chart.js, which will draw the line you want on the chart. For example, if you want the plugin to draw a horizontal line on the value of y, your code should follow the following algorithm:

    • Add an option with the value of ywhere you want to display the horizontal line (this would be done inside optionswhen you create the Chart)
    • Create a plugin that does the following:
      • Detect if a value has been passed to draw the horizontal line
      • Calculate the height at which the line should be drawn inside the graph
      • Position yourself at that height at position x=0 (with moveTo)
      • Create a line up to x=width of the graph (with lineTo)
      • Specify the color of the line (with style)
      • Draw the line (with stroke)

    You could then extend that plugin to allow more than one horizontal line, label the line, customize colors, opacity, etc... But I'm going to limit myself to the most basic version: a single line of a fixed color.

    Here you can see the code of this plugin working:

    var chartPluginLineaHorizontal = {
  afterDraw: function(chartobj) {
    if (chartobj.options.lineaHorizontal) {
      var ctx = chartobj.chart.ctx;
      var valorY = chartobj.scales["y-axis-0"].getPixelForValue(chartobj.options.lineaHorizontal);
      ctx.beginPath();
      ctx.moveTo(0, valorY);
      ctx.lineTo(chartobj.chart.width, valorY);
      ctx.strokeStyle = "red";
      ctx.stroke();
    }
  }
}
Chart.pluginService.register(chartPluginLineaHorizontal);

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
    datasets: [{
      label: 'Reparaciones x dia',
      data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
      backgroundColor: "rgba(0,255,51,0.5)"
    }, {
      label: 'Totales',
      data: [0, 4, 5, 8, 9, 9, 9, 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 73],
      backgroundColor: "rgba(0,153,255,0.5)"
    }]
  },
  options: {
    lineaHorizontal: 15
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

    And as an extension that I put above, here I leave a somewhat more complex plugin that allows you to draw horizontal or vertical lines, and also allows you to choose a color or label (I have done it in a short time and it can be improved by reducing the code, then I update it when I have a bit more time):

    var chartPluginLineaHorizontal = {
  afterDraw: function(chartobj) {
    if (chartobj.options.lines) {
      var ctx = chartobj.chart.ctx;
      for (var idx = 0; idx < chartobj.options.lines.length; idx++) {
        var line = chartobj.options.lines[idx];
        line.iniCoord = [0,0];
        line.endCoord = [0,0];
        line.color = line.color ? line.color : "red";
        line.label = line.label ? line.label : "";
        if (line.type == "horizontal" && line.y) {
          line.iniCoord[1] = line.endCoord[1] = chartobj.scales["y-axis-0"].getPixelForValue(line.y);
          line.endCoord[0] = chartobj.chart.width;
        } else if (line.type == "vertical" && line.x) {
          line.iniCoord[0] = line.endCoord[0] = chartobj.scales["x-axis-0"].getPixelForValue(line.x);
          line.endCoord[1] = chartobj.chart.height;
        }
        ctx.beginPath();
        ctx.moveTo(line.iniCoord[0], line.iniCoord[1]);
        ctx.lineTo(line.endCoord[0], line.endCoord[1]);
        ctx.strokeStyle = line.color;
        ctx.stroke();
        ctx.fillStyle = line.color;
        ctx.fillText(line.label, line.iniCoord[0] + 3, line.iniCoord[1] + 3);
      }
    }
  }
}
Chart.pluginService.register(chartPluginLineaHorizontal);

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
    datasets: [{
      label: 'Reparaciones x dia',
      data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
      backgroundColor: "rgba(0,255,51,0.5)"
    }, {
      label: 'Totales',
      data: [0, 4, 5, 8, 9, 9, 9, 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 73],
      backgroundColor: "rgba(0,153,255,0.5)"
    }]
  },
  options: {
    lines: [
      {
        type: "horizontal",
        y: 15,
        color: "blue",
        label: "min"
      },
      {
        type: "horizontal",
        y: 32,
        color: "red",
        label: "max"
      },
      {
        type: "vertical",
        x: 12,
        color: "green",
        label: "aux"
      }
    ]
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

    • 11

  2. You have to extend the library to paint the line.

    var originalLineDraw = Chart.controllers.line.prototype.draw;
var ctx = document.getElementById('myChart').getContext('2d');

Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);

    var chart = this.chart;
    var ctx = chart.chart.ctx;

    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.left, yaxis.getPixelForValue(index, undefined));
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.right, yaxis.getPixelForValue(index, undefined));
      ctx.stroke();
      ctx.restore();
    }
  }
});

new Chart(ctx,  {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
    datasets: [{
      label: 'Reparaciones/día',
      data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
      backgroundColor: "rgba(0,255,51,0.5)"
    }, {
      label: 'Totales',
      data: [0, 4, 5, 8, 9, 9 ,9 , 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 68],
      backgroundColor: "rgba(0,153,255,0.5)"
    }],
    lineAtIndex: 15
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

    • 5