CODEWITHSUNDEEP
javascriptchart.js
Billy
Billy

Reputation: 43

How to change grid line width for one specific line

I need help with changing the line width(or color) on one specific grid-line on a Chartjs chart.

In the example below I would like to increase the grid-line width(or change color) of the horizontal gridline at y-axis 60 only. I have tried my best to find a solution within the Chartjs documentation but failed. Perhaps there is no support for this at the moment, and if so I'd like to know if anyone could help me add this feature.

https://i.sstatic.net/nFB77.jpg

Thank you !

Upvotes: 4

Views: 2006

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

You can extend the chart to override the scale draw function and draw a thicker / differently coloured line where you want

Preview

enter image description here

Script

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function(data){
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        var originalScaleDraw = this.scale.draw;
        this.scale.draw = function() {
             originalScaleDraw.apply(this, arguments);
             this.ctx.save();
             this.ctx.beginPath();
             this.ctx.lineWidth = this.gridLineWidth * 5;
             this.ctx.strokeStyle = "rgba(120,120,220,1)";
             this.ctx.moveTo(Math.round(this.xScalePaddingLeft), this.calculateY(60));
             this.ctx.lineTo(this.width, this.calculateY(60));
             this.ctx.stroke();
             this.ctx.closePath();
             this.ctx.restore();
        }
    }
});

and then

...
new Chart(ctx).BarAlt(data);

Fiddle - http://jsfiddle.net/udojrq57/

Upvotes: 3

Related Questions