Thursday 18 March 2021

charts_flutter - How to support non-zero Y-Axis values in bar chart with multiple stacks?

I've been trying to use charts_flutter prepared by google team in flutter. I was trying to use stacked bar charts and I was following this Stacked Bar Charts Demo. But, there is a tweak I want for my requirements. But, I couldn't figure out how to do it?.

Following is my code.

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

class WeighAbleStatsScreenV3 extends StatefulWidget {
  @override
  _WeighAbleStatsScreenV3State createState() => _WeighAbleStatsScreenV3State();
}

class _WeighAbleStatsScreenV3State extends State<WeighAbleStatsScreenV3> {
  List<charts.Series> seriesList;

  /// Create series list with multiple series
  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final desktopSalesData = [
      OrdinalSales('2014', 25),
      OrdinalSales('2015', 28),
      OrdinalSales('2016', 26),
      OrdinalSales('2017', 30),
    ];

    final tableSalesData = [
      OrdinalSales('2014', 3),
      OrdinalSales('2015', 3),
      OrdinalSales('2016', 2),
      OrdinalSales('2017', 2),
    ];

    final mobileSalesData = [
      OrdinalSales('2014', 5),
      OrdinalSales('2015', 4),
      OrdinalSales('2016', 4),
      OrdinalSales('2017', 2),
    ];

    return [
      charts.Series<OrdinalSales, String>(
        id: 'Desktop',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: desktopSalesData,
      ),
      charts.Series<OrdinalSales, String>(
        id: 'Tablet',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: tableSalesData,
      ),
      charts.Series<OrdinalSales, String>(
        id: 'Mobile',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: mobileSalesData,
      ),
    ];
  }

  @override
  void initState() {
    super.initState();

    seriesList = _createSampleData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: 500,
          child: charts.BarChart(
            seriesList,
            animate: true,
            barGroupingType: charts.BarGroupingType.stacked,
          ),
        ),
      ),
    );
  }
}

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

  OrdinalSales(this.year, this.sales);
}

Output :

enter image description here

Charts are working fine. But, I want Y-axis to be dynamic and non-zero. For example, minimum value for charts data in my case is 25. So, my y-axis values should be 25-35 instead of starting from 0-35.

I do not want zero as starting point for my Y-axis values. But, I couldn't add non-numeric values or values above zero.

Also, It's best if I can add string values to my Y-axis as well?

I've followed documentation thoroughly. But, couldn't find anything.

Any help would be appreciated.

Thanks.



from charts_flutter - How to support non-zero Y-Axis values in bar chart with multiple stacks?

No comments:

Post a Comment