Skip to content

Latest commit

 

History

History
141 lines (113 loc) · 8.32 KB

bar_chart.md

File metadata and controls

141 lines (113 loc) · 8.32 KB
Raw

BarChart

How to use

BarChart(
  BarChartData(
    // read about it in the below section
  ),
);

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

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
y endY position of the bar on vertical axis (height of the bar) 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
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
y 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

BarTouchData (read about touch handling)

PropName Description default value
enabled determines to enable or disable touch behaviors true
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 events, it gives you a 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)
tooltipBottomMargin bottom margin of the tooltip (to the top of most top 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

BarTooltipItem

PropName Description default value
text text string of each row in the tooltip bubble null
textStyle TextStyle of the showing text row null

BarTouchResponse

PropName Description default value
spot a BarTouchedSpot class to hold data about touched spot null
touchInput a FlTouchInput that is the touch behaviour 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)