Chart.js - draw horizontal line in Bar Chart (type bar)

Question

Good evening , I want to draw a horizontal line on a graph Bar Chart using Chart.js .

I read the question Chart.js - draw horizontal line and I could not draw the line on a Bar Chart, as indicated is the implementation for Line Chart.

My code is implemented to jsfiddle

HTML

<div>
  <canvas id="ctx"></canvas>
</div>

JS

var data = {
    labels: ["Docente 1", "Docente 2", "Docente 3", "Docente 4", "Docente 5", "Docente 6", "Docente 7"],
    datasets: [
        {
            label: "Semestre 2017-I",
            borderWidth: 1,
            data: [3.65, 2.59, 1.80, 2.81, 0.56, 0.55, 3.40]
        }
    ]
};            

var ctx = document.getElementById("ctx");

var myBarChart = new Chart(ctx, {
   type: 'bar',
   data: data
});

and it would be able to draw the horizontal line, obtaining a graph of the form: http://i.stack.imgur.com/QlOKG.png

This could may be help stackoverflow.com/questions/25811425/… & jsfiddle.net/7a4hhzge/4 & plnkr.co/edit/TvY5tz?p=preview — Lucky
My case is different from the above, I want the line is horizontal. The answer is to stackoverflow.com/a/38568203/3814222 — HenRogTR
Yes, I thought that would help you. Anyway, your accepted answer has similar code to the jsfiddle link I posted above. And the difference between a horizontal and a curved line depends on the data you pass. — Lucky

Daniel Barral Daniel Barral · Accepted Answer · 2016-07-25T12:46:50

HTML:

<div>
  <canvas id="ctx" width="600" height="400"></canvas>
</div>

JS:

var data = {
                labels: ["Docente 1", "Docente 2", "Docente 3", "Docente 4", "Docente 5", "Docente 6", "Docente 7"],
                datasets: [
                    {
                        label: "Semestre 2017-I",
                        borderWidth: 1,
                        data: [3.65, 2.59, 1.80, 2.81, 0.56, 0.55, 3.40]
                    }
                ]
            };            

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

Chart.types.Bar.extend({
    name: "BarWithLine",
    initialize: function () {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
    },
    draw: function () {
        Chart.types.Bar.prototype.draw.apply(this, arguments);

        var lineHeight = 2; // <----

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(0, this.scale.calculateY(lineHeight));
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(this.chart.width, this.scale.calculateY(lineHeight));
        this.chart.ctx.stroke();
    }
});

var myBarChart = new Chart(ctx).BarWithLine(data, {
  type: 'bar',
  data: data
});

Here is the fiddle: http://jsfiddle.net/zk9oc4c9/

Important: I changed the Chart.js library URL to: http://www.chartjs.org/assets/Chart.min.js

And removed https from the fiddle.

Chart.js - draw horizontal line in Bar Chart (type bar)

1 Answers