Line Chart - Fl Chart

How to use

dart

LineChart(
  LineChartData(
    // read about it in the LineChartData 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 swapAnimationDuration and swapAnimationCurve properties, respectively.

LineChartData

PropName	Description	default value
lineBarsData	list of LineChartBarData to show the chart's lines, they stack and can be drawn on top of each other	[]
betweenBarsData	list of BetweenBarsData to fill the area between 2 chart lines	[]
titlesData	check the FlTitlesData	FlTitlesData()
extraLinesData	ExtraLinesData object to hold drawing details of extra horizontal and vertical lines. Check ExtraLinesData	ExtraLinesData()
lineTouchData	LineTouchData holds the touch interactivity details	LineTouchData()
rangeAnnotations	show range annotations behind the chart, check RangeAnnotations	RangeAnnotations()
showingTooltipIndicators	show the tooltip based on provided list of LineBarSpot, The point is that you need to disable touches to show these tooltips manually	[]
gridData	check the FlGridData	FlGridData()
borderData	check the FlBorderData	FlBorderData()
minX	gets minimum x of x axis, if null, value will read from the input lineBars (But it is more performant if you provide them)	null
maxX	gets maximum x of x axis, if null, value will read from the input lineBars (But it is more performant if you provide them)	null
baselineX	defines the baseline of x-axis	0
minY	gets minimum y of y axis, if null, value will read from the input lineBars (But it is more performant if you provide them)	null
maxY	gets maximum y of y axis, if null, value will read from the input lineBars (But it is more performant if you provide them)	null
baselineY	defines the baseline of y-axis	0
clipData	clip the chart to the border (prevent drawing outside the border)	FlClipData.none()
backgroundColor	a background color which is drawn behind th chart	null
rotationQuarterTurns	Rotates the chart 90 degrees (clockwise) in every quarter turns. This feature works like the RotatedBox widget	0

LineChartBarData

PropName	Description	default value
show	determines to show or hide the bar line	true
spots	list of FlSpot's x and y coordinates that the line go through it	[]
color	color of the line	[Colors.redAccent]
gradient	You can use any Gradient here. such as LinearGradient or RadialGradient	null
gradientArea	determines the area where the gradient is applied	null
barWidth	gets the stroke width of the line bar	2.0
isCurved	curves the corners of the line on the spot's positions	false
curveSmoothness	smoothness radius of the curve corners (works when isCurved is true)	0.35
preventCurveOverShooting	prevent overshooting when draw curve line on linear sequence spots, check this issue	false
preventCurveOvershootingThreshold	threshold for applying prevent overshooting algorithm	10.0
isStrokeCapRound	determines whether start and end of the bar line is Qubic or Round	false
isStrokeJoinRound	determines whether stroke joins have a round shape or a sharp edge	false
belowBarData	check the BarAreaData	BarAreaData
aboveBarData	check the BarAreaData	BarAreaData
dotData	check the FlDotData	FlDotData()
showingIndicators	show indicators based on provided indexes	[]
dashArray	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
shadow	It drops a shadow behind your bar, see Shadow.	Shadow()
isStepLineChart	If sets true, it draws the chart in Step Line Chart style, using `lineChartStepData`.	false
lineChartStepData	Holds data for representing a Step Line Chart, and works only if [isStepChart] is true.	LineChartStepData()
errorIndicatorData	Holds data for representing an error indicator (you see the error indicators if you provide the `xError` or `yError` in the FlSpot).	ErrorIndicatorData()

LineChartStepData

PropName	Description	default value
stepDirection	Determines the direction of each step, could be between 0.0 (forward), and 1.0 (backward)	LineChartStepData.stepDirectionMiddle

BetweenBarsData

PropName	Description	default value
fromIndex	index of the first LineChartBarData inside LineChartData (zero-based index)	required
toIndex	index of the second LineChartBarData inside LineChartData (zero-based index)	required
color	color of the area	[Colors.blueGrey]
gradient	You can use any Gradient here. such as LinearGradient or RadialGradient	null

BarAreaData

PropName	Description	default value
show	determines to show or hide the below, or above bar area	false
color	color of the below, or above bar area	[Colors.blueGrey]
gradient	You can use any Gradient here. such as LinearGradient or RadialGradient	null
spotsLine	draw a line from each spot the the bottom, or top of the chart	BarAreaSpotsLine()
cutOffY	cut the drawing below or above area to this y value (set `applyCutOffY` true if you want to set it)	null
applyCutOffY	determines should or shouldn't apply cutOffY (`scutOffY` should be provided)	false

BarAreaSpotsLine

PropName	Description	default value
show	determines show or hide the below, or above spots line	true
flLineStyle	a FlLine object that determines style of the line	[Colors.blueGrey]
checkToShowSpotLine	a function to determine whether to show or hide the below or above line on the given spot	showAllSpotsBelowLine
applyCutOffY	Determines to inherit the cutOff properties from its parent BarAreaData	true

FlDotData

PropName	Description	default value
show	determines to show or hide the dots	true
checkToShowDot	a function to determine whether to show or hide the dot on the given spot	showAllDots
getDotPainter	a function to determine how the dot is drawn on the given spot	_defaultGetDotPainter

LineTouchData (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 LineTouchResponse	MouseCursor.defer
touchTooltipData	a LineTouchTooltipData, that determines how show the tooltip on top of touched spots (appearance of the showing tooltip bubble)	LineTouchTooltipData
getTouchedSpotIndicator	a callback that retrieves list of TouchedSpotIndicatorData by the given list of LineBarSpot for showing the indicators on touched spots	defaultTouchedIndicators
touchSpotThreshold	the threshold of the touch accuracy	10
distanceCalculator	a function to calculate the distance between a spot and a touch event	_xDistance
handleBuiltInTouches	set this true if you want the built in touch handling (show a tooltip bubble and an indicator on touched spots)	true
getTouchLineStart	controls where the line starts, default is bottom of the chart	defaultGetTouchLineStart
getTouchLineEnd	controls where the line ends, default is the touch point	defaultGetTouchLineEnd
touchCallback	listen to this callback to retrieve touch/pointer events and responses, it gives you a FlTouchEvent and LineTouchResponse	null
longPressDuration	allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is kLongPressTimeout	null

LineTouchTooltipData

PropName	Description	default value
tooltipBorder	border of the tooltip bubble	BorderSide.none
tooltipBorderRadius	background corner radius of the tooltip bubble	BorderRadius.circular(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 spot	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 list of LineTooltipItem by the given list of LineBarSpot	defaultLineTooltipItem
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
showOnTopOfTheChartBoxArea	forces the tooltip container to top of the line	false
getTooltipColor	a callback that retrieves the Color for each touched spots separately from the given LineBarSpot to set the background color of the tooltip bubble	Colors.blueGrey.darken(15)

LineTooltipItem

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<TextSpan> pass additional InlineSpan children for a more advance tooltip	null

TouchedSpotIndicatorData

PropName	Description	default value
indicatorBelowLine	a FlLine to show the below line indicator on the touched spot	null
touchedSpotDotData	a FlDotData to show a dot indicator on the touched spot	null

LineBarSpot

PropName	Description	default value
bar	the LineChartBarData that contains a spot	null
barIndex	index of the target LineChartBarData inside LineChartData	null
spotIndex	index of the target FlSpot inside LineChartBarData	null

TouchLineBarSpot

PropName	Description	default value
bar	the LineChartBarData that contains a spot	null
barIndex	index of the target LineChartBarData inside LineChartData	null
spotIndex	index of the target FlSpot inside LineChartBarData	null
distance	distance to the touch event	null

LineTouchResponse

PropName	Description	default value
touchLocation	the location of the touch event in the device pixels coordinates	required
touchChartCoordinate	the location of the touch event in the chart coordinates	required
lineBarSpots	a list of TouchLineBarSpot	null

ShowingTooltipIndicators

PropName	Description	default value
showingSpots	Determines the spots that each tooltip should be shown.	null

some samples

Sample 1 (Source Code)

Sample 2 (Source Code)

Sample 3 (Source Code)

Sample 4 (Source Code)

Sample 5 (Source Code)

Sample 6 - Reversed (Source Code)

Sample 7 (Source Code)

Sample 8 (Source Code)

Sample 9 (Source Code)

Sample 10 (Source Code)

Sample 11 (Source Code)

https://user-images.githubusercontent.com/7009300/152555425-3b53ac8c-257f-49b0-8d75-1a878c03ccaa.mp4