ScatterChart
How to use
ScatterChart(
ScatterChartData(
// read about it in the ScatterChartData 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.
ScatterChartData
The spots to draw on the chart, see ScatterSpot.
Holds data to draw the titles around the chart, see FlTitlesData.
Handles touch behaviors and responses, see ScatterTouchData.
you can show some tooltipIndicators (a popup with an information)
on top of each ScatterSpot using showingTooltipIndicators,
just put 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 ScatterTouchData.handleBuiltInTouches.
Holds data to draw the grid lines behind the chart, see FlGridData.
Holds data to draw the border around the chart, see FlBorderData.
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.
Shows a label on each spot, see ScatterLabelSettings.
Rotates the chart 90 degrees (clockwise) in every quarter turn.
It works like the RotatedBox widget.
errorIndicatorDataFlErrorIndicatorData<ScatterChartSpotErrorRangeCallbackInput>#defaultconst FlErrorIndicatorData<ScatterChartSpotErrorRangeCallbackInput>()Holds data for showing error indicators on the scatterSpots
ScatterSpot
The x value of the spot, on the horizontal axis (from left to right).
The y value of the spot, on the vertical axis (from bottom to top).
Determines show or hide the spot.
Meant to determine which spots are drawn on top when they overlap.
Note that the chart doesn't use it yet: the spots are drawn in the
order of ScatterChartData.scatterSpots (the last one on top).
Draws the spot, like a FlDotCirclePainter (the shape, size and color).
Defaults to a circle with a radius of 6, and a color of
Colors.primaries picked from the x and y of the spot.
The error range of the spot on the x axis, drawn by the
errorIndicatorData of the chart, see FlErrorRange.
The error range of the spot on the y axis, drawn by the
errorIndicatorData of the chart, see FlErrorRange.
ScatterTouchData (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 spot,
see ScatterTouchTooltipData.
Extends the touchable area of each spot by this distance (in pixels).
If true, the chart handles touches by itself: it shows a tooltip bubble on top of the touched spot.
ScatterTouchTooltipData
Sets a rounded radius for the tooltip.
Applies a padding for showing contents inside the tooltip.
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 data for showing content inside the tooltip.
Forces the tooltip to shift horizontally inside the chart, if overflow happens.
Forces the tooltip to shift vertically inside the chart, if overflow happens.
Controls the rotation of the tooltip.
Border of the tooltip bubble.
Retrieves the background color of the tooltip for each touched spot.
ScatterTooltipItem
Text of the tooltip.
The space between the tooltip and the top of the spot.
TextAlign of the showing content.
Direction of showing text.
Add further style and format to the text of the tooltip
ScatterTouchResponse
You can listen to touch behaviors callback and retrieve this object when any touch action happens.
The location of the touch in pixels on the screen.
The axis coordinate of the touch in chart's coordinate system.
The touched spot, null if no spot is touched.
ScatterTouchedSpot
ScatterLabelSettings
Determines whether to show or hide the labels.
getLabelTextStyleFunctionTextStyle? Function(int, ScatterSpot)?#defaultgetDefaultLabelTextStyleFunctionThis function gives you the index value of the spot in the list and returns the text style.
This function gives you the index value of the spot in the list and returns the label.
Determines the direction of the text for the labels.
some samples
Sample 1 (Source Code)
Sample 2 (Source Code)
