Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
aeee3c2711
Коммит
f2dcbc5625
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Annotation in Syncfusion Flutter Charts
|
||||
description: Learn how to add and customize the Cartesian, and Circular annotations available in the Syncfusion Flutter Chart widget.
|
||||
title: Annotation in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Annotation feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Annotation in Cartesian charts
|
||||
# Annotation in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
Chart supports annotations which allows you to mark the specific area of interest in the chart area. You can add the custom widgets using this annotations feature as depicted below.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Axis customization in Syncfusion Flutter Charts
|
||||
description: Learn how to customize the visibility, title, labels, grid lines and tick lines of the SFcartesian chart axis.
|
||||
title: Axis customization in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Axis customization feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Axis customization in Cartesian charts
|
||||
# Axis customization in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Common axis features
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Axis types.
|
||||
description: Learn how to customize the grid lines, tick lines, labels and title of a chart axis in Syncfusion Flutter charts.
|
||||
title: Axis types in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about available Axis types of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Axis types in Cartesian charts
|
||||
# Axis types in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a horizontal (X) axis.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Callbacks
|
||||
description: Learn what are all the Callbacks available in Flutter Charts. Callbacks will be triggered on some specific actions in chart.
|
||||
title: Callbacks in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about available Callbacks feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Callbacks in Cartesian charts
|
||||
# Callbacks in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
The below Callbacks are for Cartesian chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customizing the appearance of Syncfusion Flutter Charts
|
||||
description: Learn how to customize the appearance of SfCartesian Charts and the customizing properties available in SfCartesian charts.
|
||||
title: Customization in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Customization feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Appearance Of Cartesian charts
|
||||
# Customization in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Chart sizing
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Title
|
||||
description: Learn how to add chart title and customize its appearance such as text alignment in the Flutter Charts.
|
||||
title: Chart title in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Chart title feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Chart title in Cartesian charts
|
||||
# Chart title in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
You can define and customize the Chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Cartesian Chart types
|
||||
description: Learn what are the different types of Cartesian Charts available in the Syncfusion Flutter Chart widget.
|
||||
title: Chart types in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about available Chart types of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Chart types in Cartesian charts
|
||||
# Chart types in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Line chart
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
layout: post
|
||||
title: Exporting in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Exporting feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Exporting in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to export the Cartesian chart as a PNG image or as PDF document.
|
||||
|
||||
## Export image
|
||||
|
||||
To export the Cartesian chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderCartesianImage() async {
|
||||
dart_ui.Image data = await _cartesianKey.currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
if (data != null) {
|
||||
await Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(),
|
||||
body: Center(
|
||||
child: Container(
|
||||
color: Colors.white,
|
||||
child: Image.memory(bytes!.buffer.asUint8List()),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Export PDF
|
||||
|
||||
Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderCartesianPDF() async {
|
||||
var document = PdfDocument();
|
||||
PdfPage page = document.pages.add();
|
||||
dart_ui.Image data = await _cartesianKey. currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
final Uint8List imageBytes =
|
||||
bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
|
||||
page.graphics
|
||||
.drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300));
|
||||
var byteData = document.save();
|
||||
document.dispose();
|
||||
Directory directory = await getExternalStorageDirectory();
|
||||
String path = directory.path;
|
||||
File file = File('$path/Output.pdf');
|
||||
await file.writeAsBytes(byteData, flush: true);
|
||||
OpenFile.open('$path/Output.pdf');
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started for Syncfusion Cartesian Charts (SfCartesianChart)
|
||||
description: Learn how to create the syncfusion Flutter charts, add series, legend ,markers and other features in Chart.
|
||||
title: Getting started with Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget, its elements, and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with Flutter Cartesian Charts (SfCartesianChart)
|
||||
# Getting started with Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart legend
|
||||
description: Learn how to configure the legend and customize the appearance of its element in SfCartesian charts.
|
||||
title: Legend in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Legend feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Legend in Cartesian charts
|
||||
# Legend in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html) contains list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Markers and data labels in Syncfusion Flutter Charts
|
||||
description: Learn how to add the markers and data point labels to the series available in the Syncfusion Flutter Chart widget.
|
||||
title: Marker and data label in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Marker and data label feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Marker and data label
|
||||
# Marker and data label in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Marker
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Public Methods
|
||||
description: Learn what are all the public methods available in Syncfusion Flutter Charts along with their properties.
|
||||
title: Methods in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about available Methods of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Methods in Cartesian charts
|
||||
# Methods in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Methods in tooltipBehavior
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Multiple and Combinational Syncfusion Flutter charts
|
||||
description: Learn how to render a multiple series, combination series and limitations of combinations in SfCartesianChart.
|
||||
title: Combinational Charts in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Combinational Charts of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Multiple and Combinational Charts
|
||||
# Combinational Charts in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
|
||||
## Multiple series
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: On demand loading feature in Syncfusion Flutter charts
|
||||
description: Learn how to achieve infinite scrolling functionality in Syncfusion Flutter Cartesian charts using the on demand loading feature.
|
||||
title: On-demand loading in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about On-demand loading feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# On-demand loading in Cartesian chart
|
||||
# On-demand loading in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to return a widget which can be used to load more data to the chart when the visible range reaches the end on dragging in the chart with the help of the [`loadMoreIndicatorBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/loadMoreIndicatorBuilder.html) builder.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Charts
|
||||
description: Learn the key features available in Syncfusion Flutter Charts and overview about SYncfusion Flutter Charts.
|
||||
title: About Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget, its features, and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview Of Syncfusion Flutter Charts
|
||||
# Flutter Cartesian Charts (SfCartesianChart) Overview
|
||||
|
||||
Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Charts Data Point Selection
|
||||
description: Learn how to select the data point in SfCartesian Charts and the selection modes available for SfCartesian Charts.
|
||||
title: Selection in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Selection feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Selection in Cartesian charts
|
||||
# Selection in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Cartesian series customization in Syncfusion Flutter charts
|
||||
description: Learn how to customize the series features like animation, transpose, color palette, gradient, etc., in cartesian chart
|
||||
title: Series customization in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Series customization of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Series customization in Cartesian charts
|
||||
# Series customization in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Animation
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: TechnicalIndicators in Syncfusion Flutter Charts
|
||||
description: Learn how to add and customize the TechnicalIndicators available in the Syncfusion Flutter Chart widget.
|
||||
title: Technical indicators in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Technical indicators feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Technical indicators in Cartesian charts
|
||||
# Technical indicators in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
|
||||
The different types of technical indicators available in chart are follows:
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Charts Tooltip
|
||||
description: Learn how to enable and customize the tooltip options available in the Syncfusion Flutter Chart widget.
|
||||
title: Tooltip in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Tooltip feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip in Cartesian charts
|
||||
# Tooltip in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
Chart provides tooltip support for all the series. It is used to show information about the segment, when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/enableTooltip.html) property as *true*.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Charts Trackball and Crosshair
|
||||
description: Learn how to enable and customize the trackball and crosshair available in the Syncfusion Flutter Chart widget.
|
||||
title: Trackball and Crosshair in Flutter Cartesian Charts | Syncfusion
|
||||
description: Learn here all about Trackball and Crosshair feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Trackball and Crosshair
|
||||
# Trackball and Crosshair in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Trackball
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Charts Trendlines
|
||||
description: Learn how to enable and customize the trendlines and its features available in the Syncfusion Flutter Charts widget.
|
||||
title: Trendlines in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Trendlines feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Trendlines in Cartesian charts
|
||||
# Trendlines in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
Trendlines are used to show the direction and speed of price.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Zooming and Panning in Syncfusion Flutter Charts
|
||||
description: Learn how to enable zooming and panning and its features available in the Syncfusion Flutter Charts widget.
|
||||
title: Zooming and Panning in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Zooming and Panning feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Zooming and Panning in Cartesian charts
|
||||
# Zooming and Panning in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
|
||||
## Pinch zooming
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Annotation in Syncfusion Circular Charts
|
||||
description: Learn how to add and customize the Circular annotations available in the Syncfusion Circular Chart widget.
|
||||
title: Annotation in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Annotation feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Annotation in Circular charts
|
||||
# Annotation in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
Chart supports annotations which allows you to mark the specific area of interest in the chart area. You can add the custom widgets using this annotations feature as depicted below.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Callbacks
|
||||
description: Learn what are all the Callbacks available in Flutter Charts. Callbacks will be triggered on some specific actions in SfCircular chart.
|
||||
title: Callbacks in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about available Callbacks feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Callbacks in Circular charts
|
||||
# Callbacks in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
Circular chart contains the below listed callbacks
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customizing the appearance of Syncfusion Circular Charts
|
||||
description: Learn how to customize the appearance of SfCircular Charts and the customizing properties available in SfCircular charts.
|
||||
title: Customization in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Customization of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Appearance of Circular charts
|
||||
# Customization in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
## Chart sizing
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Title
|
||||
description: Learn how to add chart title and customize its appearance such as text alignment in the SfCircular Charts.
|
||||
title: Chart title in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Chart title feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Chart title in Circular charts
|
||||
# Chart title in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
You can define and customize the chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html) property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Chart types | Circular Charts | Flutter | Syncfusion
|
||||
description: You can learn here about chart types support in Syncfusion Flutter Circular Charts control and more details.
|
||||
title: Chart types in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about available Chart types of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Chart types in Circular charts
|
||||
# Chart types in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
## Pie chart
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Circular series customization in Syncfusion Flutter charts
|
||||
description: Learn how to customize the series features like animation, color palette, gradient, etc., in SfCircular chart
|
||||
title: Series customization in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Series customization of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Series customization in Circular charts
|
||||
# Series customization in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
## Animation
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Data labels in Syncfusion Circular Charts
|
||||
description: Learn how to add the Data point labels to the series available in the Syncfusion Flutter Circular Chart widget.
|
||||
title: Data label in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Data label feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Data label in Circular charts
|
||||
# Data label in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/dataLabelSettings.html). You can use the following properties to customize the appearance.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
layout: post
|
||||
title: Exporting in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Exporting feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Exporting in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides support to export the circular chart as a PNG image or as PDF document.
|
||||
|
||||
## Export image
|
||||
|
||||
To export the circular chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderCircularImage() async {
|
||||
dart_ui.Image data =
|
||||
await _circularChartKey.currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
if (data != null) {
|
||||
await Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(),
|
||||
body: Center(
|
||||
child: Container(
|
||||
color: Colors.white,
|
||||
child: Image.memory(bytes!.buffer.asUint8List()),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Export PDF
|
||||
|
||||
Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderCircularPDF() async {
|
||||
var document = PdfDocument();
|
||||
PdfPage page = document.pages.add();
|
||||
dart_ui.Image data =
|
||||
await _circularChartKey.currentState.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
final Uint8List imageBytes =
|
||||
bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
|
||||
page.graphics
|
||||
.drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300));
|
||||
var byteData = document.save();
|
||||
document.dispose();
|
||||
Directory directory = await getExternalStorageDirectory();
|
||||
String path = directory.path;
|
||||
File file = File('$path/Output.pdf');
|
||||
await file.writeAsBytes(byteData, flush: true);
|
||||
OpenFile.open('$path/Output.pdf');
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started for Syncfusion Circular Charts (SfCircularChart)
|
||||
description: Learn how to create the Syncfusion Flutter Circular charts, add series, legend ,markers and other features in Chart.
|
||||
title: Getting started with Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Circular Charts (SfCircularChart) widget, its elements, and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with Flutter Circular Charts (SfCircularChart)
|
||||
# Getting started with Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Circular Chart legend
|
||||
description: Learn how to configure the legend and customize the appearance of its element in Syncfusion Circular Charts.
|
||||
title: Legend in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Legend feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Legend in Circular charts
|
||||
# Legend in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) contains list of data points in chart. The information provided in each legend item helps to identify the corresponding data points in chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,302 @@
|
|||
---
|
||||
layout: post
|
||||
title: Methods in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about available Methods of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Methods in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
## Methods in tooltipBehavior
|
||||
|
||||
### Show method in tooltipBehavior
|
||||
|
||||
The [`show`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/show.html) method is used to activate the tooltip at the specified x and y point values.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SfCircularChart chart;
|
||||
late TooltipBehavior _tooltipBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_tooltipBehavior = TooltipBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(10, 17),
|
||||
ChartData(20, 34),
|
||||
// Add the required data
|
||||
];
|
||||
|
||||
chart = SfCircularChart(
|
||||
tooltipBehavior: _tooltipBehavior,
|
||||
series: <CircularSeries>[
|
||||
ColumnSeries<ChartData, double>(
|
||||
enableTooltip: true,
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y)
|
||||
]
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
TextButton(
|
||||
child: Text('Show'),
|
||||
onPressed: show
|
||||
),
|
||||
Container(child: chart)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
void show() {
|
||||
_tooltipBehavior.show(10, 17);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### showByIndex method in tooltipBehavior
|
||||
|
||||
The [`showByIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/showByIndex.html) method is used to display the tooltip at the specified series and point index.
|
||||
|
||||
The below mentioned arguments are given to the [`showByIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/showByIndex.html) method:
|
||||
|
||||
[`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/seriesIndex.html) - index of the series for which the pointIndex is specified.
|
||||
|
||||
[`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/pointIndex.html) - index of the point for which the tooltip should be shown.
|
||||
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SfCircularChart chart;
|
||||
late TooltipBehavior _tooltipBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_tooltipBehavior = TooltipBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(10, 17),
|
||||
ChartData(20, 34),
|
||||
// Add the required data
|
||||
];
|
||||
|
||||
chart = SfCircularChart(
|
||||
tooltipBehavior: _tooltipBehavior,
|
||||
series: <CircularSeries>[
|
||||
ColumnSeries<ChartData, double>(
|
||||
enableTooltip: true,
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y)
|
||||
]
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
TextButton(
|
||||
child: Text('Show'),
|
||||
onPressed:(){
|
||||
_tooltipBehavior.showByIndex(0,1);
|
||||
}
|
||||
),
|
||||
Container(child: chart)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### showByPixel method in tooltipBehavior
|
||||
|
||||
The [`showByPixel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/showByPixel.html) method is used to display the tooltip at the specified x and y-positions.
|
||||
|
||||
x & y - logical pixel values to position the tooltip.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SfCircularChart chart;
|
||||
late TooltipBehavior _tooltipBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_tooltipBehavior = TooltipBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(10, 17),
|
||||
ChartData(20, 34),
|
||||
// Add the required data
|
||||
];
|
||||
|
||||
chart = SfCircularChart(
|
||||
tooltipBehavior: _tooltipBehavior,
|
||||
series: <CircularSeries>[
|
||||
ColumnSeries<ChartData, double>(
|
||||
enableTooltip: true,
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y)
|
||||
]
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
TextButton(
|
||||
child: Text('Show'),
|
||||
onPressed:(){
|
||||
_tooltipBehavior.showByPixel(230.0,470.0);
|
||||
}
|
||||
),
|
||||
Container(child: chart)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### Hide method in tooltipBehavior
|
||||
|
||||
The [`hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/hide.html) method is used to hide the displaying tooltip programmatically.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SfCircularChart chart;
|
||||
late TooltipBehavior _tooltipBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_tooltipBehavior = TooltipBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(10, 17),
|
||||
ChartData(20, 34)
|
||||
// Add the required data
|
||||
];
|
||||
|
||||
chart = SfCircularChart(
|
||||
tooltipBehavior: _tooltipBehavior,
|
||||
series: <CircularSeries>[
|
||||
ColumnSeries<ChartData, double>(
|
||||
enableTooltip: true,
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y)
|
||||
]
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
TextButton(
|
||||
child: Text('Hide'),
|
||||
onPressed: hide
|
||||
),
|
||||
Container(child: chart)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
void hide(){
|
||||
_tooltipBehavior.hide();
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Methods in selectionBehavior
|
||||
|
||||
### SelectDataPoints method in selectionBehavior
|
||||
|
||||
The [`selectDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectDataPoints.html) method is used to select the data point programmatically. The required arguments are listed below.
|
||||
|
||||
* `pointIndex` - index of the point which needs to be selected.
|
||||
* `seriesIndex` - index of the series for which the pointIndex is specified and this is an optional parameter. By default it will be considered as 0.
|
||||
|
||||
N> The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) is also applicable for this but, it is based on the API values specified in the chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SfCircularChart chart;
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(10, 17),
|
||||
ChartData(20, 34)
|
||||
// Add the required data
|
||||
];
|
||||
chart = SfCircularChart(
|
||||
series: <CircularSeries>[
|
||||
PieSeries<ChartData, double>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
TextButton(
|
||||
child: Text('Select'),
|
||||
onPressed: select
|
||||
),
|
||||
Container(child: chart)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
void select() {
|
||||
_selectionBehavior.selectDataPoints(1, 0);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Charts
|
||||
description: Learn the key features available in Syncfusion Flutter Charts and overview about SYncfusion Flutter Charts.
|
||||
title: About Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Circular Charts (SfCircularChart) widget, its features, and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of Syncfusion Flutter Charts
|
||||
# Syncfusion Flutter Circular Charts (SfCircularChart) Overview
|
||||
|
||||
Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Circular Charts Data Point Selection
|
||||
description: Learn how to select and customize the data point in SfCircular Charts and enable the multi selection in SfCircular Charts.
|
||||
title: Selection in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Selection feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Selection in Circular charts
|
||||
# Selection in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Charts Tooltip
|
||||
description: Learn how to enable and customize the tooltip options available in the Syncfusion Flutter Chart widget.
|
||||
title: Tooltip in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Tooltip feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip in Circular charts
|
||||
# Tooltip in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
Chart provides tooltip support for all the series. It is used to show information about the segment, when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/enableTooltip.html) property as `true`.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,223 @@
|
|||
---
|
||||
layout: post
|
||||
title: Callbacks in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Callbacks feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Callbacks in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
The below Callbacks are for Funnel chart.
|
||||
|
||||
## onLegendItemRender
|
||||
|
||||
Triggers when the legend item is rendering. Here, you can customize the legend’s text, and shape. The [`onLegendItemRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onLegendItemRender.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/text.html) - specifies the content of the legend.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/pointIndex.html) - specifies the current point index that is applicable for Funnel chart type alone.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`legendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/legendIconType.html) - specifies the shape of the legend.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/color.html) - to get and set the color of the legend icon.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
legend: Legend(isVisible: true),
|
||||
onLegendItemRender: (LegendRenderArgs args){
|
||||
args.text = 'Legend Text';
|
||||
args.legendIconType = LegendIconType.diamond;
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onTooltipRender
|
||||
|
||||
Triggers while tooltip is rendering. Here, you can customize the text, header, x and y-positions. The [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onTooltipRender.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/text.html) - specifies the content of the tooltip.
|
||||
* [`header`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/header.html) - specifies the header content of the tooltip.
|
||||
* [`locationX`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/locationX.html) - specifies the x position of tooltip.
|
||||
* [`locationY`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/locationY.html) - specifies the y position of tooltip.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/dataPoints.html) - holds the data point collection.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late TooltipBehavior _tooltipBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_tooltipBehavior = TooltipBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
onTooltipRender: (TooltipArgs args){
|
||||
args.text = 'Custom Text';
|
||||
},
|
||||
tooltipBehavior: _tooltipBehavior,
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onDataLabelRender
|
||||
|
||||
Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be customized. The [`onDataLabelRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onDataLabelRender.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/text.html) - specifies the content of the data label.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/textStyle.html) - used to change the text color, size, font family, font style, and font weight.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/seriesRenderer.html) - specifies current series.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
onDataLabelRender:(DataLabelRenderArgs args){
|
||||
args.text = 'Data label';
|
||||
},
|
||||
series: FunnelSeries<ChartData, String>(
|
||||
dataLabelSettings: DataLabelSettings(
|
||||
isVisible: true
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onLegendTapped
|
||||
|
||||
Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onLegendTapped.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/pointIndex.html) - specifies the current point index that is applicable for Funnel series.
|
||||
* [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/series.html) - specifies the current series.
|
||||
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
onLegendTapped: (LegendTapArgs args) {
|
||||
print(args.seriesIndex);
|
||||
},
|
||||
legend: Legend(isVisible: true)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onSelectionChanged
|
||||
|
||||
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onSelectionChanged.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/series.html) - specifies current series.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedColor.html) - specifies color of the selected data points or series.
|
||||
* [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedColor.html) - specifies color of the unselected data points or series.
|
||||
* [`selectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedBorderColor.html) - specifies border color of the selected data points or series.
|
||||
* [`selectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedBorderWidth.html) - specifies border width of the selected data points or series.
|
||||
* [`unselectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedBorderColor.html) - specifies border color of the unselected data points or series.
|
||||
* [`unselectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedBorderWidth.html) - specifies border width of the unselected data points or series.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/viewportPointIndex.html) - to get the overall point index.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(
|
||||
enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
onSelectionChanged: (SelectionArgs args){
|
||||
args.selectedColor = Colors.red;
|
||||
args.unselectedColor = Colors.lightGreen;
|
||||
},
|
||||
series: FunnelSeries<ChartData, String>(
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onDataLabelTapped
|
||||
|
||||
Triggers when tapping on the data label of the data point in the series. The [`onDataLabelTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onDataLabelTapped.html) Callback contains the following arguments.
|
||||
|
||||
* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/position.html) - specifies the position of the tapped data label in logical pixels.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/seriesIndex.html) - Specifies the series index of the tapped data label
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/pointIndex.html) - Specifies the point index of the tapped data label.
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/text.html) - Specifies the content of the tapped data label.
|
||||
* [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/dataLabelSettings.html) - to get the data label customization options specified in that particular series.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
|
||||
N> This callback will not be called, when the builder is specified for data label (data label template). For this case, custom widget specified in the [`DataLabelSettings.builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property can be wrapped using the [`GestureDetector`](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html) and this functionality can be achieved in the application level.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfFunnelChart(
|
||||
onDatalabelTapped: (DataLabelTapArgs args) {
|
||||
print(args.seriesIndex);
|
||||
},
|
||||
series: FunnelSeries<Sample, DateTime>(
|
||||
dataSource: sample,
|
||||
xValueMapper: (Sample sales, _) => sales.x,
|
||||
yValueMapper: (Sample sales, _) => sales.y,
|
||||
dataLabelSettings: DataLabelSettings(
|
||||
isVisible: true),
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customizing the appearance of Syncfusion Flutter Charts
|
||||
description: Learn how to customize the appearance of SfFunnel Charts and the customizing properties available in SfFunnel charts.
|
||||
title: Appearance customization in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Appearance customization of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Appearance of Funnel chart
|
||||
# Appearance customization in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
## Chart sizing
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Title
|
||||
description: Learn how to add chart title and customize its appearance such as text alignment in the Flutter Charts.
|
||||
title: Chart title in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Chart title feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Chart title in Funnel chart
|
||||
# Chart title in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
You can define and customize the Chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/title.html) property of [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Data labels in Syncfusion Funnel Charts
|
||||
description: Learn how to add the Data point labels to the series available in the Syncfusion Flutter Funnel Chart widget.
|
||||
title: Data label in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Data label feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Data label in Funnel chart
|
||||
# Data label in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/dataLabelSettings.html). You can use the following properties to customize the appearance.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
layout: post
|
||||
title: Exporting in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Exporting feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Exporting in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides support to export the funnel chart as a PNG image or as PDF document.
|
||||
|
||||
## Export image
|
||||
|
||||
To export the funnel chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderFunnelImage() async {
|
||||
dart_ui.Image data = await _funnelChartKey.currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
if (data != null) {
|
||||
await Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(),
|
||||
body: Center(
|
||||
child: Container(
|
||||
color: Colors.white,
|
||||
child: Image.memory(bytes!.buffer.asUint8List()),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Export PDF
|
||||
|
||||
Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderFunnelPDF() async {
|
||||
var document = PdfDocument();
|
||||
PdfPage page = document.pages.add();
|
||||
dart_ui.Image data = await _funnelChartKey. currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
final Uint8List imageBytes =
|
||||
bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
|
||||
page.graphics
|
||||
.drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300));
|
||||
var byteData = document.save();
|
||||
document.dispose();
|
||||
Directory directory = await getExternalStorageDirectory();
|
||||
String path = directory.path;
|
||||
File file = File('$path/Output.pdf');
|
||||
await file.writeAsBytes(byteData, flush: true);
|
||||
OpenFile.open('$path/Output.pdf');
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Funnel Chart Types.
|
||||
description: Learn how to add and customize the funnel type of charts available in the Syncfusion Flutter Chart widget.
|
||||
title: Customization in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Customization of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Features of Funnel chart
|
||||
# Customization in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/series.html) property of [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html). The following properties are used to customize the appearance of a funnel segment:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started for Syncfusion Funnel Charts (SfFunnelChart)
|
||||
description: Learn how to create the Syncfusion Flutter Funnel charts, add series, legend ,markers and other features in Chart.
|
||||
title: Getting started with Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Funnel Chart (SfFunnelChart) widget, its elements, and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with Flutter Funnel Chart(SfFunnelChart)
|
||||
# Getting started with Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart legend
|
||||
description: Learn how to configure the legend and customize the appearance of its element in Syncfusion Funnel Charts.
|
||||
title: Legend in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Legend feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Legend in Funnel chart
|
||||
# Legend in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) contains list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Charts
|
||||
description: Learn the key features available in Syncfusion Flutter Charts and overview about SYncfusion Flutter Charts.
|
||||
title: About Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget, its features, and more
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of Syncfusion Flutter Charts
|
||||
# Flutter Funnel Chart (SfFunnelChart) Overview
|
||||
|
||||
Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,203 @@
|
|||
---
|
||||
layout: post
|
||||
title: Selection in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Selection feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Selection in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavio(
|
||||
// Enables the selection
|
||||
enable: true
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
series: FunnelSeries<SalesData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (SalesData sales, _) => sales.year,
|
||||
yValueMapper: (SalesData sales, _) => sales.sales,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Customizing the segments
|
||||
|
||||
You can customize the segments using the below properties.
|
||||
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedColor.html) - used to change the background color of selected segment.
|
||||
* [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedColor.html) - used to change the background color of unselected segment.
|
||||
* [`selectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedBorderColor.html) - used to change the stroke color of the selected segment.
|
||||
* [`selectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedBorderWidth.html) - used to change the stroke width of the selected segment.
|
||||
* [`unselectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedBorderColor.html) - used to change the stroke color of the unselected segment.
|
||||
* [`unselectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedBorderWidth.html) - used to change the stroke width of the unselected segment.
|
||||
* [`selectedOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedOpacity.html) - used to control the transparency of the selected segment.
|
||||
* [`unselectedOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedOpacity.html) - used to control the transparency of the unselected segment.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(
|
||||
// Enables the selection
|
||||
enable: true,
|
||||
selectedColor: Colors.red,
|
||||
unselectedColor: Colors.grey,
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
series: FunnelSeries<SalesData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (SalesData sales, _) => sales.year,
|
||||
yValueMapper: (SalesData sales, _) => sales.sales,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Multi-selection
|
||||
|
||||
Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/enableMultiSelection.html) property of chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
// Enables multiple selection
|
||||
enableMultiSelection: true
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Selection on initial rendering
|
||||
|
||||
You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/initialSelectedDataIndexes.html) property of chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
initialSelectedDataIndexes: [1, 0]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
Also refer [selection event](./events#onselectionchanged) for customizing the selection further.
|
||||
|
||||
## Methods in SelectionBehavior
|
||||
|
||||
### SelectDataPoints method in SelectionBehavior
|
||||
|
||||
The [`selectDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectDataPoints.html) method is used to select the data point programmatically. The required arguments are listed below.
|
||||
|
||||
* `pointIndex` - index of the point which needs to be selected.
|
||||
* `seriesIndex` - index of the series for which the pointIndex is specified and this is an optional parameter. By default it will be considered as 0.
|
||||
|
||||
N> The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) is also applicable for this but, it is based on the API values specified in the chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SfFunnelChart chart;
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(10, 17),
|
||||
ChartData(20, 34)
|
||||
// Add the required data
|
||||
];
|
||||
chart = SfFunnelChart(
|
||||
series: FunnelSeries<ChartData, double>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
FlatButton(
|
||||
child: Text('Select'),
|
||||
onPressed: select
|
||||
),
|
||||
Container(child: chart)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
void select() {
|
||||
_selectionBehavior.selectDataPoints(1, 0);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
---
|
||||
layout: post
|
||||
title: Series customization in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Series customization feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Series customization in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
## Animation
|
||||
|
||||
[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
series:FunnelSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
animationDuration: 1000,
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Empty points
|
||||
|
||||
The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html) are [`gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html), [`zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html), [`drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html) and [`average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html). Default mode of the empty point is [`gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData('David', null),
|
||||
ChartData('Steve', 38),
|
||||
ChartData('Jack', 34),
|
||||
ChartData('Others', 52)
|
||||
];
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
series:FunnelSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
dataLabelSettings: DataLabelSettings(isVisible:true),
|
||||
emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.average),
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
### Empty point customization
|
||||
|
||||
Specific color for empty point can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<ChartData> chartData = [
|
||||
ChartData('David', null),
|
||||
ChartData('Steve', 38),
|
||||
ChartData('Jack', 34),
|
||||
ChartData('Others', 52)
|
||||
];
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
series:FunnelSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
dataLabelSettings: DataLabelSettings(isVisible:true),
|
||||
emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.average,
|
||||
color: Colors.red,
|
||||
borderColor: Colors.black,
|
||||
borderWidth: 2),
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Color mapping for data points
|
||||
|
||||
The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/pointColorMapper.html) property is used to map the color field from the data source.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
static dynamic chartData = <SalesData>[
|
||||
SalesData('Rent', 1000,Colors.teal),
|
||||
SalesData('Food', 2500,Colors.lightBlue),
|
||||
SalesData('Savings', 760,Colors.brown),
|
||||
SalesData('Tax', 1897,Colors.grey),
|
||||
SalesData('Others', 2987,Colors.blueGrey)
|
||||
];
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
series:FunnelSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
//map Color for each dataPoint datasource.
|
||||
pointColorMapper: (ChartData sales,_) => sales.color,
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Charts Tooltip
|
||||
description: Learn how to enable and customize the tooltip options available in the Syncfusion Flutter Chart widget.
|
||||
title: Tooltip in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Tooltip feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip in Funnel chart
|
||||
# Tooltip in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
Chart provides tooltip support for all the series. It is used to show information about the segment, when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as `true`.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Callbacks
|
||||
description: Learn what are all the Callbacks available in Flutter Charts. Callbacks will be triggered on some specific actions in SfPyramid chart.
|
||||
title: Callbacks in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Callbacks feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Callbacks in Pyramid chart
|
||||
# Callbacks in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
The below Callbacks are for Pyramid chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customizing the appearance of Syncfusion Flutter Charts
|
||||
description: Learn how to customize the appearance of SfPyramid Charts and the customizing properties available in SfPyramid charts.
|
||||
title: Appearance customization in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Appearance customization of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Appearance of Pyramid chart
|
||||
# Appearance customization in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
## Chart sizing
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart Title
|
||||
description: Learn how to add chart title and customize its appearance such as text alignment in the Flutter Charts.
|
||||
title: Chart title in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Chart title feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Chart title in Pyramid chart
|
||||
# Chart title in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
You can define and customize the Chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Data labels in Syncfusion Pyramid Charts
|
||||
description: Learn how to add the Data point labels to the series available in the Syncfusion Flutter Pyramid Chart widget.
|
||||
title: Data label in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Data label feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Data label in Pyramid chart
|
||||
# Data label in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/dataLabelSettings.html). You can use the following properties to customize the appearance.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
layout: post
|
||||
title: Exporting in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Exporting feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Exporting in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides support to export the pyramid chart as a PNG image or as PDF document.
|
||||
|
||||
## Export image
|
||||
|
||||
To export the pyramid chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderPyramidImage() async {
|
||||
dart_ui.Image data =
|
||||
await _pyramidChartKey.currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
if (data != null) {
|
||||
await Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(),
|
||||
body: Center(
|
||||
child: Container(
|
||||
color: Colors.white,
|
||||
child: Image.memory(bytes!.buffer.asUint8List()),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### Export PDF
|
||||
|
||||
Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderPyramidPDF() async {
|
||||
var document = PdfDocument();
|
||||
PdfPage page = document.pages.add();
|
||||
dart_ui.Image data =
|
||||
await _pyramidChartKey.currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
final Uint8List imageBytes =
|
||||
bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
|
||||
page.graphics
|
||||
.drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300));
|
||||
var byteData = document.save();
|
||||
document.dispose();
|
||||
Directory directory = await getExternalStorageDirectory();
|
||||
String path = directory.path;
|
||||
File file = File('$path/Output.pdf');
|
||||
await file.writeAsBytes(byteData, flush: true);
|
||||
OpenFile.open('$path/Output.pdf');
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started with Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget, its elements, and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting started with Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart.
|
||||
|
||||
To get start quickly with our Flutter chart widget, you can check on this video.
|
||||
|
||||
<style>#flutterChartVideoTutorial{width : 90% !important; height: 300px !important }</style>
|
||||
<iframe id='flutterChartVideoTutorial' src='https://www.youtube.com/embed/t3Dczqj8-10'></iframe>
|
||||
|
||||
## Add Flutter Charts to an application
|
||||
|
||||
Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app) documentation.
|
||||
|
||||
**Add dependency**
|
||||
|
||||
Add the Syncfusion Flutter Chart dependency to your pub spec file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
|
||||
syncfusion_flutter_charts: ^xx.x.xx
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package.
|
||||
|
||||
**Get packages**
|
||||
|
||||
Run the following command to get the required packages.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
$ flutter pub get
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
**Import package**
|
||||
|
||||
Import the following package in your Dart code.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_charts/charts.dart';
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Initialize chart
|
||||
|
||||
Once the package has been imported, initialize the chart as a child of any widget. SfPyramidChart can be used to render pyramid charts. Here, as we are rendering pyramid chart, initialize SfPyramidChart widget as a child of Container widget.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
//Initialize chart
|
||||
child: SfPyramidChart()
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
_note_ : An empty chart will be displayed.This is charts default behavior.
|
||||
|
||||
## Bind data source
|
||||
|
||||
Based on your data, initialize the series type. In the series, you need to map the data source and the fields for x and y data points. Here, pyramid series is rendered that is demonstrated in the following code snippet.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<ChartData> chartData = [
|
||||
ChartData('David', 25),
|
||||
ChartData('Steve', 38),
|
||||
ChartData('Jack', 34),
|
||||
ChartData('Others', 52)
|
||||
];
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y, [this.color]);
|
||||
final String x;
|
||||
final double y;
|
||||
final Color color;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Add title
|
||||
|
||||
You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title to chart can be set as demonstrated in the following code snippet.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
// Chart title text
|
||||
title: ChartTitle(text: 'Half yearly sales analysis'),
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Enable data labels
|
||||
|
||||
You can add data labels to improve the readability of the chart using the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/dataLabelSettings.html) property.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
// Render the data label
|
||||
dataLabelSettings:DataLabelSettings(isVisible : true)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Enable legend
|
||||
|
||||
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 [`SfPyramidChart.legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
// Enables the legend
|
||||
legend: Legend(isVisible: true),
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Enable tooltip
|
||||
|
||||
The tooltip is used when you cannot display information using the data labels due to space constraints.
|
||||
|
||||
The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/tooltipBehavior.html) property in chart is used to enable and customize the tooltip for the pyramid series. The tooltip is enabled as demonstrated in the following code snippet.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late TooltipBehavior _tooltipBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_tooltipBehavior = TooltipBehavior( enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(widget.title),
|
||||
),
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
// Enables the tooltip for all the series in chart
|
||||
tooltipBehavior: _tooltipBehavior,
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
You can find the complete getting started example from this [`link`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/chart_example2131351808).
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Chart legend
|
||||
description: Learn how to configure the legend and customize the appearance of its element in Syncfusion Funnel Charts.
|
||||
title: Legend in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Legend feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Legend in Pyramid chart
|
||||
# Legend in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/legend.html) contains list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Charts
|
||||
description: Learn the key features available in Syncfusion Flutter Charts and overview about SYncfusion Flutter Charts.
|
||||
title: About Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget, its features, and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of Syncfusion Flutter Charts
|
||||
# Flutter Pyramid Chart (SfPyramidChart) Overview
|
||||
|
||||
Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Pyramid Chart Types
|
||||
description: Learn how to add and customize the pyramid type of charts available in the Syncfusion Flutter Chart widget.
|
||||
title: Customization in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Customization of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Features of Pyramid chart
|
||||
# Customization in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
To render a pyramid chart, create an instance of [`PyramidSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/series.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The following properties can be used to customize the appearance of a pyramid segment.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,206 @@
|
|||
---
|
||||
layout: post
|
||||
title: Selection in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Selection feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Selection in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(
|
||||
// Enables the selection
|
||||
enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series: PyramidSeries<SalesData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (SalesData sales, _) => sales.year,
|
||||
yValueMapper: (SalesData sales, _) => sales.sales,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Customizing the segments
|
||||
|
||||
You can customize the segments using the below properties.
|
||||
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedColor.html) - used to change the background color of selected segment.
|
||||
* [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedColor.html) - used to change the background color of unselected segment.
|
||||
* [`selectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedBorderColor.html) - used to change the stroke color of the selected segment.
|
||||
* [`selectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedBorderWidth.html) - used to change the stroke width of the selected segment.
|
||||
* [`unselectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedBorderColor.html) - used to change the stroke color of the unselected segment.
|
||||
* [`unselectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedBorderWidth.html) - used to change the stroke width of the unselected segment.
|
||||
* [`selectedOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedOpacity.html) - used to control the transparency of the selected segment.
|
||||
* [`unselectedOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedOpacity.html) - used to control the transparency of the unselected segment.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(
|
||||
// Enables the selection
|
||||
enable: true,
|
||||
selectedColor: Colors.red,
|
||||
unselectedColor: Colors.grey,
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series: PyramidSeries<SalesData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (SalesData sales, _) => sales.year,
|
||||
yValueMapper: (SalesData sales, _) => sales.sales,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Multi-selection
|
||||
|
||||
Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/enableMultiSelection.html) property of chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
// Enables multiple selection
|
||||
enableMultiSelection: true
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Selection on initial rendering
|
||||
|
||||
You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/initialSelectedDataIndexes.html) property of chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
initialSelectedDataIndexes: [2, 0]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
Also refer [selection event](./events#onselectionchanged) for customizing the selection further.
|
||||
|
||||
## Methods in SelectionBehavior
|
||||
|
||||
### SelectDataPoints method in SelectionBehavior
|
||||
|
||||
The [`selectDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectDataPoints.html) method is used to select the data point programmatically. The required arguments are listed below.
|
||||
|
||||
* `pointIndex` - specifies the point index value.
|
||||
* `seriesIndex` - specifies the series index value and this is an optional parameter. By default it will be considered as 0.
|
||||
|
||||
N> The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) is also applicable for this but, it is based on the API values specified in the chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SfPyramidChart chart;
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData(10, 17),
|
||||
ChartData(20, 34)
|
||||
// Add the required data
|
||||
];
|
||||
|
||||
selection = ;
|
||||
|
||||
chart = SfPyramidChart(
|
||||
series: PyramidSeries<ChartData, double>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
FlatButton(
|
||||
child: Text('Select'),
|
||||
onPressed: select
|
||||
),
|
||||
Container(child: chart)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
void select() {
|
||||
_selectionBehavior.selectDataPoints(1, 0);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
---
|
||||
layout: post
|
||||
title: Series customization in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Series customization of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Series customization in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
## Animation
|
||||
|
||||
[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
animationDuration: 1000,
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Empty points
|
||||
|
||||
The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html) are [`gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html), [`zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html), [`drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html) and [`average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html). Default mode of the empty point is [`gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final List<ChartData> chartData = [
|
||||
ChartData('David', null),
|
||||
ChartData('Steve', 38),
|
||||
ChartData('Jack', 34),
|
||||
ChartData('Others', 52)
|
||||
];
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfPyramidChart(
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
dataLabelSettings: DataLabelSettings(isVisible:true),
|
||||
emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.average),
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
### Empty point customization
|
||||
|
||||
Specific color for empty point can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<ChartData> chartData = [
|
||||
ChartData('David', null),
|
||||
ChartData('Steve', 38),
|
||||
ChartData('Jack', 34),
|
||||
ChartData('Others', 52)
|
||||
];
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
dataLabelSettings: DataLabelSettings(isVisible:true),
|
||||
emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.average,
|
||||
color: Colors.red,
|
||||
borderColor: Colors.black,
|
||||
borderWidth: 2),
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Color mapping for data points
|
||||
|
||||
The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/pointColorMapper.html) property is used to map the color field from the data source.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
static dynamic chartData = <SalesData>[
|
||||
SalesData('Rent', 1000,Colors.teal),
|
||||
SalesData('Food', 2500,Colors.lightBlue),
|
||||
SalesData('Savings', 760,Colors.brown),
|
||||
SalesData('Tax', 1897,Colors.grey),
|
||||
SalesData('Others', 2987,Colors.blueGrey)
|
||||
];
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series:PyramidSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
//map Color for each dataPoint datasource.
|
||||
pointColorMapper: (ChartData sales,_) => sales.color,
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Charts Tooltip
|
||||
description: Learn how to enable and customize the tooltip options available in the Syncfusion Flutter Chart widget.
|
||||
title: Tooltip in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Tooltip feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip in Pyramid chart
|
||||
# Tooltip in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
Chart provides tooltip support for all the series. It is used to show information about the segment, when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as `true`.
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче