Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Flutter/cartesian-charts/chart-types/range-area-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ To create a Flutter range area chart quickly, you can check this video.
<style>#flutterRangeareaChartTutorial{width : 90% !important; height: 300px !important }</style>
<iframe id='flutterRangeareaChartTutorial' src='https://www.youtube.com/embed/uSsKhlRzC2Q'></iframe>

To render a range area chart, create an instance of `RangeAreaSeries` and add to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html).
To render a range area chart, create an instance of [`RangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeAreaSeries-class.html) and add to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html).

Since the [`RangeAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RangeAreaSeries-class.html) requires two Y values for a point, your data should contain high and low values. High and low value specifies the maximum and minimum range of the point.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ To create a Flutter 100% stacked area chart quickly, you can check this video.
<style>#flutter100stackedareaChartTutorial{width : 90% !important; height: 300px !important }</style>
<iframe id='flutter100stackedareaChartTutorial' src='https://www.youtube.com/embed/NCUDBD_ClHo'></iframe>

To render a 100% stacked area chart, create an instance of `StackedArea100Series` and add to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). You can use the following properties to customize the 100% stacked area appearance.
To render a 100% stacked area chart, create an instance of [`StackedArea100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedArea100Series-class.html) and add to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). You can use the following properties to customize the 100% stacked area appearance.

* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series.
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ To create a Flutter 100% stacked column chart quickly, you can check this video.
<style>#flutter100stackedcolumnChartTutorial{width : 90% !important; height: 300px !important }</style>
<iframe id='flutter100stackedcolumnChartTutorial' src='https://www.youtube.com/embed/NCUDBD_ClHo'></iframe>

To render a 100% stacked column chart, create an instance of [`StackedColumn100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumn100Series-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/XyDataSeries-class.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance:
To render a 100% stacked column chart, create an instance of [`StackedColumn100Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StackedColumn100Series-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance:

* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series.
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series.
Expand Down
2 changes: 1 addition & 1 deletion Flutter/cartesian-charts/chart-types/step-area-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Step area Chart in Flutter Cartesian Charts (SfCartesianChart)

To render a step area chart, create an instance of `StepAreaSeries`, and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the step area chart.
To render a step area chart, create an instance of [`StepAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepAreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the step area chart.

* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series.
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series.
Expand Down
2 changes: 1 addition & 1 deletion Flutter/cartesian-charts/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ The legend provides information about the series rendered in the chart.

You can use legend in chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html).

Additionally, the [`series.name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property can be used to set the label for each series. The labels will be displayed in corresponding legends.
Additionally, the series [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property can be used to set the label for each series. The labels will be displayed in corresponding legends.

{% tabs %}
{% highlight dart %}
Expand Down
2 changes: 1 addition & 1 deletion Flutter/cartesian-charts/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ To get started quickly with our Flutter chart widget, you can check out this vid

## Key Features

* **Chart types** - Supports more than 30+ different chart types such as [`line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/line-chart), [`spline`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-chart), [`column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart), [`bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bar-chart), [`area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/area-chart), [`bubble`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bubble-chart), [`box and whisker`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/box-and-whisker-chart), [`scatter`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/scatter-chart), [`step line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/step-line-chart), [`fast line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/line-chart), [`range column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/range-column-chart), [`range area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/range-area-chart), [`candle`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/candle-chart), [`hilo`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/hilo-chart), [`OHLC`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/ohlc-chart), [`histogram`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/histogram-chart), [`step area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/step-area-chart), [`spline area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-area-chart), [`spline range area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-range-area-chart), [`stacked area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-chart), [`stacked bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-bar-chart), [`stacked column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-column-chart), [`stacked line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-line-chart), [`100% stacked area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-100-chart), [`100% stacked bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-bar-100-chart), [`100% stacked column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-column-100-chart), [`100% stacked line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-line-100-chart), [`waterfall`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/waterfall-chart),
* **Chart types** - Supports more than 30+ different chart types such as [`line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/line-chart), [`spline`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-chart), [`column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart), [`bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bar-chart), [`area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/area-chart), [`bubble`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bubble-chart), [`box and whisker`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/box-and-whisker-chart), [`scatter`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/scatter-chart), [`step line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/step-line-chart), [`fast line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/line-chart), [`range column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/range-column-chart), [`range area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/range-area-chart), [`candle`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/candle-chart), [`hilo`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/hilo-chart), [`OHLC`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/ohlc-chart), [`histogram`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/histogram-chart), [`step area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/step-area-chart), [`spline area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-area-chart), [`spline range area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-range-area-chart), [`stacked area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-chart), [`stacked bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-bar-chart), [`stacked column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-column-chart), [`stacked line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-line-chart), [`100% stacked area`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-100-chart), [`100% stacked bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-bar-100-chart), [`100% stacked column`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-column-100-chart), [`100% stacked line`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-line-100-chart), [`waterfall`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/waterfall-chart),
[`error bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/error-bar-chart), [`pie`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pie-chart), [`doughnut`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/doughnut-chart), [`radial bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/radial-bar-chart), [`pyramid`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pyramid-chart), [`funnel`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/funnel-chart). Each type represents data in a unique style. It is more user friendly and has greater UI visualization.

![Chart Types](images/overview/chart_types_cartesian.png)
Expand Down
2 changes: 1 addition & 1 deletion Flutter/circular-charts/callbacks.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ Triggers when data label is rendering. Text and text styles such as color, font

## onPointTap

Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/onPointTap.html) callback contains the following arguments.
Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointTap.html) callback contains the following arguments.

* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
Expand Down
6 changes: 2 additions & 4 deletions Flutter/sparkcharts/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,8 @@ The `data` property is used for binding data to the spark charts. This property
## Spark charts types

You can initialize the required spark charts type by specifying the widget name to
[`SfSparkLineChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html)
, [`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html)
, [`SfSparkBarChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart-class.html)
, [`SfSparkLWinLossChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart-class.html).
[`SfSparkLineChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html), [`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html), [`SfSparkBarChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart-class.html), [`SfSparkLWinLossChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart-class.html).

Here, the spark chart type has been set to
[`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html).

Expand Down