How to change width of bar in bar charts in charts_flutter?

Question

Trying to use charts_flutter for bar charts but couldn't find a property to reduce the width of bars in simple bar charts.

Following is my mock:

Also, don't know how to:

-add below indexes in this package

-add values inside the bars like shown in mock.

Following is my Code:

class HiddenTicksAndLabelsAxis extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  HiddenTicksAndLabelsAxis(this.seriesList, {this.animate});

  factory HiddenTicksAndLabelsAxis.withSampleData() {
    return new HiddenTicksAndLabelsAxis(
      _createSampleData(),
      // Disable animations for image tests.
      animate: true,
    );
  }


  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,

      /// Assign a custom style for the measure axis.
      ///
      /// The NoneRenderSpec can still draw an axis line with
      /// showAxisLine=true.
      primaryMeasureAxis:
          new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()),

      /// This is an OrdinalAxisSpec to match up with BarChart's default
      /// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
      /// other charts).
      domainAxis: new charts.OrdinalAxisSpec(
          // Make sure that we draw the domain axis line.
          showAxisLine: true,
          // But don't draw anything else.
          renderSpec: new charts.NoneRenderSpec()),
    );
  }

  /// Create series list with single series
  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final globalSalesData = [
      new OrdinalSales('2014', 3, Colors.lightGreen),
      new OrdinalSales('2015', 6,Colors.lightBlue),
      new OrdinalSales('2016', 0.5,Colors.red),
      // new OrdinalSales('2017', 750000),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Global Revenue',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        colorFn: (OrdinalSales sales, _) => sales.color,

        data: globalSalesData,
      ),
    ];
  }
}

/// Sample ordinal data type.
class OrdinalSales {
  final String year;
  final double sales;

  final charts.Color color;

  OrdinalSales(this.year, this.sales, Color color)
      : this.color = new charts.Color(
            r: color.red, g: color.green, b: color.blue, a: color.alpha);
}

I being a newbie to flutter, please excuse if any problem.

Answer 1

You can use maxBarWidthPx inside of new charts.BarRendererConfig to set a max width to your bars.

Example:

var chart = charts.BarChart(
   series,
   animate: true,
   vertical: true,
   defaultRenderer: new charts.BarRendererConfig(
     maxBarWidthPx: 40,
   ),
),
...

Answer 2

The size of the bar depends on the parent widget size. In my case im using a vertical bar chart. Size is the responsive size from the utility:

MediaQuery.of(context).size;

Im using it to make it responsive, but you can use you paren height or width if is horizontal.

Container(
  height: size.height * 0.1 * list.length +
    (size.height * 0.05),
  child: SimpleBarChart(),
),

Finally im setting the height by each list item to size.height * 0.1 (10% height of the device), and also (IMPORTANT) i add the half of the parent meassure (size.height * 0.05), because this will be the height (in my case (width in yours if you have it horizontal (normal))), of the meassure axises.

I hope you get a solution. Happy coding!

Answer 3

inside the bar renderer there is a strokeWidthPx property

defaultRenderer: new charts.BarRendererConfig(
    strokeWidthPx: 1.0,
)

Answer 4

There have no feature to set bar width yet. The Issue is open see Here.

You can minimize bar width by barGroupingType: charts.BarGroupingType.grouped and set fillColorFn: (Mileage mileage, _) => charts.ColorUtil.fromDartColor(Colors.transparent) inside charts.Series without middle one.

I share my code below:

Output:

Code:

custom_rounded_bars.dart file,

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:easytrax/screens/analytics_page.dart';

class CustomRoundedBars extends StatelessWidget {
  final List<dynamic> data;
  final bool animate;

  CustomRoundedBars(this.data, {this.animate});


  @override
  Widget build(BuildContext context) {

    var seriesList = _createSampleData(data);

    return new charts.BarChart(
      seriesList,
      animate: animate,
      barGroupingType: charts.BarGroupingType.grouped,
      defaultRenderer: new charts.BarRendererConfig(
          cornerStrategy: const charts.ConstCornerStrategy(30)),
    );
  }

  /// Create one series with sample hard coded data.
  static List<charts.Series<Mileage, String>> _createSampleData(dynamic data) {

    return [
      new charts.Series<Mileage, String>(
        id: 'mileage1',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (Mileage mileage, _) => mileage.day,
        measureFn: (Mileage mileage, _) => mileage.km,
        data: data,
        fillColorFn: (Mileage mileage, _) => charts.ColorUtil.fromDartColor(Colors.transparent),
      ),
      new charts.Series<Mileage, String>(
        id: 'mileage',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (Mileage mileage, _) => mileage.day,
        measureFn: (Mileage mileage, _) => mileage.km,
        data: data,
      ),
      new charts.Series<Mileage, String>(
        id: 'mileage2',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (Mileage mileage, _) => mileage.day,
        measureFn: (Mileage mileage, _) => mileage.km,
        data: data,
        fillColorFn: (Mileage mileage, _) => charts.ColorUtil.fromDartColor(Colors.transparent),
      ),
    ];
  }

}

analytics_page.dart file,

import 'package:easytrax/Common/custom_rounded_bars.dart';
import 'package:flutter/material.dart';



class AnalyticsPage extends StatefulWidget {
  static const String page = 'analytics_page';
  @override
  _AnalyticsPageState createState() => _AnalyticsPageState();
}

class _AnalyticsPageState extends State<AnalyticsPage> {

  List<Mileage> _createSampleData(){
    final data = [
      new Mileage(10, 'April 27'),
      new Mileage(38, 'April 28'),
      new Mileage(60, 'April 29'),
      new Mileage(20, 'April 30'),
      new Mileage(45, 'May 01'),
      new Mileage(35, 'May 02'),
      new Mileage(55, 'May 03'),
    ];

    return data;
  }

  @override
  Widget build(BuildContext context) {


    var data = _createSampleData();


    return Scaffold(
      body:Container(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.all(16.0),
              height: 300.0,
              child: CustomRoundedBars(data),
            ),
          ],
        ),
      ),
    );
  }
}



/// data type.
class Mileage {
  final int km;
  final String day;

  Mileage(this.km, this.day);
}