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.
...
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),
],
),
],
),
);
}
}
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.
...
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),
],
),
],
),
);
}
}
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.
...
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),
],
),
],
),
);
}
}
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.
...
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),
),
),
),
],
),
],
),
);
}
}
The above example provides a clear picture of the Hierarchical Structure for styling across the widget tree classes.
BarDataStyle Properties
barColor
Color?
false
null
gradient
Gradient?
false
null
strokeWidth
double?
false
null
strokeColor
Color?
false
null
cornerRadius
BorderRadius?
false
null
Last updated