repo_files/documentations/scatter_chart.md
ScatterChart(
ScatterChartData(
// read about it in the ScatterChartData section
),
duration: Duration(milliseconds: 150), // Optional
curve: Curves.linear, // Optional
);
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.
| PropName | Description | default value |
|---|---|---|
| scatterSpots | list of ScatterSpot to show the scatter spots on the chart | [] |
| titlesData | check the FlTitlesData | FlTitlesData() |
| axisTitleData | check the FlAxisTitleData | FlAxisTitleData() |
| scatterTouchData | ScatterTouchData holds the touch interactivity details | ScatterTouchData() |
| showingTooltipIndicators | indices of showing tooltip, The point is that you need to disable touches to show these tooltips manually | [] |
| rotationQuarterTurns | Rotates the chart 90 degrees (clockwise) in every quarter turns. This feature works like the RotatedBox widget | 0 |
| errorIndicatorData | Holds data for representing an error indicator (you see the error indicators if you provide the xError or yError in the ScatterSpot) | ErrorIndicatorData() |
| PropName | Description | default value |
|---|---|---|
| show | determines to show or hide the spot | true |
| radius | radius of the showing spot | [8] |
| color | colors of the spot | // a color based on the values |
| renderPriority | sort by this to manage overlap | 0 |
| xError | Determines the error range of the data point using (FlErrorRange)[base_chart.md#FlErrorRange] (which ontains lowerBy and upperValue) for the x-axis | null |
| yError | Determines the error range of the data point using (FlErrorRange)[base_chart.md#FlErrorRange] (which ontains upperBy and upperValue) for the y-axis | null |
| 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 ScatterTouchResponse | MouseCursor.defer |
| touchTooltipData | a ScatterTouchTooltipData, that determines how show the tooltip on top of touched spot (appearance of the showing tooltip bubble) | ScatterTouchTooltipData() |
| touchSpotThreshold | the threshold of the touch accuracy | 0 |
| 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 ScatterTouchResponse | null |
| longPressDuration | allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is kLongPressTimeout | null |
| 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) |
| 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 a ScatterTooltipItem by the given ScatterSpot | defaultScatterTooltipItem |
| 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 |
| getTooltipColor | a callback that retrieves the Color for each touched spots separately from the given ScatterSpot to set the background color of the tooltip bubble | Colors.blueGrey.darken(15) |
| PropName | Description | default value |
|---|---|---|
| text | text string of each row in the tooltip bubble | null |
| textStyle | TextStyle of the showing text row | null |
| textDirection | TextDirection of the showing text row | TextDirection.ltr |
| bottomMargin | bottom margin of the tooltip (to the top of most top spot) | 0 |
| children | List<TextSpan> pass additional InlineSpan children for a more advance tooltip | null |
| 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 |
| touchedSpot | Instance of ScatterTouchedSpot which holds data about the touched section | null |
| PropName | Description | default value |
|---|---|---|
| spot | touched ScatterSpot | null |
| spotIndex | index of touched ScatterSpot | null |
| PropName | Description | default value |
|---|---|---|
| showLabel | Determines whether to show or hide the labels. | false |
| getLabelTextStyleFunction | This function gives you the index value of the spot in the list and returns the text style. | null |
| getLabelFunction | This function gives you the index value of the spot in the list and returns the label. | spot.radius.toString() |
| textDirection | Determines the direction of the text for the labels. | TextDirection.ltr |