angular-chart add horizontal line

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

    // draw line
    this.chart.ctx.moveTo(scale.startPoint+12, point.y);
    this.chart.ctx.strokeStyle = '#ff0000';
    this.chart.ctx.lineTo(this.chart.width, point.y);

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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.