CODEWITHSUNDEEP
javascriptchart.js
SomeStudent
SomeStudent

Reputation: 3048

Chart.js what is the new syntax for extending?

So while looking at some code samples for Chart.js I came across the following JSFiddle ( http://jsfiddle.net/dbyze2ga/14/ ). When I coped it over to my IDE (brackets.io) it did not work until I realized that this jsfiddle uses chart.js 1.x.x.

What is the current syntax for extending Charts using v2.0? I tried checking the documentation; but it honestly left me even more confused. Doesn't help that, at least in the case of Brackets, it won't show any real useful dot completion for the chart.

The JS code in question is: 

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

Upvotes: 0

Views: 7951

Answers (1)

mugimugi
mugimugi

Reputation: 446

2.0 changes are explained in documentation:

var myLineExtend = Chart.controllers.line.prototype.draw;

var ctx = document.getElementById("LineWithLine").getContext("2d");

var config = {
  type: 'line',
  data: {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
      data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }],
    datasetFill : false,
    lineAtIndex: 2
  }
};

Chart.helpers.extend(Chart.controllers.line.prototype, {
    draw: function () {
    
      myLineExtend.apply(this, arguments);   

      var chart = this.chart;
      var ctx = chart.chart.ctx;

      var index = chart.config.data.lineAtIndex;
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top + 24);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
      ctx.stroke();
      ctx.restore();

      ctx.textAlign = 'center';
      ctx.fillText("TODAY", xaxis.getPixelForValue(undefined, index), yaxis.top + 12);

    }
});

new Chart(ctx, config);
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<canvas id="LineWithLine"></canvas>

Upvotes: 2

Related Questions