BarChart(
BarChartData(
// read about it in the BarChartData section
),
duration: Duration(milliseconds: 150), // Optional
curve: Curves.linear, // Optional
);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.
| PropName | Description | default value |
|---|---|---|
| barGroups | list of BarChartGroupData to show the bar lines together, you can provide one item per group to show normal bar chart | [] |
| groupsSpace | space between groups, it applies only when the alignment is BarChartAlignment.start, BarChartAlignment.center or BarChartAlignment.end |
16 |
| alignment | a BarChartAlignment that determines the alignment of the barGroups, inspired by Flutter MainAxisAlignment | BarChartAlignment.spaceEvenly |
| titlesData | check the FlTitlesData | FlTitlesData() |
| axisTitleData | check the FlAxisTitleData | FlAxisTitleData() |
| rangeAnnotations | show range annotations behind the chart, check RangeAnnotations | RangeAnnotations() |
| backgroundColor | a background color which is drawn behind the chart | null |
| barTouchData | BarTouchData holds the touch interactivity details | BarTouchData() |
| gridData | check the FlGridData | FlGridData() |
| borderData | check the FlBorderData | FlBorderData() |
| maxY | gets maximum y of y axis, if null, value will be read from the input barGroups (But it is more performant if you provide them) | null |
| minY | gets minimum y of y axis, if null, value will be read from the input barGroups (But it is more performant if you provide them) | null |
| baselineY | defines the baseline of y-axis | 0 |
| extraLinesData | allows extra horizontal lines to be drawn on the chart. Vertical lines are ignored when used with BarChartData, please see #1149, check ExtraLinesData | ExtraLinesData() |
| PropName | Description | default value |
|---|---|---|
| x | x position of the group on horizontal axis | null |
| barRods | list of BarChartRodData that are a bar line | [] |
| barsSpace | the space between barRods of the group | 2 |
| showingTooltipIndicators | indexes of barRods to show the tooltip on top of them, The point is that you need to disable touches to show these tooltips manually | [] |
enum values {start, end, center, spaceEvenly, spaceAround, spaceBetween}
| PropName | Description | default value |
|---|---|---|
| fromY | Position that this bar starts from | 0 |
| toY | This rod is from fromY to toY in the vertical axis |
null |
| color | color of the rod bar | [Colors.cyan] |
| gradient | You can use any Gradient here. such as LinearGradient or RadialGradient | null |
| width | stroke width of the rod bar | 8 |
| borderRadius | Determines the edge rounding of the bar corners, see BorderRadius. When null, it defaults to completely round bars. |
null |
| borderDashArray | Determines wether the border stroke is dashed. It is a circular array of dash offsets and lengths. For example, the array [5, 10] would result in dashes 5 pixels long followed by blank spaces 10 pixels long. The array [5, 10, 5] would result in a 5 pixel dash, a 10 pixel gap, a 5 pixel dash, a 5 pixel gap, a 10 pixel dash, etc. |
null |
| borderSide | Determines the border stroke around of the bar, see BorderSide. When null, it defaults to draw no stroke. |
null |
| backDrawRodData | if provided, draws a rod in the background of the line bar, check the BackgroundBarChartRodData | null |
| rodStackItem | if you want to have stacked bar chart, provide a list of BarChartRodStackItem, it will draw over your rod. | [] |
| PropName | Description | default value |
|---|---|---|
| fromY | same as BarChartRodData's fromY | 0 |
| toY | same as BarChartRodData's y | 8 |
| show | determines to show or hide this section | false |
| color | same as BarChartRodData's colors | [Colors.blueGrey] |
| gradient | same as BarChartRodData's gradient | null |
| PropName | Description | default value |
|---|---|---|
| fromY | draw stack item from this value | null |
| toY | draw stack item to this value | null |
| color | color of the stack item | null |
| borderSide | draw border stroke for each stack item | null |
BarTouchData (read about touch handling)
| PropName | Description | default value |
|---|---|---|
| enabled | determines to enable or disable touch behaviors | true |
| mouseCursorResolver | you can change the mouse cursor based on the provided FlTouchEvent and BarTouchResponse | MouseCursor.defer |
| touchTooltipData | a BarTouchTooltipData, that determines how show the tooltip on top of touched spots (appearance of the showing tooltip bubble) | BarTouchTooltipData() |
| touchExtraThreshold | an EdgeInsets class to hold a bounding threshold of touch accuracy | EdgeInsets.all(4) |
| allowTouchBarBackDraw | if sets true, touch works on backdraw bar line | false |
| handleBuiltInTouches | set this true if you want the built in touch handling (show a tooltip bubble and an indicator on touched spots) | true |
| touchCallback | listen to this callback to retrieve touch/pointer events and responses, it gives you a FlTouchEvent and BarTouchResponse | null |
| longPressDuration | allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is kLongPressTimeout | null |
| PropName | Description | default value |
|---|---|---|
| tooltipBorder | border of the tooltip bubble | BorderSide.none |
| tooltipRoundedRadius | background corner radius of the tooltip bubble | 4 |
| tooltipPadding | padding of the tooltip | EdgeInsets.symmetric(horizontal: 16, vertical: 8) |
| tooltipMargin | margin between the tooltip and the touched spot | 16 |
| tooltipHorizontalAlignment | horizontal alginment of tooltip relative to the bar | FLHorizontalAlignment.center |
| tooltipHorizontalOffset | horizontal offset of tooltip | 0 |
| maxContentWidth | maximum width of the tooltip (if a text row is wider than this, then the text breaks to a new line | 120 |
| getTooltipItems | a callback that retrieve BarTooltipItem by the given BarChartGroupData, groupIndex, BarChartRodData and rodIndex | defaultBarTooltipItem |
| fitInsideHorizontally | forces tooltip to horizontally shift inside the chart's bounding box | false |
| fitInsideVertically | forces tooltip to vertically shift inside the chart's bounding box | false |
| direction | Controls showing tooltip on top or bottom, default is auto. | auto |
| getTooltipColor | a callback that retrieves the Color for each rod separately from the given BarChartGroupData to set the background color of the tooltip bubble | Colors.blueGrey.darken(15) |
| PropName | Description | default value |
|---|---|---|
| text | text string of each row in the tooltip bubble | null |
| textStyle | TextStyle of the showing text row | null |
| textAlign | TextAlign of the showing text row | TextAlign.center |
| textDirection | TextDirection of the showing text row | TextDirection.ltr |
| children | List pass additional InlineSpan children for a more advance tooltip | null |
| PropName | Description | default value |
|---|---|---|
| spot | a BarTouchedSpot class to hold data about touched spot | null |
| PropName | Description | default value |
|---|---|---|
| touchedBarGroup | the BarChartGroupData that user touched its rod's spot | null |
| touchedBarGroupIndex | index of touched barGroup | null |
| touchedRodData | the BarChartRodData that user touched its spot | null |
| touchedRodDataIndex | index of touchedRod | null |
| touchedStackItem | BarChartRodStackItem is the touched stack (if you have stacked bar chart) | null |
| touchedStackItemIndex | index of barChartRodStackItem, -1 if nothing found | -1 |
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)
