bar_chart.md

BarChart

How to use

BarChart(
  BarChartData(
    // read about it in the BarChartData section
  ),
  swapAnimationDuration: Duration(milliseconds: 150), // Optional
  swapAnimationCurve: 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 swapAnimationDuration and swapAnimationCurve 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 Alignment.center,	16
alignment	a BarChartAlignment that determines the alignment of the barGroups, inspired by Flutter MainAxisAlignment	BarChartAlignment.spaceBetween
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	null
minY	gets minimum y of y axis, if null, value will be read from the input barGroups	null
baselineY	defines the baseline of y-axis	0

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

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
colors	colors the rod bar, if multiple colors provided it will be gradient	[Colors.blueAccent]
colorStops	gets the stop positions of the gradient color, Read More	null
gradientFrom	determines start of the gradient, each number should be between 0 and 1, Read More	Offset(0, 0)
gradientTo	determines end of the gradient, each number should be between 0 and 1, Read More	Offset(1, 0)
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
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.	[]

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
colors	same as BarChartRodData's colors	[Colors.blueGrey]
colorStops	same as BarChartRodData's colorStops	null
gradientFrom	same as BarChartRodData's gradientFrom	Offset(0, 0)
gradientTo	same as BarChartRodData's gradientTo	Offset(1, 0)

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

BarTouchTooltipData

PropName	Description	default value
tooltipBgColor	background color of the tooltip bubble	Colors.white
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
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

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)

Gist - Toggleable Tooltip (Source Code)

toggle.mov