flutter_web_chartjs 0.2.5

  • Readme
  • Changelog
  • Example
  • Installing
  • new66

chartjs running on flutter web

A ChartJS wrapper for Flutter Web.

This project will be lightly maintained by the original author. Contributions are welcome.

Warning:: This plugin still under development.

Getting Started #

Include in your pubspec.yaml:

dependencies:  
   flutter_web_chartjs: ^0.2.5

Open your web/index.html file, and include this lines to your head tag:

<!-- this is the chartjs library - you can use other chartjs versions if you needed -->
<script  src="https://cdn.jsdelivr.net/gh/vramosx/flutter_web_chartjs@v0.2.5-alpha/js/chart.min.js"></script>

<!-- this is a js to communicate with flutter -->
<script  src="https://cdn.jsdelivr.net/gh/vramosx/flutter_web_chartjs@v0.2.5-alpha/js/chartjs.wrapper.utils.min.js"  type="application/javascript"></script>

Usage #

This library re-creates the ChartJS configuration, with Flutter classes. You can use the ChartJS documentation to learn how to use. (chartjs documentation)

Every configuration of ChartJS exists in this package with the prefix 'Chart', example:

  • WARNING: Some configuration of ChartJS still on development

ChartJS - Javascript:

var myChart = new Chart(ctx, {
     type: 'bar',
     data: barChartData,
     options: {
		responsive: true,
		legend: {
			position: 'top',
		}
	}
});

ChartJS - Flutter Web:

@override
Widget build(BuildContext context) {
    return ChartJS(
    id: 'my-chart' // you need to set a unique id
    config: ChartConfig(
        type: ChartType.line,
        options: ChartOptions(
            responsive: true,
            legend: ChartLegend(
            position: ChartLegendPosition.top
            ),
        ),
    data: ChartData(
            labels: [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September'
            ],
            datasets: [
                ChartDataset(
                    data: [15,23,56,95,44,54,88,12],
                    label: 'dataset 1',
                    backgroundColor:  Colors.blue.withOpacity(0.4)
                )
            ]
        )
     );
}

Some differences between JS version and Flutter Web version: #

1 - Every literal option(string) on JS, is a enum on this package:

JS:
new Chart(ctx, {
     type: 'bar' // literal option
     ...
)

Flutter Web:

ChartJS(
    config: ChartConfig(
        type: ChartType.line, // enum of string options
    )
    ...
);

2 - You can use opacity and linear gradient to background and border options:

return ChartJS(
    id: 'my-chart' // you need to set a unique id
    config: ChartConfig(
        type: ChartType.line,
        options: ChartOptions(
            responsive: true,
            legend: ChartLegend(
            position: ChartLegendPosition.top
            ),
        ),
        data: ChartData(
            datasets: [
                    ChartDataset(
                        data: [15,23,56,95,44,54,88,12],
                        label: 'dataset 1',
                        backgroundColor:  Colors.blue.withOpacity(0.4) // background with opacity
                        borderColor: LinearGradient(  // You can use LinearGradient. (only colors and stops properties are supported)
                            colors: [
                                Colors.red,
                                Colors.blue
                            ],
                            stops: [
                                0, 1
                            ]
                        )
                    )
                ]
        )
	);

3 - You can use callback to format the tooltip:

ChartJS(
    ...
    options: ChartOptions(
        tooltip: ChartTooltip(
        intersect:  false,
        mode: ChartTooltipMode.isIndex,
        callbacks:  ChartCallbacks(
        label: (ChartTooltipItem tooltip) {
            // this method will be called from JS side
            // you can use any dart code here
            // and return the string of tooltip
            return  'R\$ ${tooltip.value}';
        }
    )
    ...
)

Like?

paypal

Thanks for your support! :)

0.2.5 #

  • Linear, time and logarithm axis support
  • Fix tooltip callback problem for Linear and Logarithm Axis.
  • Fix charts not render inside Column, Row or Wrap widget.

0.2.3 #

  • Fixed Issue: Mouse hover show old chart data.
  • Minor corrections

0.2.2 #

  • Documentation update

0.2.1 #

  • Fixed borderColor context problem.
  • Fixed tooltip callbacks.
  • Fixed LinearGradient support.

0.1.0 #

  • Initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_web_chartjs/chartjs.models.dart';
import 'package:flutter_web_chartjs/chartjs.wrapper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ChartData _chartData;
  List<ChartAxis> _chartxAxes;
  List<ChartData> _listChartData;
  List<List<ChartAxis>> _listChartAxes;
  final _isSelected = List.generate(5, (i) => i == 0 ? true : false);
  final chartData1 = ChartData(labels: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September'
  ], datasets: [
    ChartDataset(
        data: [15, 23, 56, 95, 44, 54, 88, 12],
        label: 'dataset 1',
        backgroundColor: Colors.blue.withOpacity(0.4)),
    ChartDataset(
        data: [12, 88, 54, 44, 56, 23, 15, 12],
        label: 'dataset 2',
        backgroundColor: LinearGradient(colors: [
          Colors.green.withOpacity(0.4),
          Colors.green.withOpacity(0)
        ], stops: [
          0,
          1
        ])),
  ]);

  final chartData2 = ChartData(labels: [
    'October',
    'November',
    'December',
    'January',
    'February',
    'March',
    'July',
    'August',
    'September'
  ], datasets: [
    ChartDataset(
        data: [22, 34, 56, 78, 90, 123, 98, 110, 125],
        label: 'dataset 1',
        backgroundColor: Colors.blue.withOpacity(0.4)),
    ChartDataset(
        data: [15, 23, 56, 95, 44, 54, 88, 1],
        label: 'dataset 2',
        backgroundColor: LinearGradient(colors: [
          Colors.green.withOpacity(0.4),
          Colors.green.withOpacity(0)
        ], stops: [
          0,
          1
        ])),
  ]);

  final chartDataLinear = ChartData(datasets: [
    ChartDataset(data: [
      {'x': 1, 'y': 22},
      {'x': 2, 'y': 34},
      {'x': 3, 'y': 56},
      {'x': 4, 'y': 78},
      {'x': 5, 'y': 90},
      {'x': 6, 'y': 123},
      {'x': 7, 'y': 98},
      {'x': 8, 'y': 110},
      {'x': 9, 'y': 125}
    ], label: 'dataset 1', backgroundColor: Colors.blue.withOpacity(0.4)),
    ChartDataset(
        data: [
          {'x': 1, 'y': 15},
          {'x': 2, 'y': 23},
          {'x': 3, 'y': 56},
          {'x': 4, 'y': 95},
          {'x': 5, 'y': 44},
          {'x': 6, 'y': 54},
          {'x': 7, 'y': 88},
          {'x': 8, 'y': 1},
        ],
        label: 'dataset 2',
        backgroundColor: LinearGradient(colors: [
          Colors.green.withOpacity(0.4),
          Colors.green.withOpacity(0)
        ], stops: [
          0,
          1
        ])),
  ]);

  final chartDataTime = ChartData(datasets: [
    ChartDataset(data: [
      {'x': '2020-1-1', 'y': 22},
      {'x': '2020-2-1', 'y': 34},
      {'x': '2020-3-1', 'y': 56},
      {'x': '2020-4-1', 'y': 78},
      {'x': '2020-5-1', 'y': 90},
      {'x': '2020-6-1', 'y': 123},
      {'x': '2020-7-1', 'y': 98},
      {'x': '2020-8-1', 'y': 110},
      {'x': '2020-9-1', 'y': 125}
    ], label: 'dataset 1', backgroundColor: Colors.blue.withOpacity(0.4)),
    ChartDataset(
        data: [
          {'x': '2020-1-1', 'y': 15},
          {'x': '2020-2-1', 'y': 23},
          {'x': '2020-3-1', 'y': 56},
          {'x': '2020-4-1', 'y': 95},
          {'x': '2020-5-1', 'y': 44},
          {'x': '2020-6-1', 'y': 54},
          {'x': '2020-7-1', 'y': 88},
          {'x': '2020-8-1', 'y': 1},
        ],
        label: 'dataset 2',
        backgroundColor: LinearGradient(colors: [
          Colors.green.withOpacity(0.4),
          Colors.green.withOpacity(0)
        ], stops: [
          0,
          1
        ])),
  ]);

  final chartDataLogarithm = ChartData(datasets: [
    ChartDataset(data: [
      {'x': 1, 'y': 22},
      {'x': 2, 'y': 34},
      {'x': 3, 'y': 56},
      {'x': 4, 'y': 78},
      {'x': 5, 'y': 90},
      {'x': 6, 'y': 123},
      {'x': 7, 'y': 98},
      {'x': 8, 'y': 110},
      {'x': 9, 'y': 125}
    ], label: 'dataset 1', backgroundColor: Colors.blue.withOpacity(0.4)),
    ChartDataset(
        data: [
          {'x': 1, 'y': 15},
          {'x': 2, 'y': 23},
          {'x': 3, 'y': 56},
          {'x': 4, 'y': 95},
          {'x': 5, 'y': 44},
          {'x': 6, 'y': 54},
          {'x': 7, 'y': 88},
          {'x': 8, 'y': 1},
        ],
        label: 'dataset 2',
        backgroundColor: LinearGradient(colors: [
          Colors.green.withOpacity(0.4),
          Colors.green.withOpacity(0)
        ], stops: [
          0,
          1
        ])),
  ]);

  List<ChartAxis> chartxAxes1 = [
    ChartAxis(
      type: ChartCartesianAxisType.category,
    )
  ];

  // By default type = ChartAxisType.category
  List<ChartAxis> chartxAxes2 = [ChartAxis()];

  List<ChartAxis> chartxAxesLinear = [
    ChartAxis(
      type: ChartCartesianAxisType.linear,
    )
  ];

  List<ChartAxis> chartxAxesTime = [
    ChartAxis(
      type: ChartCartesianAxisType.time,
      distribution: ChartScaleDistribution.series,
      bounds: ChartScaleBounds.data,
      time: ChartAxisTime(
        displayFormats: ChartDisplayFormats(
          month: 'MMM YY',
        ),
        isoWeekday: false,
        parser: 'YYYY-MM-DD',
        round: ChartAxisTimeUnit.month,
        tooltipFormat: 'MMM',
        unit: ChartAxisTimeUnit.month,
        minUnit: ChartAxisTimeUnit.month,
        stepSize: 2,
      )
    )
  ];

  List<ChartAxis> chartxAxesLogarithm = [
    ChartAxis(
      type: ChartCartesianAxisType.logarithmic,
    )
  ];

  @override
  void initState() {
    super.initState();
    _listChartData = [
      chartData1,
      chartData2,
      chartDataLinear,
      chartDataTime,
      chartDataLogarithm
    ];
    _listChartAxes = [
      chartxAxes1,
      chartxAxes2,
      chartxAxesLinear,
      chartxAxesTime,
      chartxAxesLogarithm
    ];
    _chartData = chartData1;
    _chartxAxes = chartxAxes1;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutter_web_chartjs'),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Expanded(
                child: ChartJS(
                  id: 'line-example',
                  config: ChartConfig(
                      type: ChartType.line,
                      options: ChartOptions(
                          animationConfiguration: ChartAnimationConfiguration(
                            duration: Duration(milliseconds: 1200),
                            easing: ChartEasing.easeOutQuart,
                          ),
                          scales: ChartScales(
                            xAxes: _chartxAxes,
                          ),
                          tooltip: ChartTooltip(
                              intersect: false,
                              mode: ChartTooltipMode.isIndex,
                              callbacks: ChartCallbacks(label: (tooltip) {
                                return 'R\$ ${tooltip.value}';
                              }))),
                      data: _chartData),
                ),
              ),
              Container(
                height: 80,
                alignment: Alignment.center,
                child: ToggleButtons(
                    isSelected: _isSelected,
                    children: [
                      Container(
                          width: 120,
                          child: Center(child: Text('Axis: Category 1'))),
                      Container(
                          width: 120,
                          child: Center(child: Text('Axis: Category 2'))),
                      Container(
                          width: 120,
                          child: Center(child: Text('Axis: Linear'))),
                      Container(
                          width: 120, child: Center(child: Text('Axis: Time'))),
                      Container(
                          width: 120,
                          child: Center(child: Text('Axis: Logarithm'))),
                    ],
                    onPressed: (index) {
                      setState(() {
                        for (var buttonIndex = 0;
                            buttonIndex < _isSelected.length;
                            buttonIndex++)
                          _isSelected[buttonIndex] = buttonIndex == index;
                        _chartData = _listChartData[index];
                        _chartxAxes = _listChartAxes[index];
                      });
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_web_chartjs: ^0.2.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_web_chartjs/flutter_web_chartjs.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
31
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
66
Learn more about scoring.

We analyzed this package on Mar 26, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/chartjs.models.dart.

Run flutter format to format lib/chartjs.models.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
flutter_web_plugins 0.0.0
js ^0.6.1+1 0.6.1+1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8