Line Chart
How to use
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 duration and curve properties, respectively.
LineChartData
List of LineChartBarData to show the chart's lines, they stack and
can be drawn on top of each other.
Fills area between two LineChartBarData with a color or gradient.
Holds data to draw the titles around the chart, see FlTitlesData.
Extra horizontal or vertical lines to draw on the chart,
see ExtraLinesData (the bar chart only draws the horizontal ones).
Handles touch behaviors and responses.
You can show some tooltipIndicators (a popup with an information)
on top of each LineChartBarData.spots using showingTooltipIndicators,
just put line indicator number and spots indices you want to show it on top of them.
An important point is that you have to disable the default touch behaviour
to show the tooltip manually, see LineTouchData.handleBuiltInTouches.
Holds data to draw the grid lines behind the chart, see FlGridData.
Holds data to draw the border around the chart, see FlBorderData.
Highlights some horizontal or vertical ranges behind the chart,
see RangeAnnotations.
Minimum x value of the chart. If you don't provide it, it is calculated from the chart's data (providing it is more performant).
Maximum x value of the chart. If you don't provide it, it is calculated from the chart's data (providing it is more performant).
The x value that the vertical grid lines and the titles are aligned to,
they are drawn at every baselineX + n * interval.
Minimum y value of the chart. If you don't provide it, it is calculated from the chart's data (providing it is more performant).
Maximum y value of the chart. If you don't provide it, it is calculated from the chart's data (providing it is more performant).
The y value that the horizontal grid lines and the titles are aligned to,
they are drawn at every baselineY + n * interval.
Clips the chart to its border (prevents drawing outside of the border),
see FlClipData.
A background color which is drawn behind the chart.
Rotates the chart 90 degrees (clockwise) in every quarter turn.
It works like the RotatedBox widget.
LineChartBarData
This line goes through this spots.
You can have multiple lines by splitting them,
put a FlSpot.nullSpot between each section.
Determines to show or hide the line.
If provided, this LineChartBarData draws with this color.
Otherwise we use gradient to draw the line.
It throws an exception if you provide both color and gradient.
Defaults to Colors.cyan if neither color nor gradient is provided.
If provided, this LineChartBarData draws with this gradient.
Otherwise we use color to draw the line.
It throws an exception if you provide both color and gradient.
You can use any Gradient here, such as LinearGradient or RadialGradient.
Only effective if gradient is provided.
It will be used to determine the area of the gradient.
Determines thickness of drawing line.
If it's true, LineChart draws the line with curved edges,
otherwise it draws line with hard edges.
If isCurved is true, it determines smoothness of the curved edges.
Prevents overshooting when drawing a curve line on linear sequence spots, check this issue.
Applies threshold for preventCurveOverShooting algorithm.
If true, the start and end of the line are round (StrokeCap.round),
otherwise they are flat (StrokeCap.butt).
If true, the corners of the line are round (StrokeJoin.round),
otherwise they are sharp (StrokeJoin.miter).
Fills the space below the line, using a color or gradient, see BarAreaData.
Fills the space above the line, using a color or gradient, see BarAreaData.
Responsible for showing spots on the line as dots, see FlDotData.
errorIndicatorDataFlErrorIndicatorData<LineChartSpotErrorRangeCallbackInput>#defaultconst FlErrorIndicatorData<LineChartSpotErrorRangeCallbackInput>()Holds data for showing error indicators on the spots in this line
(they are shown if you provide FlSpot.xError or FlSpot.yError).
Shows indicators (a thicker line and a larger dot) on the spots at the provided indices.
Draws the line dashed, it's a circular array of dash lengths and gaps.
For example, [5, 10] results in dashes 5 pixels long followed by
gaps 10 pixels long, and [5, 10, 5] results in a 5 pixel dash,
a 10 pixel gap, a 5 pixel dash, a 5 pixel gap, a 10 pixel dash, etc.
If sets true, it draws the chart in Step Line Chart style, using LineChartBarData.lineChartStepData.
Holds data for representing a Step Line Chart, and works only if isStepLineChart is true.
LineChartGradientArea
rectAroundTheLine#The gradient area will be around the line only, meaning the gradient will exactly wrap around the curve.
wholeChart#The entire chart area will be used as the gradient area for the curve.
LineChartStepData
Determines the direction of each step, between 0.0 (stepDirectionForward)
and 1.0 (stepDirectionBackward).
BetweenBarsData
Index of the first LineChartBarData in LineChartData.lineBarsData
(zero-based), the area is filled from this line.
Index of the second LineChartBarData in LineChartData.lineBarsData
(zero-based), the area is filled up to this line.
If provided, this BetweenBarsData fills the area with this color.
Otherwise we use gradient to fill it.
It throws an exception if you provide both color and gradient.
Defaults to a semi-transparent Colors.blueGrey if neither color nor
gradient is provided.
If provided, this BetweenBarsData fills the area with this gradient.
Otherwise we use color to fill it.
It throws an exception if you provide both color and gradient.
You can use any Gradient here, such as LinearGradient or RadialGradient.
BarAreaData
Determines whether to show or hide the below, or above bar area.
If provided, this BarAreaData fills the area with this color.
Otherwise we use gradient to fill it.
It throws an exception if you provide both color and gradient.
Defaults to a semi-transparent Colors.blueGrey if neither color nor
gradient is provided.
If provided, this BarAreaData fills the area with this gradient.
Otherwise we use color to fill it.
It throws an exception if you provide both color and gradient.
You can use any Gradient here, such as LinearGradient or RadialGradient.
Holds data for drawing a line from each spot to the bottom, or top of
the chart, see BarAreaSpotsLine.
Cuts the drawing of the below or above area at this y value
(set applyCutOffY to true to apply it).
Determines whether to apply cutOffY.
BarAreaSpotsLine
Determines to show or hide all the lines.
Holds appearance of drawing line on the spots.
Checks to show or hide lines on the spots.
Determines to inherit the cutOff properties from its parent BarAreaData
FlDotData
Determines show or hide all dots.
Checks to show or hide an individual dot.
LineTouchData (read about touch handling)
Determines whether to enable or disable touch behaviors.
touchCallback notifies you about the happened touch/pointer events.
It gives you a FlTouchEvent which is the happened event such as FlPointerHoverEvent, FlTapUpEvent, ...
It also gives you a BaseTouchResponse which is the chart specific type and contains information
about the elements that has touched.
Using mouseCursorResolver you can change the mouse cursor
based on the provided FlTouchEvent and BaseTouchResponse
This property that allows to customize the duration of the longPress gesture. If null, it uses kLongPressTimeout (500 milliseconds).
Determines how the tooltip looks on top of the touched spots,
see LineTouchTooltipData.
getTouchedSpotIndicatorList<TouchedSpotIndicatorData?> Function(LineChartBarData, List<int>)#defaultdefaultTouchedIndicatorsRetrieves a list of TouchedSpotIndicatorData for the touched spots
of a line, to show an indicator on each of them.
Distance threshold to handle the touch event.
Calculates the distance between a touch point and a spot, to find the closest spots to the touch. By default, only the horizontal distance is used.
If true, the chart handles touches by itself: it shows a tooltip bubble and an indicator on the touched spots.
The starting point on y axis of the touch line. By default, line starts on the bottom of the chart.
The end point on y axis of the touch line. By default, line ends at the touched point. If line end is overlap with the dot, it will be automatically adjusted to the edge of the dot.
LineTouchTooltipData
Sets a rounded radius for the tooltip.
Applies a padding for showing contents inside the tooltip.
Margin between the tooltip and the touched spot.
Controls showing tooltip on left side, right side or center aligned with spot.
Applies horizontal offset for showing tooltip.
Maximum width of the tooltip's content, a text row which is wider than this breaks into a new line.
Retrieves a LineTooltipItem for each touched spot, to show as a row
inside the tooltip.
Retrieves the background color of the tooltip for each touched spot.
Forces the tooltip to shift horizontally inside the chart, if overflow happens.
Forces the tooltip to shift vertically inside the chart, if overflow happens.
Forces the tooltip container to the top of the chart's box area, instead of on top of the touched spots.
Controls the rotation of the tooltip.
Border of the tooltip bubble.
LineTooltipItem
Text of this row in the tooltip bubble.
TextDirection of the text.
TouchedSpotIndicatorData
LineBarSpot
Also has the properties of FlSpot.
Is the LineChartBarData that this spot is inside of.
Is the index of our bar, in the LineChartData.lineBarsData list.
Is the index of this spot, in the LineChartBarData.spots list.
TouchLineBarSpot
Also has the properties of LineBarSpot.
Distance in pixels from where the user tapped.
LineTouchResponse
The location of the touch in pixels on the screen.
The axis coordinate of the touch in chart's coordinate system.
touch happened on these spots
(if a single line provided on the chart, lineBarSpots's length will be 1 always)
ShowingTooltipIndicators
Determines the spots that each tooltip should be shown.
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