HTML Canvas Fill Area Under Line

Question

I am drawing a horizontal line using Chart.js. Therefore I have a plugin for drawing horizontal lines and coloring the area underneath those lines:

$(document).ready(function() {
  var horizonalLinePlugin = {
    afterDraw: function(chartInstance) {
      var yScale = chartInstance.scales["y-axis-0"];
      var canvas = chartInstance.chart;
      var ctx = canvas.ctx;
      var index;
      var line;
      var strokeStyle;
      var fillStyle;

      if (chartInstance.options.horizontalLine) {
        for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
          line = chartInstance.options.horizontalLine[index];

          if (!line.strokeStyle) {
            strokeStyle = "rgba(169, 169, 169, 0.6)";
          } else {
            strokeStyle = line.strokeStyle;
          }

          if (!line.fillStyle) {
            fillStyle = 'rgba(179, 26, 57, 0.5)';
          } else {
            fillStyle = line.fillStyle;
          }

          if (line.y) {
            yValue = yScale.getPixelForValue(line.y);
          } else {
            yValue = 0;
          }

          ctx.lineWidth = 3;
          if (yValue) {
            ctx.beginPath();
            ctx.moveTo(0, yValue);
            ctx.lineTo(canvas.width, yValue);
            ctx.fillStyle = fillStyle;
            ctx.fill();
            ctx.strokeStyle = strokeStyle;
            ctx.stroke();
          }

          if (line.text) {
            ctx.fillStyle = fillStyle;
            ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
          }
        }
        return;
      };
    }
  };
  Chart.pluginService.register(horizonalLinePlugin);
});

Unfortunatelly the area under the horizontal line is not colored. I am using ctx.fill() but it does not show any effect.

Answer 1

i think you don't need a plugin therefore; that behaviour can be configured by the fill-property of each dataset

<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
var lineChartData = {
        labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
        datasets : [
            {
                type: 'line',
                label: "2017",
                backgroundColor: 'rgba(151,249,190,0.5)',
                borderColor: 'rgba(151,249,190,1)',
                borderWidth: 1,
                data : [1,2,3,4,5,6,7,8,9,10,11,12],
                fill: true
            },
            {
                type: 'line',
                label: "2018",
                backgroundColor: 'rgba(252,147,65,0.5)',
                borderColor: 'rgba(252,147,65,1)',
                borderWidth: 1,
                data : [12,11,10,9,8,7,6,5,4,3,2,1],
                fill: true
            }
        ]
    };
window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, {
        type: 'line',
        data: lineChartData,
        options: {
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Chart'
            }
        }
    });
};
</script>