Styling

All styling in the BarChart and other chart widgets are Hierarchical from Top to Bottom. This means that the Bottom/Child level styling will override the Top/Parent level styling.

The class BarDataStyle provides the styling options for the BarChart.

Let's take an example to see how it works.

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>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(yValue: 37),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
        ],
      ),
    );
  }
}

Result

Above example will draw a collection of Single and MultiGroup Bars. Now let's add styling to our bars in this example.

Series Styling

To provide uniform styling for All the Bars in the BarChart, we provide the styling at Series Level to the seriesStyle property of the BarSeries class.

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(
        seriesStyle: BarDataStyle(
          barColor: Colors.cyan,
          strokeWidth: 3.0,
          strokeColor: Color(0xFF1A535C),
          cornerRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
        ),
        barData: <BarGroup>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(yValue: 37),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
        ],
      ),
    );
  }
}

Result

Group Styling

If you wish to provide a specific uniform styling for all the bars in a group, you can provide styling at Group Level to the groupStyle property for any BarGroup.

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(
        seriesStyle: BarDataStyle(
          barColor: Colors.cyan,
          strokeWidth: 3.0,
          strokeColor: Color(0xFF1A535C),
          cornerRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
        ),
        barData: <BarGroup>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(yValue: 37),
          ),
          MultiBar(
            groupStyle: BarDataStyle(
              barColor: Color(0xFFD0FFD6),
              strokeWidth: 3.0,
              strokeColor: Colors.green,
              cornerRadius: BorderRadius.only(
                topLeft: Radius.circular(5.0),
                topRight: Radius.circular(5.0),
              ),
            ),
            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(yValue: 46),
              BarData(yValue: 24),
            ],
          ),
        ],
      ),
    );
  }
}

Result

The groupStyle has overridden the styling at the seriesStyle for Group 2 Multi Bars. groupStyle property is available for every subclass that extends a BarGroup.

Theoretically, you can also provide groupStyle to a SimpleBar, even tough you only have one bar.

Bar Styling

Besides seriesStyle and groupStyle, you can can also customize each individual bars with the property barStyle for every BarData. This is the bottom most styling property and will override any of the parent group or series level styling.

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(
        seriesStyle: BarDataStyle(
          barColor: Colors.cyan,
          strokeWidth: 3.0,
          strokeColor: Color(0xFF1A535C),
          cornerRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
        ),
        barData: <BarGroup>[
          SimpleBar(
            xValue: 1,
            yValue: BarData(
              yValue: 37,
              barStyle: BarDataStyle(
                barColor: Colors.orangeAccent,
                strokeWidth: 3.0,
                strokeColor: Colors.deepOrange,
                cornerRadius: BorderRadius.only(
                  topLeft: Radius.circular(5.0),
                  topRight: Radius.circular(5.0),
                ),
              ),
            ),
          ),
          MultiBar(
            groupStyle: BarDataStyle(
              barColor: Color(0xFFD0FFD6),
              strokeWidth: 3.0,
              strokeColor: Colors.green,
              cornerRadius: BorderRadius.only(
                topLeft: Radius.circular(5.0),
                topRight: Radius.circular(5.0),
              ),
            ),
            spacing: 10.0,
            xValue: 2,
            yValues: [
              BarData(yValue: 18),
              BarData(yValue: 27),
            ],
          ),
          SimpleBar(
            xValue: 3,
            yValue: BarData(yValue: 30),
          ),
          MultiBar(
            spacing: 10.0,
            xValue: 4,
            yValues: [
              BarData(
                yValue: 46,
                barStyle: BarDataStyle(
                  barColor: Color(0xFFFFC800),
                  cornerRadius: BorderRadius.all(Radius.circular(100.0)),
                ),
              ),
              BarData(
                yValue: 24,
                barStyle: BarDataStyle(
                  barColor: Color(0xFFDA4167),
                  cornerRadius: BorderRadius.only(
                    topLeft: Radius.circular(5.0),
                    topRight: Radius.circular(25.0),
                    bottomLeft: Radius.circular(25.0),
                    bottomRight: Radius.circular(5.0),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Result

The above example provides a clear picture of the Hierarchical Structure for styling across the widget tree classes.

BarDataStyle Properties

Name	Type	Required	Default Value
barColor	Color?	false	null
gradient	Gradient?	false	null
strokeWidth	double?	false	null
strokeColor	Color?	false	null
cornerRadius	BorderRadius?	false	null