Chart.js: Unable to extend an existing controller

Expected Behavior

I had some problems to extend an existing controller with Chart.js 3.0. Then I have tested the sample into documentation https://www.chartjs.org/docs/master/developers/charts#extending-existing-chart-types, changing a little as following:

Chart.defaults.myline = Chart.defaults.line;
class Custom extends Chart.controllers.line {
    draw() {
        // Call super method first
        super.draw(arguments);
    }
};
Chart.controllers.myline = Custom;
console.log(Chart.controllers);

I was expecting to have a line chart.

Current Behavior

The issue on console is Error: "myline" is not a chart type.. Then I printed the content of Chart.controllers, expecting to find Chart.controllers.myline but was missing.

Additional question

I was using into version 2.9.3 Chart.controllers.line.extend. Can I still use it to extend an existing controller, in version 3.0.0?

Steps to Reproduce

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

Environment

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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (17 by maintainers)

Most upvoted comments

I’m not sure if .extend is still around, but I wouldn’t recommend it. Using an ES6 class with extend is much more natural.

You don’t have to do Chart.controllers.myline = Custom; unless you’ve done a script import, but I’d recommend using npm instead.

Here’s an example chart that uses Chart.js 3: https://github.com/chartjs/chartjs-chart-financial

benmccann on Jun 12, 2020

I think this is due to

import * as controllers from './controllers';
...
Chart.controllers = controllers;

I think #7435 would resolve this though.

etimberg on Jun 12, 2020