MultiBar

The MultiBar is a type of BarGroup which can accept multiple yValues and tells the Widget to draw a Group of Bars, each of height representing their own yValue.

Code Sample

...
import 'package:chart_it/chart_it.dart';

class TestBarCharts extends StatefulWidget {
  const TestBarCharts({Key? key}) : super(key: key);

  @override
  State<TestBarCharts> createState() => _TestBarChartsState();
}

class _TestBarChartsState extends State<TestBarCharts> {
  @override
  Widget build(BuildContext context) {
    return BarChart(
      ... // any chart configs
      data: BarSeries(
        barData: <BarGroup>[
          MultiBar(
            xValue: 1,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          MultiBar(
            xValue: 2,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
          MultiBar(
            xValue: 3,
            yValues: [
              BarData(yValue: 29),
              BarData(yValue: 39),
            ],
          ),
        ],
      ),
    );
  }
}

Result

Above example will display three bar groups, each consisting of two bars!

By default, MultiBars will arrange all the bars in a series manner. You can also provide some padding spacing between each bar in the group.

Code Sample

...
import 'package:chart_it/chart_it.dart';

class TestBarCharts extends StatefulWidget {
  const TestBarCharts({Key? key}) : super(key: key);

  @override
  State<TestBarCharts> createState() => _TestBarChartsState();
}

class _TestBarChartsState extends State<TestBarCharts> {
  @override
  Widget build(BuildContext context) {
    return BarChart(
      ... // any chart configs
      data: BarSeries(
        barData: <BarGroup>[
          MultiBar(
            arrangement: BarGroupArrangement.series,
            spacing: 10.0,
            xValue: 1,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          MultiBar(
            arrangement: BarGroupArrangement.series,
            spacing: 50.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
          MultiBar(
            arrangement: BarGroupArrangement.series,
            spacing: 10.0,
            xValue: 3,
            yValues: [
              BarData(yValue: 29),
              BarData(yValue: 39),
            ],
          ),
        ],
      ),
    );
  }
}

Result

To arrange the Bars in a vertical stack, change the enum value for the arrangement field to BarGroupArrangement.stack.

Code Sample

...
MultiBar(
  arrangement: BarGroupArrangement.stack,
  xValue: 1,
  yValues: [
    BarData(yValue: 18),
    BarData(yValue: 27),
  ],
),
...

Result

When Group Arrangement is stack, any spacing value provided will be ignored.

Class Properties

Name	Type	Required	Default Value
xValue	num	true	-
yValues	List<BarData>	true	-
style	BarDataStyle?	false	null
arrangement	BarGroupArrangement	false	BarGroupArrangement.series
spacing	double	false	10.0