Bar Chart
How to use
BarChart(
BarChartData(
// read about it in the BarChartData section
),
duration: Duration(milliseconds: 150), // Optional
curve: Curves.linear, // Optional
);
Implicit Animations
When you change the chart's state, it animates to the new state internally (using implicit animations). You can control the animation duration and curve using optional duration and curve properties, respectively.
BarChartData
BarChart draws barGroups that each of them contains a list of BarChartRodData.
Apply space between the barGroups.
It is used only when alignment is BarChartAlignment.start,
BarChartAlignment.center or BarChartAlignment.end (the other
alignments spread the groups in the free space).
Arrange the barGroups, see BarChartAlignment.
Holds data to draw the titles around the chart, see FlTitlesData.
Handles touch behaviors and responses.
Maximum y value of the chart. If you don't provide it, it is calculated from the chart's data (providing it is more performant).
Minimum y value of the chart. If you don't provide it, it is calculated from the chart's data (providing it is more performant).
The y value that the horizontal grid lines and the titles are aligned to,
they are drawn at every baselineY + n * interval.
Holds data to draw the grid lines behind the chart, see FlGridData.
Holds data to draw the border around the chart, see FlBorderData.
Highlights some horizontal or vertical ranges behind the chart,
see RangeAnnotations.
A background color which is drawn behind the chart.
Extra horizontal or vertical lines to draw on the chart,
see ExtraLinesData (the bar chart only draws the horizontal ones).
Rotates the chart 90 degrees (clockwise) in every quarter turn.
It works like the RotatedBox widget.
errorIndicatorDataFlErrorIndicatorData<BarChartSpotErrorRangeCallbackInput>#defaultconst FlErrorIndicatorData()Holds data for showing error (threshold) indicators on the spots in
the different BarChartGroupData.barRods
BarChartGroupData
Order along the x axis in which titles, and titles only, will be shown.
Note x does not reorder bars from barRods; instead, it gets the title
in x position through SideTitles.getTitlesWidget function.
If set true, it will show bars below/above each other. Otherwise, it will show bars beside each other.
BarChart renders barRods that represents a rod (or a bar) in the bar chart.
you can show some tooltipIndicators (a popup with an information)
on top of each BarChartRodData using showingTooltipIndicators,
just put indices you want to show it on top of them.
An important point is that you have to disable the default touch behaviour
to show the tooltip manually, see BarTouchData.handleBuiltInTouches.
BarChartAlignment
start#Places the groups at the start of the chart.
end#Places the groups at the end of the chart.
center#Places the groups in the middle of the chart.
spaceEvenly#Places the free space evenly between the groups, and before the first and after the last one.
spaceAround#Places the free space evenly between the groups, and half of it before the first and after the last one.
spaceBetween#Places the free space evenly between the groups, and none before the first and after the last one.
BarChartRodData
If the data has error range/threshold, it will be rendered
with this error range. So you can provide the
FlErrorRange.lowerBy and FlErrorRange.upperBy that is relative to
the toY property.
If you want to customize the visual representation of the error range,
you can use BarChartData.errorIndicatorData to customize the error range
If provided, this BarChartRodData draws with this color.
Otherwise we use gradient to draw the rod.
It throws an exception if you provide both color and gradient.
Defaults to Colors.cyan if neither color nor gradient is provided.
If provided, this BarChartRodData draws with this gradient.
Otherwise we use color to draw the rod.
It throws an exception if you provide both color and gradient.
You can use any Gradient here, such as LinearGradient or RadialGradient.
The width of the rod.
The rounding of the corners of the rod. When null, the rod is fully
rounded (with a radius of half of its width).
Draws the borderSide dashed, it's a circular array of dash lengths
and gaps. For example, [5, 10] results in dashes 5 pixels long
followed by gaps 10 pixels long.
The border stroke around the rod, see BorderSide.
When null, the rod has no border (a BorderSide with a width of 0).
The width of the border is capped to half of the rod's width.
If you want to have a bar drawn in rear of this rod, use backDrawRodData,
it uses to have a bar with a passive color in rear of the rod,
for example you can use it as the maximum value place holder.
If you are a fan of stacked charts (If you don't know what is it, google it),
you can fill up the rodStackItems to have a Stacked Chart.
Optional label to display near the rod tip.
BackgroundBarChartRodData
fromY is where background starts to show
background starts to show from fromY to toY
Determines to show or hide this
If provided, the background rod draws with this color.
Otherwise we use gradient to draw it.
It throws an exception if you provide both color and gradient.
Defaults to Colors.blueGrey if neither color nor gradient is
provided.
If provided, the background rod draws with this gradient.
Otherwise we use color to draw it.
It throws an exception if you provide both color and gradient.
BarChartRodStackItem
Renders a Stacked Chart section from fromY
Renders a Stacked Chart section to toY
Renders a Stacked Chart section with color
Renders a Stacked Chart section with gradient
An optional text label of the stack item.
Renders border stroke for a Stacked Chart section
BarChartRodLabel
Extends FlLabel.
Whether the label is visible.
The text content of the label.
The text style of the label.
When null (or when its inherit is true), it is merged with the ambient
DefaultTextStyle, and it respects the bold text setting of the platform.
Rotation angle of the label in degrees.
Text direction of the label.
BarTouchData (read about touch handling)
Determines whether to enable or disable touch behaviors.
touchCallback notifies you about the happened touch/pointer events.
It gives you a FlTouchEvent which is the happened event such as FlPointerHoverEvent, FlTapUpEvent, ...
It also gives you a BaseTouchResponse which is the chart specific type and contains information
about the elements that has touched.
Using mouseCursorResolver you can change the mouse cursor
based on the provided FlTouchEvent and BaseTouchResponse
This property that allows to customize the duration of the longPress gesture. If null, it uses kLongPressTimeout (500 milliseconds).
Determines how the tooltip looks on top of the touched rods,
see BarTouchTooltipData.
Extends the touchable area of each rod by these insets.
If true, touching the background rod (BarChartRodData.backDrawRodData)
counts as touching the rod.
If true, the chart handles touches by itself: it shows a tooltip bubble on top of the touched rod.
BarTouchTooltipData
Sets a rounded radius for the tooltip.
Applies a padding for showing contents inside the tooltip.
Margin between the tooltip and the touched rod.
Controls showing tooltip on left side, right side or center aligned with rod.
Applies horizontal offset for showing tooltip.
Maximum width of the tooltip's content, a text row which is wider than this breaks into a new line.
getTooltipItemBarTooltipItem? Function(BarChartGroupData, int, BarChartRodData, int)?#defaultdefaultBarTooltipItemRetrieves data for showing content inside the tooltip.
Retrieves the background color of the tooltip for each touched rod.
Forces the tooltip to shift horizontally inside the chart, if overflow happens.
Forces the tooltip to shift vertically inside the chart, if overflow happens.
Controls showing tooltip on top or bottom, default is auto.
Controls the rotation of the tooltip (in degrees)
Border of the tooltip bubble.
BarTooltipItem
Text of the content.
TextStyle of the showing content.
TextAlign of the showing content.
Direction of showing text.
Add further style and format to the text of the tooltip
BarTouchResponse
The location of the touch in pixels on the screen.
The axis coordinate of the touch in chart's coordinate system.
Gives information about the touched spot
BarTouchedSpot
Also has the properties of TouchedSpot.
The BarChartGroupData of the touched rod.
The index of touchedBarGroup in BarChartData.barGroups.
The touched BarChartRodData.
The index of touchedRodData in BarChartGroupData.barRods.
The touched BarChartRodStackItem (in a stacked bar chart), null if
no stack item is touched.
The index of touchedStackItem in BarChartRodData.rodStackItems,
-1 if no stack item is touched.
Some Samples
Sample 1 (Source Code)
Sample 2 (Source Code)
Sample 3 (Source Code)
Sample 4 (Source Code)
Sample 5 (Source Code)
Sample 6 (Source Code)
Sample 7 (Source Code)
Gist - Toggleable Tooltip (Source Code)
https://user-images.githubusercontent.com/7009300/156784816-53f95dd9-f387-4600-8a92-d05b1aeea3da.mov