Chart.js: Controller defined by "classic" style does not work

[stockiNail]

Expected Behavior

As written on the documentation, the "classic" style should define new chart.

Current Behavior

Using the classic style, reported into documentation, you got an error:

Code

function Custom() {
  Chart.controllers.line.call(this, arguments);
}

Custom.prototype.draw = function() {
    Chart.controllers.line.prototype.draw.call(this, arguments);
}

Custom.id = 'myline';
Custom.defaults = Chart.defaults.line;

Chart.registry.addControllers(Custom);

Error

Uncaught Error: "myline" is not a registered controller.
    _get https://www.chartjs.org/dist/master/chart.js:5651
    getController https://www.chartjs.org/dist/master/chart.js:5601
    buildOrUpdateControllers https://www.chartjs.org/dist/master/chart.js:6131
    update https://www.chartjs.org/dist/master/chart.js:6168
    Chart https://www.chartjs.org/dist/master/chart.js:5949
    <anonymous> pen.js:44

Steps to Reproduce

https://codepen.io/stockinail/pen/MWKBvRQ

See the browser console log.

Environment

• Chart.js version: dist/master
• Browser name and version: FF 78.0.2

[kurkle]

Thanks for testing, it seems to be a bug in registry + documentation.
You need to extend / inherit from the parent, so that part is missing from the documentation.
Temporary workaround for the registry bug is passing an array to registerControllers: Chart.registry.registerControllers([Custom]);

[stockiNail]

Chart.registry.registerControllers([Custom]);

I got Chart.registry.registerControllers is not a function error and I don't find registerControllers in src.

Anyway I can wait for bug fixing.

[kurkle]

Sorry, addControllers

[kurkle]

(and I was hoping to catch any additional bugs by letting you get a bit further :))

[stockiNail]

(and I was hoping to catch any additional bugs by letting you get a bit further :))

Thank you! Take your time.

Unfortunately invoking addControllers with an array, I got:

Uncaught TypeError: this.getMeta is not a function
    at Custom.DatasetController (chart.js:3648)
    at Custom.LineController (chart.js:7630)
    at new Custom (pen.js:3)
    at Chart.buildOrUpdateControllers (chart.js:6138)
    at Chart.update (chart.js:6168)
    at new Chart (chart.js:5949)
    at pen.js:16

[stockiNail]

@kurkle I'm not a javascript coder but I was (and am) curious how extend / inherit and classes are working in js.

Then I have seen the core.registry.js code

https://github.com/chartjs/Chart.js/blob/7024aad38fdf5962d0f5802ff522f19e46eef10a/src/core/core.registry.js#L100

In my opinion that workaround (I don't want to say the solution) could be :

if (reg.isForType(arg) || (reg === me.plugins && arg.id) || || (reg === me.controllers && typeof arg === 'function' && arg.id)) { 

I have added the check if is a function (maybe there is a better way to check if is class and not a object).

[kurkle]

https://codepen.io/kurkle/pen/oNbMMyG

[stockiNail]

Great!! Thank you very much.

Do you want I will open a PR to fix the documentation?

[kurkle]

I did open a PR, but if you want to improve the documentation, you're welcome!

[stockiNail]

@kurkle let me thank you again. I have completed right now the porting to new chart.js for controllers features. And with your help now it's working perfectly on IE11 as well!!
Really appreciated.