In the documentation I see that you can extend the controllers for .line, .bar, .radar, .doughnut, .polarArea, and .bubble. Can you also extend the horizontal bar controller? I am attempting to add target lines to each bar in the graph and I successfully did that by overriding the original controller. I would also like to create other horizontal graphs without the target line but since I overridden the horizontal bar controller it will always draw a target line. Here is my code for the target line with overriding the controller:
var originalHorBarController = Chart.controllers.horizontalBar;
Chart.controllers.horizontalBar = Chart.controllers.horizontalBar.extend({
draw: function(){
var self = this;
var base;
var x;
var y;
var width;
console.log(arguments);
originalHorBarController.prototype.draw.call(this, arguments[0]);
console.log(this.chart.data.labels[0]);
console.log("x:" + this.calculateBarX(1, 0) + " y:" + this.calculateBarY(1, 0) + " width:" + this.calculateBarBase(0, 0));
console.log(this.getRuler(0).barHeight);
console.log(this.chart.config.data.labels);
console.log(this.chart.config.data.datasets[0].data);
for(var i = 0; i < this.chart.data.datasets[0].data.length; i++){
base = this.calculateBarBase(0, i);
x = this.calculateBarX(i, 0);
y = this.calculateBarY(i, 0);
width = this.getRuler(i).barHeight;
this.chart.chart.ctx.beginPath();
this.chart.chart.ctx.lineWidth = "5";
this.chart.chart.ctx.strokeStyle ="black";
this.chart.chart.ctx.moveTo(x - 10, y - (width / 2));
this.chart.chart.ctx.lineTo(x - 10, y + (width / 2));
this.chart.chart.ctx.stroke();
}
}
});
new Chart(canvas, {
type: 'horizontalBar',
data: data
});
@daviddevore11 that’s because there is no default config for the new chart type.
I updated your fiddle to use the same default config as the horizontal bar https://jsfiddle.net/ntcdfs7q/2/