bharathraj-e/high_chart

A chart library based on High Charts (.JS), able to build advanced charts like Pie chart, linear chart, etc

  

Installing

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

dependencies:
    high_chart: #latest version

Now in your Dart code, you can use:

import 'package:high_chart/high_chart.dart';

Details see pub.dev.

Usage

The high_chart package itself is very simple to use, just like a common statelessWidget:

static const _chart_data = '''{
      title: {
          text: 'Combination chart'
      },
      xAxis: {
          categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
      },
      labels: {
          items: [{
              html: 'Total fruit consumption',
              style: {
                  left: '50px',
                  top: '18px',
                  color: ( // theme
                      Highcharts.defaultOptions.title.style &&
                      Highcharts.defaultOptions.title.style.color
                  ) || 'black'
              }
          }]
      },
      series: [{
          type: 'column',
          name: 'Jane',
          data: [3, 2, 1, 3, 4]
      }, {
          type: 'column',
          name: 'John',
          data: [2, 3, 5, 7, 6]
      }, {
          type: 'column',
          name: 'Joe',
          data: [4, 3, 3, 9, 0]
      }, {
          type: 'spline',
          name: 'Average',
          data: [3, 2.67, 3, 6.33, 3.33],
          marker: {
              lineWidth: 2,
              lineColor: Highcharts.getOptions().colors[3],
              fillColor: 'white'
          }
      }, {
          type: 'pie',
          name: 'Total consumption',
          data: [{
              name: 'Jane',
              y: 13,
              color: Highcharts.getOptions().colors[0] // Jane's color
          }, {
              name: 'John',
              y: 23,
              color: Highcharts.getOptions().colors[1] // John's color
          }, {
              name: 'Joe',
              y: 19,
              color: Highcharts.getOptions().colors[2] // Joe's color
          }],
          center: [100, 80],
          size: 100,
          showInLegend: false,
          dataLabels: {
              enabled: false
          }
        }]
    }''';


    return Container(
    child: HighCharts(
        data:_chart_data,,
    ),
    width: 350,
    height: 350,
    )
    

See the full flutter_High Chart_example.

Widget Properties

data

String

( required )

High Chart is mainly configured by passing a string value to the JavaScript data property.

You can use jsonEncode() function in dart:convert to convert data in Dart object form:

source: ${jsonEncode(_data1)},

Because JavaScript don't have ''', you can use this operator to reduce some escape operators for quotas:

HighCharts(
  data: '''
  
    // data string
    
  ''',
),

To use images in option properties, we suggest the Base64 Data URL :

image: 'data:image/png;base64,iVBORw0KG...',