Extending Existing Chart Types angular chart js using chart js 2.0

Question

I'm using the great chart.js (Version: 2.0.2) and angular-chart.js (Version: 1.0.0-beta1) for compatibility purposes. There are a lot of functionalities I would like to add to my project (like adding a horizontal line to a chart or having a rounded corners bar chart). All theses solutions use

Chart.types.[typeOftheChartToExtend].extend({..}).

I'm stuck using it with chart.js v2.0, the doc isn't very clear. How can I extend existing chart using chart.js v2.0 ?

Any advice or example would be appreciated. Thanks!

were you able to solve this issue? I too have same problem. Any help is much appreciated. — cyn
– cyn, Commented Jul 7, 2018 at 11:39

Lee Han Kyeol · Accepted Answer · 2017-03-28 07:28:05Z

3

A bit late answer but you can extend the shape of the element, not the type of the specific chart, from v2.

For example,

Chart.elements.Rectangle.prototype.draw = function() {
   // Do your draw thingy.
}

There's an issue regarding this one at the official Github repo and also a great example of implementing it.

answered Mar 28, 2017 at 7:28

Lee Han Kyeol

2,4812 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gentoo · Accepted Answer · 2016-09-01 16:17:41Z

1

Try this for the line chart:

var originalLineController = Chart.controllers.line;
Chart.controllers.line = Chart.controllers.line.extend({
    draw: function() { 
        originalLineController.prototype.draw.apply(this, arguments);
        /* own drawing code here */
    }
}

You can get the context with:

var ctx = this.chart.chart.ctx;

answered Sep 1, 2016 at 16:17

gentoo

111 bronze badge

Collectives™ on Stack Overflow

Extending Existing Chart Types angular chart js using chart js 2.0

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related