score:0

i was facing the same issue when using chartjs 3.0. i used the following code to get the horizontal line displayed

var horizonallineplugin = {
id : 'horizontalline',
afterdraw: function (chartinstance) {
    // var yscale = chartinstance.scales["y-axis-0"];
    var yscale = chartinstance.scales['y'];
    // var canvas = chartinstance.chart;
    var canvas = chartinstance.canvas;
    var ctx = chartinstance.ctx;
    var index;
    var line;
    var style;
    var yvalue;

    if (chartinstance.config._config.options.horizontalline) {
        for (index = 0; index < chartinstance.config._config.options.horizontalline.length; index++) {
            line = chartinstance.config._config.options.horizontalline[index];

            if (!line.style) {
                style = "rgba(169,169,169, .6)";
            } else {
                style = line.style;
            }

            if (line.y) {
                yvalue = yscale.getpixelforvalue(line.y);
            } else {
                yvalue = 0;
            }

            ctx.linewidth = 3;

            if (yvalue) {
                ctx.beginpath();
                ctx.moveto(20, yvalue);
                // ctx.moveto(0, yvalue);
                ctx.lineto(canvas.width, yvalue);
                ctx.strokestyle = style;
                ctx.stroke();
            }

            if (line.text) {
                ctx.fillstyle = style;
                ctx.filltext(line.text, 0, yvalue + ctx.linewidth);
            }
        }
        return;
    };
}
};
chart.register(horizonallineplugin);

score:3

chartinstance.chart is undefined. not sure is that a migration issue to chart.js ver 3.0...

try the following:

<!doctype html>
<html lang="en">
<head>
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.0.0-beta.6/chart.js"></script>

  <style>
    .container{
      position: relative;
      width: 50vw;
    }
  </style>
</head>
<body>
  <canvas id="mychart" class="container"></canvas>

<script>
  var canvas = document.getelementbyid("mychart");
  var ctx = canvas.getcontext("2d");

  var horizonallineplugin = {
    id: 'horizontalline',
    afterdraw: function(chartinstance) {
    var yscale = chartinstance.scales["y"];

    // chartinstance.chart is undefined
    //var canvas = chartinstance.chart;
   // console.log(canvas);
   // var ctx = canvas.ctx;
    var index;
    var line;
    var style;

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

        if (!line.style) {
          style = "rgba(169,169,169, .6)";
        } else {
          style = line.style;
        }

        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.strokestyle = style;
          ctx.stroke();
        }

        if (line.text) {
          ctx.fillstyle = style;
          ctx.filltext(line.text, 0, yvalue + ctx.linewidth);
        }
      }
      return;
    }
  }
};


var data = {
  labels: ["january", "february", "march", "april", "may", "june", "july"],
  datasets: [{
    label: "mydataset01",
    fill: false,
    linetension: 0.1,
    backgroundcolor: "rgba(75,192,192,0.4)",
    bordercolor: "rgba(75,192,192,1)",
    data: [65, 59, 80, 81, 56, 55, 40],
  },
]
};
//when uncommenting below line, graph is created without horizontal lines
chart.register(horizonallineplugin);
var mychart = new chart(ctx, {
  type: 'line',
  data: data,
  options: {
    "horizontalline": [{
      "y": 75.8,
      "style": "#ff0000",
      "text": "upper-limit"
    }, {
      "y": 62.3,
      "style": "#00ff00",
      "text": "avg"
    }, {
      "y": 48.8,
      "style": "#0000ff",
      "text": "lower-limit"
    }],

    
   
  }
});
</script>

here is the code above in jsfiddle - working!


Related Query

More Query from same tag