Bar Chart
In depth guide to the Bar Chart Widget.
A Bar Chart is the most common visual representation of numeric data as Vertical or Horizontal Bars.
To draw a Bar Chart, we will use the BarChart
widget.
Let's use the widget to draw a simple bar chart with only one Bar.
...
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(
data: BarSeries(
barData: <BarGroup>[
SimpleBar(
xValue: 1,
yValue: BarData(yValue: 27),
),
],
),
);
}
}
Before moving forward, let's understand the above example code.
The widget BarChart
requires a mandatory field data
of type BarSeries
. This is a series class that ensures that any data provided to this series should be represented as a BarChart.
The BarSeries
requires barData
which is a List of BarGroup
. You can see that we have provided a class SimpleBar
which extends a BarGroup. BarGroups define how your data will be represented as Bars on the chart. We will go into further details for BarGroup
later.
Finally, our SimpleBar
takes a yValue
of class BarData
which also requires a yValue
which is a numeric value, representing the data value for this SimpleBar
.
You may have some questions about the structuring complexity of these data classes for the widget, just to draw a simple bar. But it will be clear behind this approach in later sections.
Last updated