bar_chart.md

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

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()
rotationQuarterTurns	Rotates the chart 90 degrees (clockwise) in every quarter turns. This feature works like the RotatedBox widget. You can have horizontal BarChart by changing this value to	0
errorIndicatorData	Holds data for representing an error indicator (you see the error indicators if you provide the toYErrorRange in the BarChartRodData)	ErrorIndicatorData()

BarChartGroupData

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	[]

BarChartAlignment

enum values {start, end, center, spaceEvenly, spaceAround, spaceBetween}

BarChartRodData

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.	[]
toYErrorRange	If you want to show an error range on the rod, provide FlErrorRange	null

BackgroundBarChartRodData

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

BarChartRodStackItem

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

BarTouchTooltipData

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)

BarTooltipItem

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

BarTouchResponse

PropName	Description	default value
spot	a BarTouchedSpot class to hold data about touched spot	null

BarTouchedSpot

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

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)

toggle.mov