2

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)?

Community
  • 1
  • 1
Dominik Kajzar
  • 124
  • 1
  • 11

1 Answers1

3

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)

Community
  • 1
  • 1
bviale
  • 5,245
  • 3
  • 28
  • 48
  • 1
    Hi @bviale, your answer is fantastic! But where should I write the chunck of code that begins with " Chart.types.Line.extend ' [...] " ? Directly in my Chart.js file ? If yes, inside wich function ? Thanks! – Jibeee Jul 27 '16 at 16:24
  • 1
    Hi @Jibeee, as I explained at the end of my answer, the import order is a bit tricky : the "Chart.types.Line.extend" part has to be imported between Chart.js and angular-chart.js. So here are the options : - at the very end of the Chart.js file - in a new js file containing only this extend, imported after Chart.js but before angular-chart.js (elegant solution) - at the very beginning of the angular-chart.js file – bviale Jul 28 '16 at 13:48
  • @bviale Thanks for your answer, I really need this modification. I followed your instructions a second time : it doesn't throw an error but my canvas stays blank. I'm using chart.js (Version: 2.0.2) and angular-chart.js (Version: 1.0.0-beta1) for compatibility purposes, could it be a problem ? – Jibeee Jul 28 '16 at 14:12
  • 1
    @Jibeee Yes it is a problem, my snippet was designed to work with chart.js v1.0.2. The syntax to extend the line chart has changed since, check the new way here : http://www.chartjs.org/docs/#advanced-usage-extending-existing-chart-types – bviale Jul 28 '16 at 14:25
  • @bviale Ok thanks, I'm checking this out but it seems to miss some key informations and example on the docs. I create a question here : http://stackoverflow.com/questions/38633014/extending-existing-chart-types-angular-chart-js-using-chart-js-2-0 – Jibeee Jul 28 '16 at 16:15