I want add horizontal line like here [Chart.js - draw horizontal line to my angular-chart.js (if I understand right, what I need to do is to extend the line type chart).
How and where I should do it (write own directive, try extend the char.js in angular .config)?
First of all, you need to extends Chart.js with the extend you mentionned in your post, like this : (using @jbman223 snippet)
// Extend chart.js with a new type of chart
Chart.types.Line.extend({
name: "LineWithLine",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
// Needs to be set with angular-chart options
var lineAtIndex = 2;
var point = this.datasets[0].points[lineAtIndex]
var scale = this.scale
console.log(this);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.startPoint+12, point.y);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(this.chart.width, point.y);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
}
});
Then, we have to link this new Chart type with angular-chart. Unfortunately, it is a high level of abstraction library, so there is no built-in feature for that. So, the only way I have found to do that so far is to modify angular-chart.js by adding a line in the config :
return angular.module('chart.js', [])
.provider('ChartJs', ChartJsProvider)
.factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
//...
.directive('chartLinebis', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('LineWithLine'); }]);
Finally, call angular-chart with your new chart label :
<canvas class="chart chart-linebis" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series"></canvas>
Note that it is very important that the js imports respect this order : chart.js -> myExtend.js -> angular-chart.js
JSFiddle (disclaimer : I included angular-chart.js in the middle of the snippet for import order purpose)
©2020 All rights reserved.