firka/fl_chart
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.0.0
Some checks failed
Code Coverage / upload (push) Has been cancelled
Details
Gh-Pages / build (push) Has been cancelled
Details
Code Verification / verify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
zypherift
2025-08-09 18:17:34 +02:00
commit c7e3f36b06
438 changed files with 79192 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
repo_files/documentations/bar_chart.md Normal file
View File

@@ -0,0 +1,166 @@
<a href="https://www.youtube.com/watch?v=vYe0RY1nCAA&list=PL1-_rCwRcnbNpvodmbt43O81wMUdBv8-a"><img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_video_thumbnail.png" width=540></a>
### How to use
```dart
BarChart(
BarChartData(
// read about it in the BarChartData 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](https://flutter.dev/docs/development/ui/animations/implicit-animations)). You can control the animation [duration](https://api.flutter.dev/flutter/dart-core/Duration-class.html) and [curve](https://api.flutter.dev/flutter/animation/Curves-class.html) using optional `duration` and `curve` properties, respectively.
### BarChartData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|barGroups| list of [BarChartGroupData ](#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](#BarChartAlignment) is `BarChartAlignment.start`, `BarChartAlignment.center` or `BarChartAlignment.end`|16|
|alignment| a [BarChartAlignment](#BarChartAlignment) that determines the alignment of the barGroups, inspired by [Flutter MainAxisAlignment](https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html)| BarChartAlignment.spaceEvenly|
|titlesData| check the [FlTitlesData](base_chart.md#FlTitlesData)|FlTitlesData()|
|axisTitleData| check the [FlAxisTitleData](base_chart.md#FlAxisTitleData)| FlAxisTitleData()|
|rangeAnnotations| show range annotations behind the chart, check [RangeAnnotations](base_chart.md#RangeAnnotations) | RangeAnnotations()|
|backgroundColor| a background color which is drawn behind the chart| null |
|barTouchData| [BarTouchData](#bartouchdata-read-about-touch-handling) holds the touch interactivity details|BarTouchData()|
|gridData| check the [FlGridData](base_chart.md#FlGridData)|FlGridData()|
|borderData| check the [FlBorderData](base_chart.md#FlBorderData)|FlBorderData()|
|maxY| gets maximum y of y axis, if null, value will be read from the input barGroups (But it is more performant if you provide them) | null|
|minY| gets minimum y of y axis, if null, value will be read from the input barGroups (But it is more performant if you provide them) | null|
|baselineY| defines the baseline of y-axis | 0|
|extraLinesData| allows extra horizontal lines to be drawn on the chart. Vertical lines are ignored when used with BarChartData, please see [#1149](https://github.com/imaNNeo/fl_chart/issues/1149), check [ExtraLinesData](base_chart.md#ExtraLinesData)|ExtraLinesData()|
|rotationQuarterTurns|Rotates the chart 90 degrees (clockwise) in every quarter turns. This feature works like the [RotatedBox](https://api.flutter.dev/flutter/widgets/RotatedBox-class.html) widget. You can have horizontal BarChart by changing this value to |0|
|errorIndicatorData|Holds data for representing an error indicator (you see the error indicators if you provide the `toYErrorRange` in the [BarChartRodData](#BarChartRodData))|[ErrorIndicatorData()](base_chart.md#FlErrorIndicatorData)|
### BarChartGroupData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|x| x position of the group on horizontal axis|null|
|barRods| list of [BarChartRodData](#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, The point is that you need to disable touches to show these tooltips manually | []|
### BarChartAlignment
enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetween`}
### BarChartRodData
|PropName|Description|default value|
|:-------|:----------|:------------|
|fromY|Position that this bar starts from|0|
|toY|This rod is from `fromY` to `toY` in the vertical axis|null|
|color|color of the rod bar|[Colors.cyan]|
|gradient| You can use any [Gradient](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) here. such as [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient-class.html) or [RadialGradient](https://api.flutter.dev/flutter/painting/RadialGradient-class.html)|null|
|width|stroke width of the rod bar|8|
|borderRadius|Determines the edge rounding of the bar corners, see [BorderRadius](https://api.flutter.dev/flutter/painting/BorderRadius-class.html). When `null`, it defaults to completely round bars. |null|
|borderDashArray|Determines wether the border stroke is dashed. It is 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|
|borderSide|Determines the border stroke around of the bar, see [BorderSide](https://api.flutter.dev/flutter/painting/BorderSide-class.html). When `null`, it defaults to draw no stroke. |null|
|backDrawRodData|if provided, draws a rod in the background of the line bar, check the [BackgroundBarChartRodData](#BackgroundBarChartRodData)|null|
|rodStackItem|if you want to have stacked bar chart, provide a list of [BarChartRodStackItem](#BarChartRodStackItem), it will draw over your rod.|[]|
|toYErrorRange|If you want to show an error range on the rod, provide [FlErrorRange](base_chart.md#FlErrorRange)|null|
### BackgroundBarChartRodData
|PropName|Description|default value|
|:-------|:----------|:------------|
|fromY|same as [BarChartRodData](#BarChartRodData)'s fromY|0|
|toY|same as [BarChartRodData](#BarChartRodData)'s y|8|
|show|determines to show or hide this section|false|
|color|same as [BarChartRodData](#BarChartRodData)'s colors|[Colors.blueGrey]|
|gradient|same as [BarChartRodData](#BarChartRodData)'s gradient|null|
### 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|
|borderSide|draw border stroke for each stack item|null|
### BarTouchData ([read about touch handling](handle_touches.md))
|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](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [BarTouchResponse](#BarTouchResponse)|MouseCursor.defer|
|touchTooltipData|a [BarTouchTooltipData](#BarTouchTooltipData), that determines how show the tooltip on top of touched spots (appearance of the showing tooltip bubble)|BarTouchTooltipData()|
|touchExtraThreshold|an [EdgeInsets](https://api.flutter.dev/flutter/painting/EdgeInsets-class.html) 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/pointer events and responses, it gives you a [FlTouchEvent](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [BarTouchResponse](#BarTouchResponse)| null|
|longPressDuration| allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is [kLongPressTimeout](https://api.flutter.dev/flutter/gestures/kLongPressTimeout-constant.html)| null|
### BarTouchTooltipData
|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 bar|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 [BarTooltipItem](#BarTooltipItem) by the given [BarChartGroupData](#BarChartGroupData), groupIndex, [BarChartRodData](#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|
|direction| Controls showing tooltip on top or bottom, default is auto.| auto|
|getTooltipColor|a callback that retrieves the Color for each rod separately from the given [BarChartGroupData](#BarChartGroupData) to set the background color of the tooltip bubble|Colors.blueGrey.darken(15)|
### BarTooltipItem
|PropName|Description|default value|
|:-------|:----------|:------------|
|text|text string of each row in the tooltip bubble|null|
|textStyle|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) of the showing text row|null|
|textAlign|[TextAlign](https://api.flutter.dev/flutter/dart-ui/TextAlign-class.html) of the showing text row|TextAlign.center|
|textDirection|[TextDirection](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html) of the showing text row|TextDirection.ltr|
|children|[List<TextSpan>](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) pass additional InlineSpan children for a more advance tooltip|null|
### BarTouchResponse
|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|
|spot|a [BarTouchedSpot](#BarTouchedSpot) class to hold data about touched spot| null |
### BarTouchedSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|touchedBarGroup|the [BarChartGroupData](#BarChartGroupData) that user touched its rod's spot| null |
|touchedBarGroupIndex| index of touched barGroup| null|
|touchedRodData|the [BarChartRodData](#BarChartRodData) that user touched its spot|null|
|touchedRodDataIndex| index of touchedRod | null|
|touchedStackItem| [BarChartRodStackItem](#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](/example/lib/presentation/samples/bar/bar_chart_sample1.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_1.gif" width="300" >
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_1_anim.gif" width="300" >
##### Sample 2 ([Source Code](/example/lib/presentation/samples/bar/bar_chart_sample2.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_2.gif" width="300" >
##### Sample 3 ([Source Code](/example/lib/presentation/samples/bar/bar_chart_sample3.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_3.png" width="300" >
##### Sample 4 ([Source Code](/example/lib/presentation/samples/bar/bar_chart_sample4.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_4.png" width="300" >
##### Sample 5 ([Source Code](/example/lib/presentation/samples/bar/bar_chart_sample5.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_5.gif" width="300" >
##### Sample 6 ([Source Code](/example/lib/presentation/samples/bar/bar_chart_sample6.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_6.png" width="300" >
##### Sample 7 ([Source Code](/example/lib/presentation/samples/bar/bar_chart_sample7.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_7.gif" width="300" >
##### Gist - Toggleable Tooltip ([Source Code](https://gist.github.com/imaNNeo/bce3f0169ff3fd6c3f137cdeb5005c0e))
https://user-images.githubusercontent.com/7009300/156784816-53f95dd9-f387-4600-8a92-d05b1aeea3da.mov

209
repo_files/documentations/base_chart.md Normal file
View File

@@ -0,0 +1,209 @@
# BaseChart
### FlBorderData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|show| determines to show or hide the border |true|
|border| [Border](https://api.flutter.dev/flutter/painting/Border-class.html) details that determines which border should be drawn with which color| Border.all(color: Colors.black, width: 1.0, style: BorderStyle.solid)|
### FlTitlesData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|show| determines to show or hide the titles Around the chart|true|
|leftTitles| an [AxisTitle](#AxisTitle) that holds data to draw left titles | AxisTitles(sideTitles: SideTitles(reservedSize: 40, showTitles: true))|
|topTitles| an [AxisTitle](#AxisTitle) that holds data to draw top titles | AxisTitles(sideTitles: SideTitles(reservedSize: 6, showTitles: true))|
|rightTitles| an [AxisTitle](#AxisTitle) that holds data to draw right titles | AxisTitles(sideTitles: SideTitles(reservedSize: 40, showTitles: true))|
|bottomTitles| an [AxisTitle](#AxisTitle) that holds data to draw bottom titles | AxisTitles(sideTitles: SideTitles(reservedSize: 6, showTitles: true))|
### AxisTitle
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|axisNameSize| Determines the size of [axisName] | `16`|
|axisNameWidget| It shows the name of axis (you can pass a Widget)| `null`|
|sideTitles| It accepts a [SideTitles](#SideTitles) which is responsible to show your axis side titles| `SideTitles()`|
|drawBehindEverything| If titles are showing on top of your tooltip, you can draw them behind everything.| `true`|
### SideTitles
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|showTitles| determines whether to show or hide the titles | false|
|getTitlesWidget| A function to retrieve the title widget with given value on the related axis.|defaultGetTitle|
|reservedSize| It determines the maximum space that your titles need, |22|
|interval| Texts are showing with provided `interval`. If you don't provide anything, we try to find a suitable value to set as `interval` under the hood. | null |
|minIncluded| Determines whether to include title for minimum data value | true |
|maxIncluded| Determines whether to include title for maximum data value | true |
### SideTitleFitInsideData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|enabled| determines whether to enable fit inside to SideTitleWidget |true|
|axisPosition| position (in pixel) that applied to the center of child widget along its corresponding axis |null|
|parentAxisSize| child widget's corresponding axis maximum width/height |null|
|distanceFromEdge| distance between child widget and its closest corresponding axis edge | 6 |
### FlGridData
|PropName|Description|default value|
|:-------|:----------|:------------|
|show|determines to show or hide the background grid data|true|
|drawHorizontalLine|determines to show or hide the horizontal grid lines|true|
|horizontalInterval|interval space of grid, left it null to be calculate automatically |null|
|getDrawingHorizontalLine|a function to get the line style of each grid line by giving the related axis value|defaultGridLine|
|checkToShowHorizontalLine|a function to check whether to show or hide the horizontal grid by giving the related axis value |showAllGrids|
|drawVerticalLine|determines to show or hide the vertical grid lines|true|
|verticalInterval|interval space of grid, left it null to be calculate automatically |null|
|getDrawingVerticalLine|a function to get the line style of each grid line by giving the related axis value|defaultGridLine|
|checkToShowVerticalLine|a function to determine whether to show or hide the vertical grid by giving the related axis value |showAllGrids|
### FlSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|x|represents x on the coordinate system (x starts from left)|null|
|y|represents y on the coordinate system (y starts from bottom)|null|
|xError| Determines the error range of the data point using (FlErrorRange)[#FlErrorRange] (which ontains `lowerBy` and `upperValue`) for the x-axis|null|
|yError| Determines the error range of the data point using (FlErrorRange)[#FlErrorRange] (which ontains `upperBy` and `upperValue`) for the y-axis|null|
### FlLine
|propName|Description|default value|
|:-------|:----------|:------------|
|color|determines the color of line|Colors.black|
|gradient|gradient of the line (you have to provide either `color` or `gradient`|null|
|strokeWidth|determines the stroke width of the line|2|
|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|
### TouchedSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|spot|the touched [FlSpot](#FlSpot)|null|
|offset|[Offset](https://api.flutter.dev/flutter/dart-ui/Offset-class.html) of the touched spot|null|
### RangeAnnotations
|PropName|Description|default value|
|:-------|:----------|:------------|
|horizontalRangeAnnotations|list of [horizontalRangeAnnotation](#HorizontalRangeAnnotation) to draw on the chart|[]|
|verticalRangeAnnotations|list of [VerticalRangeAnnotation](#VerticalRangeAnnotation) to draw on the chart|[]|
### HorizontalRangeAnnotation
|PropName|Description|default value|
|:-------|:----------|:------------|
|y1|start interval of horizontal rectangle|null|
|y2|end interval of horizontal rectangle|null|
|color|color of the rectangle|Colors.white|
|gradient|gradient of the rectangle|null|
### VerticalRangeAnnotation
|PropName|Description|default value|
|:-------|:----------|:------------|
|x1|start interval of vertical rectangle|null|
|x2|end interval of vertical rectangle|null|
|color|color of the rectangle|Colors.white|
|gradient|gradient of the rectangle|null|
### FlTouchEvent
Base class for all supported touch/pointer events.
|PropName|Description|Inspired from|
|:-------|:----------|:----------|
|FlPanDownEvent|Contains information of happened touch gesture|[GestureDragDownCallback](https://api.flutter.dev/flutter/gestures/GestureDragDownCallback.html)|
|FlPanStartEvent|When a pointer has contacted the screen and has begun to move.|[GestureDragStartCallback](https://api.flutter.dev/flutter/gestures/GestureDragStartCallback.html)|
|FlPanUpdateEvent|When a pointer that is in contact with the screen and moving has moved again.|[GestureDragUpdateCallback](https://api.flutter.dev/flutter/gestures/GestureDragUpdateCallback.html)|
|FlPanCancelEvent|When the pointer that previously triggered a `FlPanStartEvent` did not complete.|[GestureDragCancelCallback](https://api.flutter.dev/flutter/gestures/GestureDragCancelCallback.html)|
|FlPanEndEvent|When a pointer that was previously in contact with the screen and moving is no longer in contact with the screen.|[GestureDragEndCallback](https://api.flutter.dev/flutter/gestures/GestureDragEndCallback.html)|
|FlTapDownEvent|When a pointer that might cause a tap has contacted the screen.|[GestureTapDownCallback](https://api.flutter.dev/flutter/gestures/GestureTapDownCallback.html)|
|FlTapCancelEvent|When the pointer that previously triggered a `FlTapDownEvent` will not end up causing a tap.|[GestureTapCancelCallback](https://api.flutter.dev/flutter/gestures/GestureTapCancelCallback.html)|
|FlTapUpEvent|When a pointer that will trigger a tap has stopped contacting the screen.|[GestureTapUpCallback](https://api.flutter.dev/flutter/gestures/GestureTapUpCallback.html)|
|FlLongPressStart|Called When a pointer has remained in contact with the screen at the same location for a long period of time.|[GestureLongPressStartCallback](https://api.flutter.dev/flutter/gestures/GestureLongPressStartCallback.html)|
|FlLongPressMoveUpdate|When a pointer is moving after being held in contact at the same location for a long period of time. Reports the new position and its offset from the original down position.|[GestureLongPressMoveUpdateCallback](https://api.flutter.dev/flutter/gestures/GestureLongPressMoveUpdateCallback.html)|
|FlLongPressEnd|When a pointer stops contacting the screen after a long press gesture was detected. Also reports the position where the pointer stopped contacting the screen.|[GestureLongPressEndCallback](https://api.flutter.dev/flutter/gestures/GestureLongPressEndCallback.html)|
|FlPointerEnterEvent|The pointer has moved with respect to the device while the pointer is or is not in contact with the device, and it has entered our chart.|[PointerEnterEventListener](https://api.flutter.dev/flutter/services/PointerEnterEventListener.html)|
|FlPointerHoverEvent|The pointer has moved with respect to the device while the pointer is not in contact with the device.|[PointerHoverEventListener](https://api.flutter.dev/flutter/services/PointerHoverEventListener.html)|
|FlPointerExitEvent|The pointer has moved with respect to the device while the pointer is or is not in contact with the device, and exited our chart.|[PointerExitEventListener](https://api.flutter.dev/flutter/services/PointerExitEventListener.html)|
### ExtraLinesData
|PropName|Description|default value|
|:-------|:----------|:------------|
|extraLinesOnTop|determines to paint the extraLines over the trendline or below it|true|
|horizontalLines|list of [HorizontalLine](#HorizontalLine) to draw on the chart|[]|
|verticalLines|list of [VerticalLine](#VerticalLine) to draw on the chart|[]|
### HorizontalLine
|PropName|Description|default value|
|:-------|:----------|:------------|
|y|draw straight line from left to right of the chart with dynamic y value|null|
|color|color of the line|Colors.black|
|gradient|gradient of the line (you have to provide either `color` or `gradient`|null|
|strokeWidth|strokeWidth of the line|2|
|strokeCap|strokeCap of the line,e.g. Setting to StrokeCap.round will draw the tow ends of line rounded. NOTE: this might not work on dash lines.|StrokeCap.butt|
|image|image to annotate the line. the Future must be complete at the time this is received by the chart|null|
|sizedPicture|[SizedPicture](#Sizedpicture) uses an svg to annotate the line with a picture. the Future must be complete at the time this is received by the chart|null|
|label|a [HorizontalLineLabel](#HorizontalLineLabel) object with label parameters|null
### VerticalLine
|PropName|Description|default value|
|:-------|:----------|:------------|
|x|draw straight line from bottom to top of the chart with dynamic x value|null|
|color|color of the line|Colors.black|
|gradient|gradient of the line (you have to provide either `color` or `gradient`|null|
|strokeWidth|strokeWidth of the line|2|
|strokeCap|strokeCap of the line,e.g. Setting to StrokeCap.round will draw the tow ends of line rounded. NOTE: this might not work on dash lines.|StrokeCap.butt|
|image|image to annotate the line. the Future must be complete at the time this is received by the chart|null|
|sizedPicture|[SizedPicture](#SizedPicture) uses an svg to annotate the line with a picture. the Future must be complete at the time this is received by the chart|null|
|label|a [VerticalLineLabel](#VerticalLineLabel) object with label parameters|null
### SizedPicture
|PropName|Description|default value|
|:-------|:----------|:------------|
|Picture|a Dart UI Picture which should be derived from the svg. see example for how to get a Picture from an svg.|null|
|width|the width of the picture|null|
|height|the height of the picture|null|
### HorizontalLineLabel
|PropName|Description|default value|
|:-------|:----------|:------------|
|show| Determines showing or not showing label|false|
|padding|[EdgeInsets](https://api.flutter.dev/flutter/painting/EdgeInsets-class.html) object with label padding configuration|EdgeInsets.zero|
|style|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) which determines label text style|TextStyle(fontSize: 11, color: line.color)|
|alignment|[Alignment](https://api.flutter.dev/flutter/painting/Alignment-class.html) with label position relative to line|Alignment.topLeft|
|direction|Direction of the text (horizontal or vertical)|LabelDirection.horizontal|
|labelResolver|Getter function returning label title|defaultLineLabelResolver|
### VerticalLineLabel
|PropName|Description|default value|
|:-------|:----------|:------------|
|show| Determines showing or not showing label|false|
|padding|[EdgeInsets](https://api.flutter.dev/flutter/painting/EdgeInsets-class.html) object with label padding configuration|EdgeInsets.zero|
|style|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) which determines label text style|TextStyle(fontSize: 11, color: line.color)|
|alignment|[Alignment](https://api.flutter.dev/flutter/painting/Alignment-class.html) with label position relative to line|Alignment.topLeft|
|direction|Direction of the text (horizontal or vertical)|LabelDirection.horizontal|
|labelResolver|Getter function returning label title|defaultLineLabelResolver|
### FLHorizontalAlignment
enum values {`center`, `left`, `right`}
### FlErrorIndicatorData
|PropName| Description | default value |
|:-------|:------------------------------------------------------------|:-----------------------|
|show| Determines showing or not showing error indicator/threshold | true |
|painter| A callback that allows you to provide a custom painter for the error indicator| FlSimpleErrorPainter() |
### FlErrorRange
|PropName| Description | default value |
|:-------|:-------------------------------------------------------------------------------|:-----------------------|
|lowerBy| Lower value of the error range. It is subtracted from the spot value and shoul be positive| null|
|upperBy| Upper value of the error range. It is added to the spot value and shoul be positive| null|
### AxisSpotIndicator
|PropName|Description|default value|
|:-------|:----------|:------------|
|x|x value of the touched spot|required|
|y|y value of the touched spot|required|
|AxisSpotIndicatorPainter|a painter that is used to draw the touched spot indicator. You can use this to customize the appearance of the touched spot indicator (Or you can implement your own painter).|AxisLinesIndicatorPainter()|

104
repo_files/documentations/candlestick_chart.md Normal file
View File

@@ -0,0 +1,104 @@
# CandlestickChart
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/candlestick_chart/candlestick_chart_sample_1.gif" width="300" >
### How to use
```dart
CandlestickChart(
CandlestickChartData(
// read about it in the CandlestickChartData 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](https://flutter.dev/docs/development/ui/animations/implicit-animations)). You can control the animation [duration](https://api.flutter.dev/flutter/dart-core/Duration-class.html) and [curve](https://api.flutter.dev/flutter/animation/Curves-class.html) using optional `duration` and `curve` properties, respectively.
### CandlestickChartData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|candlestickSpots| Holds the data for the candlestick chart, which is a list of [CandlestickSpot](#CandlestickSpot) objects. Each [CandlestickSpot](#CandlestickSpot) represents a single data point in the chart.|[]|
|candlestickPainter| It is a painter that is used to draw each individual candlestick. You can use this to customize the appearance of the candlesticks (Or you can implement your own painter).|DefaultCandlestickPainter()|
|titlesData| check the [FlAxisTitleData](base_chart.md#FlAxisTitleData)| FlAxisTitleData()|
|candlestickTouchData| [CandlestickTouchData](#CandlestickTouchData) holds the touch interactivity details| CandlestickTouchData()|
|showingTooltipIndicators| indices of showing tooltip, The point is that you need to disable touches to show these tooltips manually|[]|
|gridData|check the [FlGridData](base_chart.md#FlGridData)|FlGridData()|
|borderData|check the [FlBorderData](base_chart.md#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|
|rangeAnnotations|show range annotations behind the chart, check [RangeAnnotations](base_chart.md#RangeAnnotations) | RangeAnnotations()|
|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](https://api.flutter.dev/flutter/widgets/RotatedBox-class.html) widget|0|
|touchedPointIndicator|Shows the touched point in the chart, by default it shows a horizontal and vertical line exactly on the touched candle. If the `handleBuiltInTouches` is true in [CandlestickTouchData](#CandlestickTouchData), this parameter is used under the hood to highlight the selected point. But you can disable the `handleBuiltInTouches` and implement your own way to highlight the point. Look at [AxisSpotIndicator](base_chart.md#AxisSpotIndicator) for more information |null|
### CandlestickSpot
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|open| The open value of the candlestick (based on the [OHLC standard](https://en.wikipedia.org/wiki/Open-high-low-close_chart)|required|
|high| The high value of the candlestick (based on the [OHLC standard](https://en.wikipedia.org/wiki/Open-high-low-close_chart))|required|
|low| The low value of the candlestick (based on the [OHLC standard](https://en.wikipedia.org/wiki/Open-high-low-close_chart))|required|
|close| The close value of the candlestick (based on the [OHLC standard](https://en.wikipedia.org/wiki/Open-high-low-close_chart))|required|
|show| Determines to show or hide this individual candlestick|true|
### CandlestickTouchData ([read about touch handling](handle_touches.md))
|PropName|Description|default value|
|:-------|:----------|:------------|
|enabled|determines to enable or disable touch behaviors|true|
|touchCallback| listen to this callback to retrieve touch/pointer events and responses, it gives you a [FlTouchEvent](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [CandlestickTouchResponse](#CandlestickTouchResponse)| null|
|mouseCursorResolver|you can change the mouse cursor based on the provided [FlTouchEvent](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [CandlestickTouchResponse](#CandlestickTouchResponse)|MouseCursor.defer|
|touchTooltipData|a [CandlestickTouchTooltipData](#CandlestickTouchTooltipData), that determines how show the tooltip on top of touched spot (appearance of the showing tooltip bubble)|CandlestickTouchTooltipData()|
|touchSpotThreshold|the threshold of the touch accuracy|4|
|handleBuiltInTouches| set this true if you want the built in touch handling (show a tooltip bubble and an indicator on touched/hovered spots) | true|
|longPressDuration| allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is [kLongPressTimeout](https://api.flutter.dev/flutter/gestures/kLongPressTimeout-constant.html)| null|
### CandlestickTouchTooltipData
|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 [CandlestickTooltipItem](#CandlestickTooltipItem) by the given [CandlestickSpot](#CandlestickSpot) |defaultCandlestickTooltipItem|
|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 [CandlestickSpot](#CandlestickSpot) to set the background color of the tooltip bubble|Colors.blueGrey.darken(80)|
### CandlestickTooltipItem
|PropName|Description|default value|
|:-------|:----------|:------------|
|text|text string of each row in the tooltip bubble|null|
|textStyle|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) of the showing text row|null|
|textDirection|[TextDirection](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html) of the showing text row|TextDirection.ltr|
|bottomMargin| bottom margin of the tooltip (to the top of most top spot) | 0|
|children|[List<TextSpan>](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) pass additional InlineSpan children for a more advance tooltip|null|
### CandlestickTouchResponse
###### you can listen to touch behaviors callback and retrieve this object when any touch action happened.
|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 [CandlestickTouchedSpot](#CandlestickTouchedSpot) which holds data about the touched spot|null|
### CandlestickTouchedSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|spot|touched [CandlestickSpot](#CandlestickSpot)|null|
|spotIndex|index of touched [CandlestickSpot](#CandlestickSpot)|null|
### some samples
----
##### Sample 1 ([Source Code](/example/lib/presentation/samples/candlestick/candlestick_chart_sample1.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/candlestick_chart/candlestick_chart_sample_1.gif" width="300" >

33
repo_files/documentations/handle_animations.md Normal file
View File

@@ -0,0 +1,33 @@
### Animations
|Sample1 |Sample2 |Sample3 |
|:------------:|:------------:|:-------------:|
| [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_1_anim.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-1-source-code) | [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_2_anim.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-2-source-code) | [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_1_anim.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#sample-1-source-code) |
##### How?
We handle all animations Implicitly, This is power of the [ImplicitlyAnimatedWidget](https://api.flutter.dev/flutter/widgets/ImplicitlyAnimatedWidget-class.html), just like [AnimatedContainer](https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html). It means you don't need to do anything, just change any value and the animation is handled under the hood, if you are curious about it, check the source code, reading the source code is the best way to learn things.
##### Properties
You can change the [Duration](https://api.flutter.dev/flutter/dart-core/Duration-class.html) and [Curve](https://api.flutter.dev/flutter/animation/Curves-class.html) of animation using `duration` and `curve` properties respectively.
```dart
LineChart(
duration: Duration(milliseconds: 150),
curve: Curves.linear,
LineChartData(
isShowingMainData ? sampleData1() : sampleData2(),
),
)
```
##### How to disable
If you want to disable the animations, you can set `Duration.zero` as `duration`.
```dart
LineChart(
duration: Duration.zero,
LineChartData(
// Your chart data here
),
)

51
repo_files/documentations/handle_touches.md Normal file
View File

@@ -0,0 +1,51 @@
### Touch Interactivity
|LineChart |BarChart |PieChart |
|:------------:|:------------:|:-------------:|
| [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_1.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-1-source-code) [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_2.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#sample-2-source-code) | [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_1.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#sample-1-source-code) [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_2.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#sample-2-source-code) | [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/pie_chart/pie_chart_sample_1.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/pie_chart.md#sample-1-source-code) [![](https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/pie_chart/pie_chart_sample_2.gif)](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/pie_chart.md#sample-2-source-code) |
#### The Interaction Flow
When an interaction happens, our renderers give us a [FlTouchEvent](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent).
We pass it to correspond painter class. Then it calculates and gives us a TouchResponse (per interaction).
Then we call the touchCallback function that provided through the chart's data.
If you set `handleBuiltInTouches` true, it will handle touch by showing a tooltip or an indicator on the touched spot (in the line, bar and scatter charts), you can also handle your own touch handling along with the built in touches.
#### How to use? (for example in `LineChart`)
##### In the Line and Bar Charts we show a built in tooltip on the touched spots, then you just need to config how to show it, just fill the `touchTooltipData` in the `LineTouchData`.
#####
```dart
LineChart(
LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: TouchTooltipData (
getTooltipColor: (touchedSpot) => Colors.blueGrey.withOpacity(0.8),
.
.
.
)
)
)
)
```
##### But if you want more customization on touch behaviors, implement the `touchCallback` and handle it.
```dart
LineChart(
LineChartData(
lineTouchData: LineTouchData(
touchCallback: (FlTouchEvent event, LineTouchResponse touchResponse) {
if (event is FlTapUpEvent) {
// handle tap here
}
},
.
.
.
)
)
)
```

120
repo_files/documentations/handle_transformations.md Normal file
View File

@@ -0,0 +1,120 @@
# FL Chart Transformation Guide
The transformation feature in `fl_chart` allows users to interact with charts through scaling and panning, similar to Flutter's `InteractiveViewer` widget.
## Basic Usage
To enable transformations, provide a `FlTransformationConfig` to your chart:
```dart
LineChart(
LineChartData(...),
transformationConfig: FlTransformationConfig(
scaleAxis: FlScaleAxis.horizontal,
minScale: 1.0,
maxScale: 2.5,
),
)
```
### Configuration Options
See [FlTransformationConfig](https://github.com/imaNNeo/fl_chart/blob/main/lib/src/chart/base/axis_chart/transformation_config.dart) for more information.
### Chart-Specific Limitations
- **Bar Chart**: When using `BarChartAlignment.center`, `end`, or `start`, horizontal scaling is not supported
- **Line Chart**: Supports all transformation types
- **Scatter Chart**: Supports all transformation types
## Advanced Usage: Custom Transformation Controller
For more control over transformations, you can provide a `TransformationController`. This allows you to:
- Programmatically control the chart's transformation
- Reset to initial state
- Implement custom zoom/pan controls
### Limitations
At this moment, transformations made with a custom `TransformationController` are not prevented from moving the chart out of the screen. Developers are responsible for ensuring that the chart remains within the visible area and within the transformation limits.
See the implementation of [AxisChartScaffoldWidget](https://github.com/imaNNeo/fl_chart/blob/main/lib/src/chart/base/axis_chart/axis_chart_scaffold_widget.dart) for how to prevent the chart from moving out of the screen when using a custom `TransformationController`.
### Example Implementation
```dart
class ChartWithControls extends StatefulWidget {
@override
State<ChartWithControls> createState() => _ChartWithControlsState();
}
class _ChartWithControlsState extends State<ChartWithControls> {
late TransformationController _controller;
@override
void initState() {
super.initState();
_controller = TransformationController();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
AspectRatio(
aspectRatio: 1.4,
child: LineChart(
LineChartData(...),
transformationConfig: FlTransformationConfig(
scaleAxis: FlScaleAxis.horizontal,
minScale: 1.0,
maxScale: 25.0,
transformationController: _controller,
),
),
),
Row(
children: [
IconButton(
icon: Icon(Icons.zoom_in),
onPressed: () {
_controller.value *= Matrix4.diagonal3Values(1.1, 1.1, 1);
},
),
IconButton(
icon: Icon(Icons.zoom_out),
onPressed: () {
_controller.value *= Matrix4.diagonal3Values(0.9, 0.9, 1);
},
),
IconButton(
icon: Icon(Icons.refresh),
onPressed: () {
_controller.value = Matrix4.identity();
},
),
],
),
],
);
}
}
```
### Common Transformation Operations
See [Matrix4](https://pub.dev/documentation/vector_math/latest/vector_math_64/Matrix4-class.html) for more information on how to manipulate the matrix.
## Best Practices
1. Always dispose of the `TransformationController` when you're done with it
2. Set appropriate `minScale` and `maxScale` values to prevent excessive zooming
3. Consider your chart's alignment when choosing a `scaleAxis`
4. Provide visual feedback for transformation limits
5. Consider adding reset functionality for better user experience
6. If you have touch indicators, consider allowing users to disable panning when zoomed in. This way the touch indicators will be shown when users hold and drag to explore the chart's data, instead of panning the chart.
Remember that transformations are purely visual and don't affect the underlying data. They're particularly useful for exploring detailed data sets or allowing users to focus on specific regions of interest in your charts.

25
repo_files/documentations/index.md Normal file
View File

@@ -0,0 +1,25 @@
## FL Chart Documentation
FlChart allows you to draw your charts in the Flutter, currently we support these type of charts,
click and learn more about them.
- [LineChart](line_chart.md)
- [BarChart](bar_chart.md)
- [PieChart](pie_chart.md)
- [ScatterChart](scatter_chart.md)
- [RadarChart](radar_chart.md)
- [CandlestickChart](candlestick_chart.md)
-----------
- [Migration Guides](migration_guides/INDEX.md)
- [Handle Touches](handle_touches.md)
- [Handle Animations](handle_animations.md)
- [Handle Transformations](handle_transformations.md)

227
repo_files/documentations/line_chart.md Normal file
View File

@@ -0,0 +1,227 @@
<a href="https://www.youtube.com/watch?v=F3wTxTdAFaU&list=PL1-_rCwRcnbNpvodmbt43O81wMUdBv8-a"><img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_video_thumbnail.png" width=540></a>
### How to use
```dart
LineChart(
LineChartData(
// read about it in the LineChartData section
),
swapAnimationDuration: Duration(milliseconds: 150), // Optional
swapAnimationCurve: Curves.linear, // Optional
);
```
### Implicit Animations
When you change the chart's state, it animates to the new state internally (using [implicit animations](https://flutter.dev/docs/development/ui/animations/implicit-animations)). You can control the animation [duration](https://api.flutter.dev/flutter/dart-core/Duration-class.html) and [curve](https://api.flutter.dev/flutter/animation/Curves-class.html) using optional `swapAnimationDuration` and `swapAnimationCurve` properties, respectively.
### LineChartData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|lineBarsData| list of [LineChartBarData ](#LineChartBarData ) to show the chart's lines, they stack and can be drawn on top of each other|[]|
|betweenBarsData| list of [BetweenBarsData](#BetweenBarsData ) to fill the area between 2 chart lines|[]|
|titlesData| check the [FlTitlesData](base_chart.md#FlTitlesData)| FlTitlesData()|
|extraLinesData| [ExtraLinesData](base_chart.md#ExtraLinesData) object to hold drawing details of extra horizontal and vertical lines. Check [ExtraLinesData](base_chart.md#ExtraLinesData)|ExtraLinesData()|
|lineTouchData| [LineTouchData](#linetouchdata-read-about-touch-handling) holds the touch interactivity details| LineTouchData()|
|rangeAnnotations| show range annotations behind the chart, check [RangeAnnotations](base_chart.md#RangeAnnotations) | RangeAnnotations()|
|showingTooltipIndicators| show the tooltip based on provided list of [LineBarSpot](#LineBarSpot), The point is that you need to disable touches to show these tooltips manually| [] |
|gridData| check the [FlGridData](base_chart.md#FlGridData)|FlGridData()|
|borderData| check the [FlBorderData](base_chart.md#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](https://api.flutter.dev/flutter/widgets/RotatedBox-class.html) widget|0|
### LineChartBarData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|show| determines to show or hide the bar line|true|
|spots| list of [FlSpot](base_chart.md#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](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) here. such as [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient-class.html) or [RadialGradient](https://api.flutter.dev/flutter/painting/RadialGradient-class.html)|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](https://github.com/imaNNeo/fl_chart/issues/25)| 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) |BarAreaData|
|aboveBarData| check the [BarAreaData](#BarAreaData) |BarAreaData|
|dotData| check the [FlDotData](#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](https://api.flutter.dev/flutter/dart-ui/Shadow-class.html).|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](#LineChartStepData)()|
|errorIndicatorData|Holds data for representing an error indicator (you see the error indicators if you provide the `xError` or `yError` in the [FlSpot](base_chart.md#FlSpot)).|[ErrorIndicatorData()](base_chart.md#FlErrorIndicatorData)|
### 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](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) here. such as [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient-class.html) or [RadialGradient](https://api.flutter.dev/flutter/painting/RadialGradient-class.html)|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](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) here. such as [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient-class.html) or [RadialGradient](https://api.flutter.dev/flutter/painting/RadialGradient-class.html)|null|
|spotsLine| draw a line from each spot the the bottom, or top of the chart|[BarAreaSpotsLine](#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](base_chart.md#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](#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](handle_touches.md))
|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](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [LineTouchResponse](#LineTouchResponse)|MouseCursor.defer|
|touchTooltipData|a [LineTouchTooltipData](#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](#TouchedSpotIndicatorData) by the given list of [LineBarSpot](#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](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [LineTouchResponse](#LineTouchResponse)| null|
|longPressDuration| allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is [kLongPressTimeout](https://api.flutter.dev/flutter/gestures/kLongPressTimeout-constant.html)| 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](#LineTooltipItem) by the given list of [LineBarSpot](#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](#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](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) of the showing text row|null|
|textAlign|[TextAlign](https://api.flutter.dev/flutter/dart-ui/TextAlign-class.html) of the showing text row|TextAlign.center|
|textDirection|[TextDirection](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html) of the showing text row|TextDirection.ltr|
|children|[List<TextSpan>](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) pass additional InlineSpan children for a more advance tooltip|null|
### TouchedSpotIndicatorData
|PropName|Description|default value|
|:-------|:----------|:------------|
|indicatorBelowLine|a [FlLine](base_chart.md#FlLine) to show the below line indicator on the touched spot|null|
|touchedSpotDotData|a [FlDotData](#FlDotData) to show a dot indicator on the touched spot|null|
### LineBarSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|bar|the [LineChartBarData](#LineChartBarData) that contains a spot|null|
|barIndex|index of the target [LineChartBarData](#LineChartBarData) inside [LineChartData](#LineChartData)|null|
|spotIndex|index of the target [FlSpot](base_chart.md#FlSpot) inside [LineChartBarData](#LineChartBarData)|null|
### TouchLineBarSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|bar|the [LineChartBarData](#LineChartBarData) that contains a spot|null|
|barIndex|index of the target [LineChartBarData](#LineChartBarData) inside [LineChartData](#LineChartData)|null|
|spotIndex|index of the target [FlSpot](base_chart.md#FlSpot) inside [LineChartBarData](#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](#TouchLineBarSpot)|null|
### ShowingTooltipIndicators
|PropName|Description|default value|
|:-------|:----------|:------------|
|showingSpots|Determines the spots that each tooltip should be shown.|null|
### some samples
----
##### Sample 1 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample1.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_1.gif" width="300" >
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_1_anim.gif" width="300" >
##### Sample 2 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample2.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_2.gif" width="300" >
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_2_anim.gif" width="300" >
##### Sample 3 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample3.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_3.gif" width="300" >
##### Sample 4 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample4.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_4.png" width="300" >
##### Sample 5 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample5.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_5.png" width="300" >
##### Sample 6 - Reversed ([Source Code](/example/lib/presentation/samples/line/line_chart_sample6.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_6.png" width="300" >
##### Sample 7 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample7.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_7.png" width="300" >
##### Sample 8 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample8.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_8.png" width="300" >
##### Sample 9 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample9.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_9.gif" width="300" >
##### Sample 10 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample10.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_10.gif" width="300" >
##### Sample 11 ([Source Code](/example/lib/presentation/samples/line/line_chart_sample11.dart))
https://user-images.githubusercontent.com/7009300/152555425-3b53ac8c-257f-49b0-8d75-1a878c03ccaa.mp4

184
repo_files/documentations/migration_guides/0.50.0/MIGRATION_00_50_00.md Normal file
View File

@@ -0,0 +1,184 @@
# Migrate to 0.50.0
## Widgets as titles (instead of boring strings) [#183](https://github.com/imaNNeo/fl_chart/issues/183)
We did a lot of hard-work to bring widgets to our titles around the axis-based charts.
It means that you can now put a widget as a title instead of a string.
Look at the below samples:
**LineChartSample 8** ([Source Code](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/line/line_chart_sample8.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/line_chart/line_chart_sample_8.png" width="300" >
**BarChartSample 7** ([Source Code](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample7.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/bar_chart/bar_chart_sample_7.gif" width="300" >
**Breaking:**
Previously in [FlTitlesData](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#FlTitlesData), there were four [SideTitles](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#sidetitles). Now we have four [AxisTitle](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#axistitle) instead and [SideTitles](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#sidetitles) can be placed inside [AxisTitle](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#AxisTitle).
In fact, we removed `AxisTitlesData` class (which used to hold four `AxisTitle`). Now you can put them in [FlTitlesData](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltitlesdata).
bool? showTitle,
String? titleText,
double? reservedSize,
TextStyle? textStyle,
TextDirection? textDirection,
TextAlign? textAlign,
Look at the below sample.
Previously:
```dart
AxisBasedChartData( // Line, Bar and Scatter
axisTitleData: FlAxisTitleData(
bottomTitle: AxisTitle(
showTitle: true,
margin: 0,
titleText: '2019',
reservedSize: 80,
textStyle: TextStyle(color: Colors.green),
textAlign: TextAlign.right,
textDirection: TextDirection.rtl,
),
),
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return 'My Text'
},
reservedSize: 14,
interval: 1,
margin: 8,
getTextStyles: (context, value) => TextStyle(color: Colors.red),
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
),
)
)
```
Now in `0.50.0`:
```dart
AxisBasedChartData( // Line, Bar and Scatter
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
axisNameWidget: Text( // You can use any widget here
'2019',
style: TextStyle(color: Colors.green),
textAlign: TextAlign.right,
textDirection: TextDirection.rtl,
),
axisNameSize: 80,
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (value, titleMeta) {
return Padding( // You can use any widget here
padding: EdgeInsets.only(top: 8.0),
child: Text(
'My Text',
style: TextStyle(color: Colors.red),
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
),
);
},
reservedSize: 14,
interval: 1,
),
),
)
)
```
* Instead of setting `rotateAngle` property, now you can wrap your widget with [RotatedBox](https://api.flutter.dev/flutter/widgets/RotatedBox-class.html) to rotate it.
* Instead of setting `checkToShowTitle` property, you can pass an empty [SizedBox](https://api.flutter.dev/flutter/widgets/SizedBox-class.html) wherever you want to skip drawing a title.
-----
## Gradient and solid color #948
We made some changes on our approach for handling `solid` color and `gradient` colors.
Previously, we had these properties to handle gradient or solid color:
```dart
List<Color> colors,
List<double> stops,
Offset gradientFrom,
Offset gradientTo,
```
It was supposed to work on both solid color and gradient color.
If you pass just one color in the `colors` property, it was a solid color.
On the other hand, if you provide more than one color, it was a linear gradient.
Now we are using a new approach with the properties below:
```dart
Color? color,
Gradient? gradient,
```
* If you fill `color` property, it will be a solid color.
* If you fill `gradient` property, it would be any [Gradient](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) you want. Such as [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient-class.html) and [RadialGradient](https://api.flutter.dev/flutter/painting/RadialGradient-class.html).
* You need to fill one of them.
These are the affected classes:
* [BarChartRodData](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#barchartroddata)
* [BackgroundBarChartRodData](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/bar_chart.md#backgroundbarchartroddata)
* [BarAreaData](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#BarAreaData)
* [BetweenBarsData](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#betweenbarsdata)
* [LineChartBarData](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/line_chart.md#linechartbardata)
Check the below sample:
Previously:
```dart
LineChartBarData(
colors: [Colors.red]
)
```
Now in `0.50.0`:
```dart
LineChartBarData(
color: Colors.red
)
```
-----
Previously:
```dart
LineChartBarData(
colors: [Colors.green, Colors.blue],
)
```
Now in `0.50.0`:
```dart
LineChartBarData(
gradient: LinearGradient(
colors: [Colors.green, Colors.blue],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
)
)
```
-----
Previously:
```dart
LineChartBarData(
colors: [Colors.green, Colors.blue],
colorStops: [0.1, 0.10],
gradientFrom: Offset(0, 0), // topLeft
gradientTo: Offset(1, 1), // bottomRight
)
```
Now in `0.50.0`:
```dart
LineChartBarData(
gradient: LinearGradient(
colors: [Colors.green, Colors.blue],
stops: [0.1, 0.10],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
)
```

57
repo_files/documentations/migration_guides/0.55.0/MIGRATION_00_55_00.md Normal file
View File

@@ -0,0 +1,57 @@
# Migrate to new version
## The ability to rotate the RadarChart titles [#1057](https://github.com/imaNNeo/fl_chart/issues/1057)
We added the ability to customize the rotation angles of the RadarChart titles.
To do that we add to break one thing and added a new type.
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/documentations/migration_guides/0.55.0/attachments/radar_chart_sample_1.gif" width="300" >
**Breaking:**
We only changed [RadarChartData.getTitle](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/radar_chart.md#RadarChartData).
Its type [GetTitleByIndexFunction] changed from `string Function(int index)` to `RadarChartTitle Function(int index, double angle)`.
To reuse the example from the code:
Previously:
```dart
getTitle: (index) {
switch (index) {
case 0:
return 'Mobile or Tablet';
case 2:
return 'Desktop';
case 1:
return 'TV';
default:
return '';
}
}
```
Now in new version:
```dart
getTitle: (index, angle) {
switch (index) {
case 0:
return RadarChartTitle(text: 'Mobile or Tablet', angle: angle);
case 2:
return RadarChartTitle(text: 'Desktop', angle: angle);
case 1:
return RadarChartTitle(text: 'TV', angle: angle);
default:
return const RadarChartTitle(text: '');
}
}
```
If you take the provided `angle` and forward it to the [RadarChartTitle] it will behave like in previous versions.
But you can now render all the titles horizontally by avoiding the [RadarChartTitle.angle] prop (`0` by default).
Apply a relative angle, for example: `RadarChartTitle(text: 'Desktop', angle: angle + 90);`
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/documentations/migration_guides/0.55.0/attachments/radar_chart_sample_2.png" width="300" >
or an absolute angle, for example: `RadarChartTitle(text: 'Desktop', angle: 90);`
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/documentations/migration_guides/0.55.0/attachments/radar_chart_sample_3.png" width="300" >

BIN
repo_files/documentations/migration_guides/0.55.0/attachments/radar_chart_sample_1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
repo_files/documentations/migration_guides/0.55.0/attachments/radar_chart_sample_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
repo_files/documentations/migration_guides/0.55.0/attachments/radar_chart_sample_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

85
repo_files/documentations/migration_guides/0.67.0/MIGRATION_00_67_00.md Normal file
View File

@@ -0,0 +1,85 @@
# Migrate to new version
## Replaced tooltipBgColor
**Breaking: [#1595](https://github.com/imaNNeo/fl_chart/pull/1595)**
We added the ability to customize the tooltip background color for each point.
The property `Color tooltipBgColor` from Bar, Line and Scatter Charts is replaced with a callback `Color Function(spot) getTooltipColor`
#### BarChartData
Previously:
```dart
BarChartData(
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.blueGrey,
)
)
)
```
Now in new version:
```dart
BarChartData(
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
getTooltipColor: (BarChartGroupData group) => Colors.blueGrey,
)
)
)
```
#### LineChartData
Previously:
```dart
LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: Colors.blueGrey,
)
)
)
```
Now in new version:
```dart
LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
getTooltipColor: (LineBarSpot touchedSpot) => Colors.blueGrey,
)
)
)
```
#### ScatterChartData
Previously:
```dart
ScatterChartData(
scatterTouchData: ScatterTouchData(
touchTooltipData: ScatterTouchTooltipData(
tooltipBgColor: Colors.blueGrey,
)
)
)
```
Now in new version:
```dart
ScatterChartData(
scatterTouchData: ScatterTouchData(
touchTooltipData: ScatterTouchTooltipData(
getTooltipColor: (ScatterSpot touchedBarSpot) => Colors.blueGrey,
)
)
)
```

7
repo_files/documentations/migration_guides/0.70.0/MIGRATION_00_70_00.md Normal file
View File

@@ -0,0 +1,7 @@
# Migrate to version 0.70.0
## Fixed the equatable functionality in our PieChartSectionData
Please check any code that compares `PieChartSectionData` classes or other objects containing `PieChartSectionData` and make sure it is not affected by this change.
## `BarChart` is not const anymore
We added an assert to check if transformations are allowed depending on the `BarChartData.alignment` property. If you are using `BarChart` as a const, you need to remove the const keyword from the `BarChart` constructor. The compiler will show you an error if you try to use `BarChart` as a const.

7
repo_files/documentations/migration_guides/INDEX.md Normal file
View File

@@ -0,0 +1,7 @@
Here are fl_chart's migration guides:
#### [Migrate to 0.50.0](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/migration_guides/0.50.0/MIGRATION_00_50_00.md)
#### [Migrate to 0.55.0](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/migration_guides/0.55.0/MIGRATION_00_55_00.md)
#### [Migrate to 0.67.0](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/migration_guides/0.67.0/MIGRATION_00_67_00.md)

82
repo_files/documentations/pie_chart.md Normal file
View File

@@ -0,0 +1,82 @@
<a href="https://www.youtube.com/watch?v=VlXC-RAaX4Y&list=PL1-_rCwRcnbNpvodmbt43O81wMUdBv8-a"><img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/pie_chart/pie_chart_video_thumbnail.png" width=540></a>
### How to use
```dart
PieChart(
PieChartData(
// read about it in the PieChartData section
),
duration: Duration(milliseconds: 150), // Optional
curve: Curves.linear, // Optional
);
```
**If you have a padding widget around the PieChart, make sure to set `PieChartData.centerSpaceRadius` to `double.infinity`**
### Implicit Animations
When you change the chart's state, it animates to the new state internally (using [implicit animations](https://flutter.dev/docs/development/ui/animations/implicit-animations)). You can control the animation [duration](https://api.flutter.dev/flutter/dart-core/Duration-class.html) and [curve](https://api.flutter.dev/flutter/animation/Curves-class.html) using optional `duration` and `curve` properties, respectively.
### PieChartData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|sections| list of [PieChartSectionData ](#PieChartSectionData) that is shown on the pie chart|[]|
|centerSpaceRadius| free space in the middle of the PieChart, set `double.infinity` if you want it to be calculated according to the view size| double.nan|
|centerSpaceColor| colors the free space in the middle of the PieChart|Colors.transparent|
|sectionsSpace| space between the sections (margin of them). It does not work on html-rendere, read more about it [here](https://github.com/imaNNeo/fl_chart/issues/955) |2|
|startDegreeOffset| degree offset of the sections around the pie chart, should be between 0 and 360|0|
|pieTouchData| [PieTouchData](#pietouchdata-read-about-touch-handling) holds the touch interactivity details| PieTouchData()|
|borderData| shows a border around the chart, check the [FlBorderData](base_chart.md#FlBorderData)|FlBorderData()|
|titleSunbeamLayout| whether to rotate the titles on each section of the chart|false|
### PieChartSectionData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|value| value is the weight of each section, for example if all values is 25, and we have 4 section, then the sum is 100 and each section takes 1/4 of the whole circle (360/4) degree|10|
|color| colors the section| Colors.red
|gradient| You can use any [Gradient](https://api.flutter.dev/flutter/dart-ui/Gradient-class.html) here. such as [LinearGradient](https://api.flutter.dev/flutter/painting/LinearGradient-class.html) or [RadialGradient](https://api.flutter.dev/flutter/painting/RadialGradient-class.html) (you have to provide either `color` or `gradient`)|null|
|radius| the width radius of each section|40|
|showTitle| determines to show or hide the titles on each section|true|
|titleStyle| TextStyle of the titles| TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold)|
|title| title of the section| value|
|borderSide| Defines border stroke around the section | BorderSide(width: 0)|
|badgeWidget| badge component of the section| null|
|titlePositionPercentageOffset|the place of the title in the section, this field should be between 0 and 1|0.5|
|badgePositionPercentageOffset|the place of the badge component in the section, this field should be between 0 and 1|0.5|
### PieTouchData ([read about touch handling](handle_touches.md))
|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](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [PieTouchResponse](#PieTouchResponse)|MouseCursor.defer|
|touchCallback| listen to this callback to retrieve touch/pointer events and responses, it gives you a [FlTouchEvent](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [PieTouchResponse](#PieTouchResponse)| null|
|longPressDuration| allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is [kLongPressTimeout](https://api.flutter.dev/flutter/gestures/kLongPressTimeout-constant.html)| null|
### PieTouchResponse
|PropName|Description|default value|
|:-------|:----------|:------------|
|touchLocation|the location of the touch event in the device pixels coordinates|required|
|touchedSection|Instance of [PieTouchedSection](#PieTouchedSection) which holds data about the touched section|null|
### PieTouchedSection
|PropName|Description|default value|
|:-------|:----------|:------------|
|touchedSection|the [PieChartSectionData](#PieChartSectionData) that user touched| null |
|touchedSectionIndex| index of the touched section | null|
|touchAngle|the angle of the touch|null|
|touchRadius| the radius of the touch|null|
### some samples
----
##### Sample 1 ([Source Code](/example/lib/presentation/samples/pie/pie_chart_sample1.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/pie_chart/pie_chart_sample_1.gif" width="300" >
##### Sample 2 ([Source Code](/example/lib/presentation/samples/pie/pie_chart_sample2.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/pie_chart/pie_chart_sample_2.gif" width="300" >
##### Sample 3 ([Source Code](/example/lib/presentation/samples/pie/pie_chart_sample3.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/pie_chart/pie_chart_sample_3.gif" width="300" >

86
repo_files/documentations/radar_chart.md Normal file
View File

@@ -0,0 +1,86 @@
# RadarChart
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/radar_chart/radar_chart_sample_1.jpg" width="300" >
### How to use
```dart
RadarChart(
RadarChartData(
// read about it in the RadarChartData section
),
swapAnimationDuration: Duration(milliseconds: 150), // Optional
swapAnimationCurve: Curves.linear, // Optional
);
```
### Implicit Animations
When you change the chart's state, it animates to the new state internally (using [implicit animations](https://flutter.dev/docs/development/ui/animations/implicit-animations)). You can control the animation [duration](https://api.flutter.dev/flutter/dart-core/Duration-class.html) and [curve](https://api.flutter.dev/flutter/animation/Curves-class.html) using optional `swapAnimationDuration` and `swapAnimationCurve` properties, respectively.
### RadarChartData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|dataSets| list of [RadarDataSet ](#RadarDataSet) that is shown on the radar chart|[]|
|radarBackgroundColor| This property fills the background of the radar with the specified color.| Colors.transparent|
|radarShape| the shape of the border and background |RadarShape.circle|
|radarBorderData| shows a border for radar chart|BorderSide(color: Colors.black, width: 2)|
|getTitle| This function helps the radar chart to draw titles outside the chart. The default angle provided when called is making the title tangent to the radar chart. |null|
|titleTextStyle|TextStyle of the titles|TextStyle(color: Colors.black, fontSize: 12)|
|titlePositionPercentageOffset|this field is the place of showing title on the RadarChart. The higher the value of this field, the more titles move away from the chart. this field should be between 0 and 1.|0.2|
|tickCount|Defines the number of ticks that should be paint in RadarChart|1|
|ticksTextStyle|TextStyle of the tick titles|TextStyle(fontSize: 10, color: Colors.black)|
|tickBorderData|Style of the tick borders|BorderSide(color: Colors.black, width: 2)|
|gridBorderData|Style of the grid borders|BorderSide(color: Colors.black, width: 2)|
|radarTouchData|[RadarTouchData](#radartouchdata-read-about-touch-handling) handles the touch behaviors and responses.|RadarTouchData()|
|isMinValueAtCenter|If true, the minimum value of the [RadarChart] will be at the center of the chart.|false|
### RadarDataSet
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|dataEntries|Each RadarDataSet contains list of [RadarEntries ](#RadarEntry) that is shown in RadarChart.|[]|
|fillColor|fills the DataSet with the specified color.|Colors.black12|
|fillGradient|fills the DataSet with the specified gradient colors.| null |
|borderColor|Paint the DataSet border with the specified color.|Colors.blueAccent|
|borderWidth|defines the width of [RadarDataSet](#RadarDataSet) border.|2.0|
|entryRadius|defines the radius of each [RadarEntries ](#RadarEntry).|5.0|
### RadarEntry
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|value| RadarChart uses this field to render every point in chart.| null |
### RadarTouchData ([read about touch handling](handle_touches.md))
|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](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [RadarTouchResponse](#RadarTouchResponse)|MouseCursor.defer|
|touchCallback| listen to this callback to retrieve touch/pointer events and responses, it gives you a [FlTouchEvent](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [RadarTouchResponse](#RadarTouchResponse)| null|
|longPressDuration| allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is [kLongPressTimeout](https://api.flutter.dev/flutter/gestures/kLongPressTimeout-constant.html)| null|
|touchSpotThreshold|the threshold of the touch accuracy. we find the nearest spots on touched position based on this field.|10|
### RadarTouchResponse
|PropName|Description|default value|
|:-------|:----------|:------------|
|touchLocation|the location of the touch event in the device pixels coordinates|required|
|touchedSpot|the [RadarTouchedSpot](#RadarTouchedSpot) that user touched| null |
### RadarTouchedSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|touchedDataSet|the [RadarDataSet](#RadarDataSet) that user touched| null |
|touchedDataSetIndex| index of the [RadarDataSet](#RadarDataSet) that user touched| null |
|touchedRadarEntry|the [RadarEntry](#RadarEntry) that user touched| null |
|touchedRadarEntryIndex| index of the [RadarEntry](#RadarEntry) that user touched| null |
### RadarChartTitle
|PropName|Description|default value|
|:-------|:----------|:------------|
|text|the text of the title|required|
|children| A list of [InlineSpan](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) that you can provide to have different texts with different styels. Just like how [TextSpan](https://api.flutter.dev/flutter/painting/TextSpan-class.html) works|null|
|angle|the angle used to rotate the title (in degree)|0|
|positionPercentageOffset|this field is the place of showing title. The higher the value of this field, the more titles move away from the chart. this field should be between 0 and 1|null|
### some samples
----
##### Sample 1 ([Source Code](/example/lib/presentation/samples/radar/radar_chart_sample1.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/radar_chart/radar_chart_sample_1.jpg" width="300" >

105
repo_files/documentations/scatter_chart.md Normal file
View File

@@ -0,0 +1,105 @@
# ScatterChart
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/scatter_chart/scatter_chart.png" width="300" >
### How to use
```dart
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](https://flutter.dev/docs/development/ui/animations/implicit-animations)). You can control the animation [duration](https://api.flutter.dev/flutter/dart-core/Duration-class.html) and [curve](https://api.flutter.dev/flutter/animation/Curves-class.html) using optional `duration` and `curve` properties, respectively.
### ScatterChartData
|PropName |Description |default value|
|:---------------|:---------------|:-------|
|scatterSpots| list of [ScatterSpot ](#ScatterSpot ) to show the scatter spots on the chart|[]|
|titlesData| check the [FlTitlesData](base_chart.md#FlTitlesData)| FlTitlesData()|
|axisTitleData| check the [FlAxisTitleData](base_chart.md#FlAxisTitleData)| FlAxisTitleData()|
|scatterTouchData| [ScatterTouchData](#scattertouchdata-read-about-touch-handling) 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](https://api.flutter.dev/flutter/widgets/RotatedBox-class.html) 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](#ScatterSpot))|[ErrorIndicatorData()](base_chart.md#FlErrorIndicatorData)|
### ScatterSpot
|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|
### ScatterTouchData ([read about touch handling](handle_touches.md))
|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](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [ScatterTouchResponse](#ScatterTouchResponse)|MouseCursor.defer|
|touchTooltipData|a [ScatterTouchTooltipData](#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](https://github.com/imaNNeo/fl_chart/blob/main/repo_files/documentations/base_chart.md#fltouchevent) and [ScatterTouchResponse](#ScatterTouchResponse)| null|
|longPressDuration| allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is [kLongPressTimeout](https://api.flutter.dev/flutter/gestures/kLongPressTimeout-constant.html)| null|
### ScatterTouchTooltipData
|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](#ScatterTooltipItem) by the given [ScatterSpot](#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](#ScatterSpot) to set the background color of the tooltip bubble|Colors.blueGrey.darken(15)|
### ScatterTooltipItem
|PropName|Description|default value|
|:-------|:----------|:------------|
|text|text string of each row in the tooltip bubble|null|
|textStyle|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) of the showing text row|null|
|textDirection|[TextDirection](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html) of the showing text row|TextDirection.ltr|
|bottomMargin| bottom margin of the tooltip (to the top of most top spot) | 0|
|children|[List<TextSpan>](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) pass additional InlineSpan children for a more advance tooltip|null|
### ScatterTouchResponse
###### you can listen to touch behaviors callback and retrieve this object when any touch action happened.
|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](#ScatterTouchedSpot) which holds data about the touched section|null|
### ScatterTouchedSpot
|PropName|Description|default value|
|:-------|:----------|:------------|
|spot|touched [ScatterSpot](#ScatterSpot)|null|
|spotIndex|index of touched [ScatterSpot](#ScatterSpot)|null|
### ScatterLabelSettings
|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|
### some samples
----
##### Sample 1 ([Source Code](/example/lib/presentation/samples/scatter/scatter_chart_sample1.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/scatter_chart/scatter_chart_sample_1.gif" width="300" >
##### Sample 2 ([Source Code](/example/lib/presentation/samples/scatter/scatter_chart_sample2.dart))
<img src="https://github.com/imaNNeo/fl_chart/raw/main/repo_files/images/scatter_chart/scatter_chart_sample_2.gif" width="300" >

1
repo_files/drawio/flchart.drawio Normal file
View File

@@ -0,0 +1 @@
<mxfile host="www.draw.io" modified="2019-10-17T19:57:42.242Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36" etag="cCK4AWpLe8AgR1xwgUHL" version="12.1.3" type="device" pages="1"><diagram name="Page-1" id="a7904f86-f2b4-8e86-fa97-74104820619b">7V1Jk+I2FP41XZUc6PKCF44N3WRSNanqyhySzk3YAjxjLMaIBvLrI9mSV9lsNjZEfZixnp5kLU/f+7SZJ32y2v8WgvXyD+RC/0lT3P2T/vqkaZqhauQ/KjnEkpGixIJF6LmxSE0F37x/IRNyta3nwk1OESPkY2+dFzooCKCDczIQhmiXV5sjP//WNVjAkuCbA/yy9C/PxUsmVXk1aMQX6C2W7NW2wSJmwPmxCNE2YO970vR59BdHrwDPi+lvlsBFu4xIf3vSJyFCOH5a7SfQp23Lmy1ON62ITcodwgCfksD5oU787+//fHzR0O7ny3SxU/UB770NPvAGgS5pHxZEIV6iBQqA/5ZKx1GlIc1WIaFU5ytCayJUifA7xPjAOhtsMSKiJV75LBbuPfx35vmDZvVssNDrnuUcBQ4ssMEh+gEnyEdhVE5dUdTX8YSqBe4LNQQidnyw2XhOLJx6Pn/hnDzmkhoKnCeZ8n4nXTKOm4O2QWUzM9EGbUOHaWlDazSc2aYCZo7uaO6AWzIIFxBX6ViJFZDRBdEK4vBAEoXQB9j7zBcAMDNfJHppV5MH1tvinq8q3Sfwt5Abr+mTco7XOVswf26pdY5XpBpe8KS/kFhlvSf/Ri2lxPIBpt1O44aZOAz3eAB8b8HSOaT9YJiPdqGDQlJXxHSoWYW+F8D01eRpwf6PCjjjgqk/WYIQczlpg1lRl8jWRdkyLEouqrIP5ziOtGlksbRjsIGseIqTLeas9Pp8IQtj8ROG2CNY9RK342vU0mPWqq9xIcaIaM39yP7nkcmP5yjAbPCpGgtPwcrz6WD6Av1PSHPNj8n8oE7AigYctKJjKnr2wQz64wT6+KAKUADFg5T+lUaaYEwy7OSNIBhwtDHgPiMqDx0WOxgxzGU+SdU0gi6RZJfB+CHTWmbg3TCuH29CpO0UaJVni6PrRxZchUhL2j08xKk0g4c/eI40kKaLQjxhoUddW1EsXWQV06mi2GWraBJ/zX4DsPkACPyy9zY9xmAJubeEXFXLQ67Ow8cAV1daAlz+sisQ9/t2teb6rLkbY7vaMbpLBhantUlXExljtcppxLeaNZehl5qsCKSbguRr0ZYlfUdegFPDswuGpyoFDx67AJaqYFNJMa4ws+sde5tmVm9lqavP+nmWqsbTP6p15gmDuL8rcPAGpMF6ANIAZqRrgUMHcGaS1Ef+kBTvHXisDdbx0y+/Hilgq8V5BRjQdTMYPdWURRKbJoiNZuT9iyngNSMBr1HttoiN0e1MUrvBTPKcGaMLNsuoZmqD3sA+Zfpo3sgTiP2Q3jPeoWTNIl1vkMTjfFMTL9XfarVCbG7DXpubtLamre1acIuSkpYBh4zCms7CNtWTuYGVd7aGbmQt96i+qRgFS49LcOmMr7L97pqDfyVqPSbePO/NGgRcljJvmhd9FVhR+soSKEmV3lPFpB7ZjE5dFWyveilxP1IVSe9vsVU0LCCOIuD3toDfW23Re/se6X2f2b2wlU/aH+qW4F8/z5ME//aU61RrE28Sd2txZq8t7jKD06TF1Vqc0QXPTzzqiTy/pD+yG+X5dU1411R/DMIHY/q8RvdP9HlNJM8/jeeXSL0AGauX8dW+8Xz1LtfxzyL6l7jNxBkKqMTtpgfq8JT5Qbcrslav2ZqcH1xpbmK6NurU5Ea9NjlpcW1YnN3FBGGonzdBKOo3vRFQ24Z3PUN49x5tL4DX6P5nCLwmcoZwgxnC0OzbDIGfPOqNu73saOnZZ3/a8bc1mwxV/ra12cWpq3P6tXTvstU5s9aZHtW3VKVW3zbtOv2WnPUjLOcVt7n77bTlzZtb+K0Bo8bp2rjAb6kCv9XazRujb2fFzrp5k3Fcpm7lPNezouv3472igr3D0CO9CkP27tZc2s3uT1zk0qz8GLGseg9l6Wqdfkse6hHud+ROL0n3JN1T0T2Zw67dk3r9Kub/85snjd/dHKiF03daoc9jt1O6u1nOyKjPp+U7oPx1AuSmw53CbNIRKRrp9I9+LigVCbCOZjDYRFZFEU01RZD2J5xD0lkOzCBZ/OYKMKM4n7fPvK0xDMnaEBNxwGOOQx8XcXHluW40ZHZLD8NvaxDxhl0I1qVh1AS8DPPwopbRRbRmUzSQ5rivWmrrPnHfRi+dM40UdoSY1aN1l2YOO5U3HxTx+sfN4Md4AOJYONcjqaOkjqUzO92vbPTtTLZE9wYPT4vRXS9wS6u439M2uj/CwjVB9zpETwRy6UDifyX+d790YGgS//uL/42cVCrhvznqmN0/wpXjwpkcie4S3Uvnbbpn9327/ybRvcGTzxXornbM7kcPhO6SuEtoF0F798Rdv35Z/hIcb/3+06kA2/7WHb8bcu3WnXEa/p79ZaGRUSju85FPCx1J0M4ZEF2rdAdsJ/HCHcLfgyUMPQzubo+w/i7MdXuHBdMToJToy46t7R3qj8AFRB94lbM+SQ0qPtc9Ev4yh2jYtfeh+Ef4ORzRsJN0XI450RxX1dsbciSY/qRZzIrS343T3/4D</diagram></mxfile>

BIN
repo_files/images/announcements/1.0.0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 818 KiB

BIN
repo_files/images/architecture/fl_chart_architecture.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

1
repo_files/images/architecture/fl_chart_architecture.txt Normal file
View File

@@ -0,0 +1 @@
https://drive.google.com/file/d/1bj-2TqTRUh80dRKJk10drPNeA3fp3EA8/view

BIN
repo_files/images/bar_chart/bar_chart.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
repo_files/images/bar_chart/bar_chart_sample_1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 KiB

BIN
repo_files/images/bar_chart/bar_chart_sample_1_anim.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
repo_files/images/bar_chart/bar_chart_sample_2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 931 KiB

BIN
repo_files/images/bar_chart/bar_chart_sample_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
repo_files/images/bar_chart/bar_chart_sample_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
repo_files/images/bar_chart/bar_chart_sample_5.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
repo_files/images/bar_chart/bar_chart_sample_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
repo_files/images/bar_chart/bar_chart_sample_7.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 KiB

BIN
repo_files/images/bar_chart/bar_chart_video_thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 609 KiB

BIN
repo_files/images/bitcoin_public_key.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
repo_files/images/blank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
repo_files/images/buy_me_a_coffee.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
repo_files/images/candlestick_chart/candlestick_chart_sample_1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 870 KiB

BIN
repo_files/images/landing_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 619 KiB

BIN
repo_files/images/line_chart/line_chart_sample_1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 683 KiB

BIN
repo_files/images/line_chart/line_chart_sample_10.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
repo_files/images/line_chart/line_chart_sample_1_anim.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 708 KiB

BIN
repo_files/images/line_chart/line_chart_sample_2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 439 KiB

BIN
repo_files/images/line_chart/line_chart_sample_2_anim.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

BIN
repo_files/images/line_chart/line_chart_sample_3.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 KiB

BIN
repo_files/images/line_chart/line_chart_sample_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
repo_files/images/line_chart/line_chart_sample_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
repo_files/images/line_chart/line_chart_sample_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
repo_files/images/line_chart/line_chart_sample_7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
repo_files/images/line_chart/line_chart_sample_8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
repo_files/images/line_chart/line_chart_sample_9.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 542 KiB

BIN
repo_files/images/line_chart/line_chart_video_thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 639 KiB

BIN
repo_files/images/overview_thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 KiB

BIN
repo_files/images/pie_chart/pie_chart.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
repo_files/images/pie_chart/pie_chart_sample_1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 KiB

BIN
repo_files/images/pie_chart/pie_chart_sample_2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 976 KiB

BIN
repo_files/images/pie_chart/pie_chart_sample_3.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 838 KiB

BIN
repo_files/images/pie_chart/pie_chart_video_thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 612 KiB

BIN
repo_files/images/radar_chart/radar_chart_sample_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
repo_files/images/scatter_chart/scatter_chart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
repo_files/images/scatter_chart/scatter_chart_sample_1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
repo_files/images/scatter_chart/scatter_chart_sample_2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 KiB

BIN
repo_files/sponsors/become_a_hero_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
repo_files/sponsors/become_a_hero_empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 575 B

BIN
repo_files/sponsors/become_a_hero_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
repo_files/sponsors/become_a_sponsor_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
repo_files/sponsors/become_a_sponsor_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB