jquery – Horizontal "limit" line in chartjs

Question:

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 in the number 15 of the vertical axis …

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 in the value of y , the code should follow the following algorithm:

  • Add an option with the value of y in which you want to show the horizontal line (this would be done inside options when 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 within 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 )

Then you could extend that plugin to allow more than one horizontal line, put a label on the line, customize the 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 lets you 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>
Post Views: 5
Scroll to Top