[FEATURE] Charts as modules

[jeantoledo]

I think that a modern chart library should work in the following way:

import PieChart from 'chart/pie';
new PieChart(/necessary stuff/);

Prós:

• The page only requests js for a specific chart.
• Better use of single responsibility pattern.
• Better IntelliSense??
• ...

What you think guys?

Thanks.

[etimberg]

Definitely a good enhancement to consider that makes some things simpler. Would definitely be a breaking change though

[benmccann]

@simonbrunel said in #4303 that he was going to cleanup the modules and switch them to ES6. Would we want to implement something like this as part of that change?

[willgm]

@etimberg, not necessary a breaking change, this can be completely optional, as it is now a days with https://github.com/ReactiveX/rxjs

[etimberg]

The breaking change is that right now we have no concept of a different class for each chart type. I'm wary of breaking things with a change that introduces that

For example, would these return the same classes?

var mychart = new Chart(ctx, {
  type: 'pie'
});
var mychart = new PieChart(ctx, {});

Another potential question: how would we handle mixed chart types?

[willgm]

I believe the API doesn't need to change in order to have partial imports.

For example, RxJS have more then one usage approach for it, one of then is the follow:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

Observable.of(1,2,3).map(x => x + '!!!'); // etc

Chart.js could use a similar approach like:

import { Chart } from 'Chart.js/Chart';
import 'Chart.js/add/pie';

var mychart = new Chart(ctx, {
  type: 'pie'
});

[etimberg]

@willgm that style of imports would definitely work well with our code. We could even do the same for importing new scale types (log, time, etc).

[aldo-roman]

I found a workaround for this issue. The code is on Typescript:

import * as core from 'chart.js/src/core/core.js';
import * as helpers from 'chart.js/src/core/core.helpers';
import * as platform from 'chart.js/src/platforms/platform.js';
import * as canvasHelpers from 'chart.js/src/core/core.canvasHelpers';
import * as element from 'chart.js/src/core/core.element';
import * as plugin from 'chart.js/src/core/core.plugin';
import * as animation from 'chart.js/src/core/core.animation';
import * as controller from 'chart.js/src/core/core.controller';
import * as datasetController from 'chart.js/src/core/core.datasetController';
import * as layoutService from 'chart.js/src/core/core.layoutService';
import * as scaleService from 'chart.js/src/core/core.scaleService';
import * as ticks from 'chart.js/src/core/core.ticks';
import * as scale from 'chart.js/src/core/core.scale';
import * as interaction from 'chart.js/src/core/core.interaction';
import * as tooltip from 'chart.js/src/core/core.tooltip';
import * as arc from 'chart.js/src/elements/element.arc';
import * as line from 'chart.js/src/elements/element.line';
import * as linearbase from 'chart.js/src/scales/scale.linearbase';
import * as category from 'chart.js/src/scales/scale.category';
import * as linear from 'chart.js/src/scales/scale.linear';
import * as doughnut from 'chart.js/src/controllers/controller.doughnut';
import * as Doughnut from 'chart.js/src/charts/Chart.Doughnut';

const Chart = core();
helpers(Chart);
platform(Chart);
canvasHelpers(Chart);
element(Chart);
plugin(Chart);
animation(Chart);
controller(Chart);
datasetController(Chart);
layoutService(Chart);
scaleService(Chart);
ticks(Chart);
scale(Chart);
interaction(Chart);
tooltip(Chart);

arc(Chart);
line(Chart);
linearbase(Chart);
category(Chart);
linear(Chart);
doughnut(Chart);
Doughnut(Chart);

Then:

const doughnutChart = new Chart(ctx, {
      type: 'doughnut',
      data: data,
      options: options
});

ChartJS is on package.json
The current setup only uses Doughnut chart

[backspaces]

When will 3.0 arrive? Any beta available?

BTW: Here is a related closed issue: #5179