Hi, great work and thanks for the example!

I have a few questions on this port I cannot figure out, and I was hoping I might be able to ask here, for learning purposes.

How did you include the dependencies Chart.js uses natively?
Which Chart.js file does this correspond to?
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js I cannot locate this on the Chart.js github page. Is this generated somehow?

Hi, can you add a timer to show how you can update the chart dynamically?

import 'dart:async';
import 'dart:html';
import 'dart:math' as math;

import 'package:chartjs/chartjs.dart';

void main() {
  var rnd = new math.Random();
  var months = <String>["January", "February", "March", "April", "May", "June"];

  final LinearChartData data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
    new ChartDataSets(
        label: "My First dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        data: months.map((_) => rnd.nextInt(100)).toList()),
    new ChartDataSets(
        label: "My Second dataset",
        backgroundColor: "rgba(151,187,205,0.2)",
        data: months.map((_) => rnd.nextInt(100)).toList())
  ]);

  final ChartConfiguration config = new ChartConfiguration(
      type: 'line', data: data, options: new ChartOptions(responsive: true));

  final Chart chart = new Chart(querySelector('#canvas') as CanvasElement, config);

  new Timer.periodic(new Duration(milliseconds: 500),(_) {
      data.datasets.first.data[1] = rnd.nextInt(100);
      data.datasets.first.data[2] = rnd.nextInt(100);
      chart.update();
  });
}

When I try to use the example code (or any other code to create charts) in angular 5 (Dartlang 2 stable) I always get this error:
EXCEPTION: TypeError: Cannot read property 'Chart' of undefined

I'm debugging the code, everything seems correct except the last line.

(Devtools screenshot)

I tried renaming the import (as prefix) and the problem persisted. ¿Any Idea?

These are my dependencies:

dependencies:
  angular: ^5.0.0
  angular_forms: ^2.0.0
  angular_router: ^2.0.0-alpha+19
  bootstrap_sass: any
  json_serializable: ^1.2.1
  chartjs: ^0.5.0

dev_dependencies:
  angular_test: ^2.0.0
  build_runner: ^0.10.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  test: ^1.0.0
  sass_builder: ^2.0.0

And this is the code:

void ngOnInit() {
    new Future.delayed(const Duration(seconds: 2), () => createChart());
  }

  void createChart() {
    var rnd = new math.Random();
    var months = <String>[
      'January',
      'February',
      'March',
      'April',
      'May',
      'June'
    ];

    var data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
      new ChartDataSets(
          label: 'My First dataset',
          backgroundColor: 'rgba(220,220,220,0.2)',
          data: months.map((_) => rnd.nextInt(100)).toList()),
      new ChartDataSets(
          label: 'My Second dataset',
          backgroundColor: 'rgba(151,187,205,0.2)',
          data: months.map((_) => rnd.nextInt(100)).toList())
    ]);

    var config = new ChartConfiguration(
        type: 'line', data: data, options: new ChartOptions(responsive: true));

    CanvasElement canvas = querySelector('#canvas');

    new Chart(canvas, config);
  }

Cheers

There are two attributes for positioning legend:

• position - implemented - sets whether the legend is top, bottom, left, right
• align - not implemented - sets the alignment of the legend - start, center, end

Solution: just add to the begging of class ChartLegendOptions:

external String /*'start'|'center'|'end'*/ get align;
external set align(String /*'start'|'center'|'end'*/ v);

and

String align,

to the top of the external factory ChartLegendOptions at the bottom of the class.

Hi,
Can we use this in a flutter-for-web app? If so an example would be greatly appreciated.
Thanks!

Any plan to upgrade this package to support NNBD?

I'm trying to define a custom chart legend for a line chart. The chart itself works fine; when defining it without a custom legend it renders, no problem. However, I'd like the chart to have a legend to explain different line styles (i.e, a solid and a dashed line). However, when I try this using the code below, I get the error:

EXCEPTION: NoSuchMethodError: method not found: 'call' (labelOpts.generateLabels.call is not a function)
STACKTRACE: 
TypeError: labelOpts.generateLabels.call is not a function
    at ChartElement.buildLabels
[...]

Is this a bug or am I doing something wrong?

final config = ChartConfiguration(
      type: 'line',
      data: data,
      options: ChartOptions(
        responsive: true,
        elements: ChartElementsOptions(point: ChartPointOptions(radius: 0)),
        scales: ChartScales<LinearTickOptions>(
          xAxes: [ChartXAxe(display: false)],
          yAxes: [
            ChartYAxe(
              type: 'linear',
            )
          ],
        ),
        legend: ChartLegendOptions(
            labels: ChartLegendLabelOptions(
              generateLabels: (_) => '<div>Test</div>',
            )),
      ),
 );

final c = Chart(querySelector('.chart'), config);
final htmlValidator = NodeValidatorBuilder.common();
querySelector('.chart--legend')
      .appendHtml(c.generateLegend(), validator: htmlValidator);

Thanks for this great library. I've used it to good effect for a number of charts. However, I'm having a bit of difficulty with a "time"-based xAxis.

I can create a bar chart with a "time" x-axis, and it runs fine in Chromium and I see all the bars without issue. But when compiled and run in Chrome, the graph renders but the x axis is blank and no bars are shown.

Is this a known bug or could there be something I'm doing wrong?

//dateLabels is a List of DateTime objects
//dateCounts is a List of integers

    List xAxes = [];
    List yAxes = [];

    ChartXAxe xAxe = new ChartXAxe();

    TimeDisplayFormat tdf = new TimeDisplayFormat();
    tdf.day = 'MMM DD';

    TimeScale ts = new TimeScale();
    ts.displayFormats = tdf;
    ts.tooltipFormat = "MMM DD";
    ts.unit = "day";
    ts.round = "day";

    xAxe.type = "time";
    xAxe.display = true;
    xAxe.time = ts;
    xAxe.barPercentage= .2;

    ChartYAxe yAxe = new ChartYAxe();
    yAxe.display = true;

    xAxes.add(xAxe);
    yAxes.add(yAxe);

    List <ChartDataSets> chartDatasets = [
      new ChartDataSets(
          label: "MRP tasks",
          data: dateCounts,
          backgroundColor: "rgba(220,20,20,0.5)"
      )
    ];

    var data = new LinearChartData(datasets: chartDatasets, labels: dateLabels);
    ChartScales chartScales = new ChartScales(xAxes: xAxes, yAxes: yAxes);
    ChartOptions chartOptions = new ChartOptions(responsive: true, scales: chartScales);

    var config = new ChartConfiguration(
      type: chartType,
      data: data,
      options: chartOptions,
    );

    Chart chart = new Chart(canvasEl, config);

LinearInstance needs the function getBarsAtEvent for working with Bar Charts.

After the port to 2.0.0, now seeing this issue with the code below:

Abstract classes can't be created with a 'new' expression.

var config = new ChartConfiguration( type: 'line', data: data, options: new ChartOptions( responsive: true, scales: new ChartScales(type: 'linear', yAxes: [new ChartYAxe(type: 'linear', ticks: new TickOptions(min: 3000, max: 110000))])));

It seems the issue is similar to this issue:
#26 (this fixed "ChartYAxe")
and / or
#22

Hi,
this package need to be updated in order to work with chart-js 3.6.2.
Now I use this package with chart-js 2.9.3

Lot of functions and features now aren't usable.
Let me know if you're going to invest some time updating this package or not.

Thank you very much

Is it possible to have the spanGaps option?
spanGaps: If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line.

I have looked at Chartjs examples in Javascript and tried to implement the dart version of it with the following result.

var xAx = charts.ChartXAxe(
    display: true,
    barThickness: 2,
    type: 'time',
    time: charts.TimeScale(
      parser: "HH:mm:ss",
      unit: 'hour',
      unitStepSize: 1,
      //round: 'hour', // this will round the data.
      tooltipFormat: "HH:mm:ss",
      displayFormats: charts.TimeDisplayFormat(hour: 'HH:mm:ss'),
    ),
  );

putting this xAxis configuration inside of my ChartConfiguration;

var config = charts.ChartConfiguration(
    type: 'line',
    data: data,
    options: charts.ChartOptions(
      responsive: true,
      scales:
          charts.ChartScales<charts.TickOptions>(xAxes: [xAx], yAxes: [yAx]),
    ),
  );

This, however, crashes without any error messages.

Please, add to the example/example.dart any example of passing a function to ChartJS.

When using chartjs with Dart 2.8.1, I get the an error requesting the use of the 'external' keyword for the fake constructors on lines 28 and 85 of chartjs.dart

Error compiling dartdevc module:chartjs|lib/chartjs.ddc.js

packages/chartjs/chartjs.dart:28:3: Error: JS interop classes do not support non-external constructors.
Try annotating with external.
  Chart.fakeConstructor$();
  
Try annotating with external.
  PluginServiceStatic.fakeConstructor$();
  (line 85)

I tried to use chartjs.dart with AngularDart. I added chartjs.dart as a dependency and put the chart.js in the header of my index.html. Then I wrapped your example in a component:

import 'package:angular2/angular2.dart';
import 'dart:html';
import 'dart:math' as math;

import 'package:chartjs/chartjs.dart';

@Component(
    selector: 'statistics',
    template: '''<h1>Statistics</h1>
          <div class="wrapper">
            <canvas id="quackChart" height="450" width="600"></canvas>
          </div>''',
    styleUrls: const ['statistics_component.css'])
class StatisticsComponent {

  void ngOnInit() => renderChart();

  void renderChart() {
    var rnd = new math.Random();
    var months = <String>["January", "February", "March", "April", "May", "June"];

    var data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
      new ChartDataSets(
          label: "My First dataset",
          backgroundColor: "rgba(220,220,220,0.2)",
          data: months.map((_) => rnd.nextInt(100)).toList()),
      new ChartDataSets(
          label: "My Second dataset",
          backgroundColor: "rgba(151,187,205,0.2)",
          data: months.map((_) => rnd.nextInt(100)).toList())
    ]);

    var config = new ChartConfiguration(
        type: 'line', data: data, options: new ChartOptions(responsive: true));

    new Chart(querySelector('#quackChart') as CanvasElement, config);
  }

}

Unfortunately the chart doesn't render. There are no errors in the console. Is there a known issue with using chartjs.dart and Angular2 together?

Hi

How create a mixed charts ?

http://www.chartjs.org/docs/latest/charts/mixed.html

I was using chartjs successfully in my AngularDart project up until this morning when I started upgrading to the 2.0.0 official public release (I was using the 2.0.65 dev release).

The compiler now complains about code like this

ChartXAxe xAxe = new ChartXAxe();

with an error of:

error: Abstract classes can't be created with a 'new' expression.

Am I using the library wrong when I try to instantiate things like ChartXAxe when building up my chart in the component .dart class?

is there any way to use this library in flutter?
thanks a lot
kind regards

missing the layout field in the ChartOptions class

i fix this problem
external num get cornerRadius; external set cornerRadius(num v); at 370 line
num cornerRadius, at 399 line

hi,
someone has an example to create a stacked bar chart?
I see some example:
http://www.chartjs.org/samples/latest/charts/bar/stacked.html
https://github.com/chartjs/Chart.js/blob/master/samples/charts/bar/stacked.html

and the option "stacked: true" in the axes but in dart doesn't work for me.

For the moment I'm using the version ^0.4.0+1

UPDATE:
Now works with stacked: true

// define X Axe
ChartXAxe chartScaleX = new ChartXAxe(stacked: true);
// define Y Axe
ChartYAxe chartScaleY = new ChartYAxe(stacked: true);

// set chart's data
LinearChartData data = new LinearChartData(
    labels: labels,
    datasets: <ChartDataSets>[
      new ChartDataSets(
          label: "min",
          backgroundColor: barColors[0],
          data: data1),
      new ChartDataSets(
          label: "avg",
          backgroundColor: barColors[1], 
          data: data2),
      new ChartDataSets(
          label: "max",
          backgroundColor: barColors[3], 
          data: data3)
    ]);

Unable to render chart in UI ,throwing the below error..

EXCEPTION: NullError: invalid member on null: 'length'
STACKTRACE:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js 9853:20 acquireContext
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js 3795:27 construct
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js 6340:8 new Chart
package:chart/app_component.dart 27:3 showChart

please find the poject in attachment.

chart.zip

对于初学Flutter者，看到这些代码一团迷雾，请问应该如何在fullter项目中使用此代码库？

How to use Chartjs label plugin in dart

var config = ChartConfiguration( 
        options: ChartOptions(
            responsive: true,
            legend: ChartLegendOptions(position: 'left'),
            title: ChartTitleOptions(display: true, position: 'left'),  
            ),
        type: 'pie', 
        data: LinearChartData(labels: [
          'Anulado',
          'Andamento',
          'Rescindido',
          'Concluido',
          'Aberto',
          'Paralizado'
        ], datasets: <ChartDataSets>[
          ChartDataSets(data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
          ], backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(255, 99, 180)',
          ], label: 'Dataset 1')
        ]));  
    Chart(canvasElement, config);           
    Chart.pluginService.register(Pl());

class Pl implements PluginServiceRegistrationOptions{
  @override
  void afterDatasetsDraw(Chart chartInstance, String easing) {
    // TODO: implement afterDatasetsDraw
  }

  @override
  void afterDatasetsUpdate(Chart chartInstance) {
    // TODO: implement afterDatasetsUpdate
  }

  @override
  void afterDraw(Chart chartInstance, String easing) {
   if(chartInstance.config.options.plugin_name) {

   }
    // TODO: implement afterDraw
  }

  @override
  void afterEvent(Chart chartInstance, html.Event event) {
    // TODO: implement afterEvent
  }

  @override
  void afterInit(Chart chartInstance) {
    // TODO: implement afterInit
  }

  @override
  void afterScaleUpdate(Chart chartInstance) {
    // TODO: implement afterScaleUpdate
  }

  @override
  void afterUpdate(Chart chartInstance) {
    // TODO: implement afterUpdate
  }

  @override
  void beforeDatasetsDraw(Chart chartInstance, String easing) {
    // TODO: implement beforeDatasetsDraw
  }

  @override
  void beforeDatasetsUpdate(Chart chartInstance) {
    // TODO: implement beforeDatasetsUpdate
  }

  @override
  void beforeDraw(Chart chartInstance, String easing) {
    // TODO: implement beforeDraw
  }

  @override
  void beforeEvent(Chart chartInstance, html.Event event) {
    // TODO: implement beforeEvent
  }

  @override
  void beforeInit(Chart chartInstance) {
    // TODO: implement beforeInit
  }

  @override
  void beforeRender(Chart chartInstance) {
    // TODO: implement beforeRender
  }

  @override
  void beforeUpdate(Chart chartInstance) {
    // TODO: implement beforeUpdate
  }

  @override
  void destroy(Chart chartInstance) {
    // TODO: implement destroy
  }

  @override
  void resize(Chart chartInstance, Size newChartSize) {
    // TODO: implement resize
  }

}

in javascript

var chart = new Chart(ctx, {
    plugins: [ChartDataLabels],
    options: {
        // ...
    }
})

https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#integration

I am facing a problem using the github repository instead of the pub package (v0.3.2). I believe that the same problem exists for version 0.4.0+1.

It looks like the external factory constructors are not getting generated or just missing.

Example is ChartXAxe class which was:

@anonymous
@JS()
abstract class ChartXAxe implements CommonAxe {
  external num get categoryPercentage;
  external set categoryPercentage(num v);
  external num get barPercentage;
  external set barPercentage(num v);
  external TimeScale get time;
  external set time(TimeScale v);
  external factory ChartXAxe(
      {num categoryPercentage,
      num barPercentage,
      TimeScale time,
      String /*'category'|'linear'|'logarithmic'|'time'|'radialLinear'|String*/ type,
      bool display,
      String id,
      bool stacked,
      String position,
      TickOptions ticks,
      GridLineOptions gridLines,
      num barThickness,
      ScaleTitleOptions scaleLabel});
}

and changed in dd29e3a (link to line) to:

@anonymous
@JS()
abstract class ChartXAxe implements CommonAxe {
  external num get categoryPercentage;
  external set categoryPercentage(num v);
  external num get barPercentage;
  external set barPercentage(num v);
  external TimeScale get time;
  external set time(TimeScale v);
}

The same applies for other classes as well, for example LinearTickOptions, ChartYAxe, ChartLegendLabelOptions, ChartLegendOptions.

I can take those constructors and move them to the latest code, carefully add any new options that were added and push another PR, unless they can be auto generated them somehow.

I am trying to use chartjs.dart in my project. However, getting the error: TypeError: Cannot read property 'Chart' of undefined. Would greatly appreciate any thoughts on how to resolve this. The example does work when I download it and run it. Just not in my project.

My dart version is: Dart VM version: 2.1.1-dev.3.2 (Thu Jan 24 11:50:07 2019 +0100) on "macos_x64" and my pubspec.yaml is:

name: my_proj
version: 0.0.1

environment:
sdk: '>=2.0.0 <3.0.0'

dependencies:
angular: ^5.2.0
angular_components: ^0.11.0
angular_forms: ^2.1.1
angular_router: ^2.0.0-alpha+21
#quiver: ^0.28.0
js: ^0.6.0
bootstrap_sass: any
intl: ^0.15.7
chartjs: ^0.5.0
analyzer: ^0.34.0
pam_shared_libs:
path: ../pam_shared_libs

dev_dependencies:
angular_test: ^2.0.0
build_runner: ^1.2.3
build_test: ^0.10.4
build_web_compilers: ^1.1.0
#intl_translation: ^0.17.2
#test: ^0.12.30
js: ^0.6.1+1
sass_builder: ^2.1.2
#angular_analyzer_plugin: ^0.0.17+5

analyzer:
strong-mode: true
transformers:

• sass_builder

• angular:
  entry_points:
  - web/main.dart

• test/pub_serve:
  $include: test/**_test.dart

If I run webdev serve then ChartTooltipOptions callbacks work perfectly.

Inside new ChartOptions()

//snip tooltips: new ChartTooltipOptions( callbacks: new ChartTooltipCallback(label: (item, data) { String ele = item.xLabel; Set names = new Set(); nameList.forEach((a) { names.add(a); } }); return names.toList(); }, title: (_) { return "Title"; })) //snip
Once I webdev build and run on a live site then the chart hangs with an error:
Chart.bundle.js:13069 Uncaught TypeError: callbacks.title.apply is not a function at ChartElement.getTitle (Chart.bundle.js:13069) at ChartElement.update (Chart.bundle.js:13196) at ChartElement.handleEvent (Chart.bundle.js:13531) at Chart.eventHandler (Chart.bundle.js:8952) at listener (Chart.bundle.js:8886) at HTMLCanvasElement.proxies

I've also replaces my Chart.bundle.js with the CDN Chart.js from the example. Same result - works when being served locally, doesn't work once compiled.
I've also removed the title callback and then I get the same error with the label callback: callbacks.label.apply is not a function

Hiya,

Thanks for maintaining this. I was wondering if there are any plans to move to the ChartJS 2.0 now that it's released? It fixes a ton of bugs and adds some nice new features.

Kind regards,
Mo.

Hi,

I know there're already same questions #40 #20
But I saw in pub.dev this package support Flutter Web.
I just want to clarify that the flag is correct.

thank you.