# syncfusion_flutter_charts **Repository Path**: chedng/syncfusion_flutter_charts ## Basic Information - **Project Name**: syncfusion_flutter_charts - **Description**: 图表库syncfusion_flutter_charts 源码修改 https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-chart - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-06-26 - **Last Updated**: 2023-06-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README  # Flutter Charts library The [Flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) package is a data visualization library written natively in Dart for creating beautiful, animated and high-performance charts, which are used to craft high-quality mobile app user interfaces using Flutter. ## Overview Create various types of cartesian, circular and spark charts with seamless interaction, responsiveness, and smooth animation. It has a rich set of features, and it is completely customizable and extendable. This [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) package includes the following widgets * [SfCartesianChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [SfCircularChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [SfPyramidChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [SfFunnelChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [SfSparkLineChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [SfSparkAreaChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [SfSparkBarChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [SfSparkWinLossChart](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart-class.html?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) **Disclaimer:** This is a commercial package. To use this package, you need to have either Syncfusion Commercial License or [Free Syncfusion Community license](https://www.syncfusion.com/products/communitylicense?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev). For more details, please check the [LICENSE](https://github.com/syncfusion/flutter-examples/blob/master/LICENSE?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) file. ## Table of contents - [Chart features](#chart-features) - [Spark Charts features](#spark-charts-features) - [Get the demo application](#get-the-demo-application) - [Useful links](#useful-links) - [Installation](#installation) - [Chart getting started](#chart-getting-started) - [Add chart to the widget tree](#add-chart-to-the-widget-tree) - [Bind data source](#bind-data-source) - [Add chart elements](#add-chart-elements) - [Spark Charts getting started](#spark-charts-getting-started) - [Add spark charts to the widget tree](#add-spark-charts-to-the-widget-tree) - [Bind spark charts data source](#bind-spark-charts-data-source) - [Add spark charts elements](#add-spark-charts-elements) - [Support and Feedback](#support-and-feedback) - [About Syncfusion](#about-syncfusion) ## Chart features * **Chart types** - Provides functionality for rendering 30+ chart types, namely [line](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/line-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [spline](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [column](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [bar](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bar-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [area](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/area-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [bubble](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/bubble-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [box and whisker](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/box-and-whisker-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [scatter](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/scatter-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [step line](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/step-line-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [fast line](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/line-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [range column](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/range-column-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [range area](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/range-area-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [candle](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/candle-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [hilo](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/hilo-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [ohlc](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/ohlc-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [histogram](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/histogram-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [step area](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/step-area-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [spline area](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-area-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [spline range area](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/spline-range-area-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [stacked area](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [stacked bar](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-bar-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [stacked column](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-column-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [stacked line](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-line-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [100% stacked area](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-area-100-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [100% stacked bar](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-bar-100-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [100% stacked column](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-column-100-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [100% stacked line](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/stacked-line-100-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [waterfall](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/waterfall-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [pie](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pie-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [doughnut](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/doughnut-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [radial bar](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/radial-bar-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [pyramid](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pyramid-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev), [funnel](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/funnel-chart?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev). Each chart type is easily configured and customized with built-in features for creating stunning visual effects.  * **Axis types** - Plot various types of data in a graph with the help of numeric, category, date-time, date-time category and log axis types. The built-in axis features allow to customize an axis elements further to make the axis more readable.  * **User interaction** - The end-user experience is greatly enhanced by including the user interaction features such as zooming and panning, crosshair, trackball, callbacks, selection, tooltip, and auto-scrolling in chart.  * **Legends** - Display additional information about the chart series. The chart legend can also be used to collapse the series. The legends can be wrapped or scrolled if an item exceeds the available bounds.  * **Dynamic update** - Updates the chart dynamically or lazily with live data that changes over seconds or minutes like stock prices, temperature, speed, etc.  ## Spark Charts features Spark charts (Sparkline charts) which is also known as micro charts are lightweight charts that fit in a very small area. They display the trend of the data and convey quick information to the user. * **Chart types** - Support to render line, area, bar and win-loss chart types.  * **Axis types** - Spark charts provides support for numeric, category and date-time axes.  * **Markers and data labels** - Support to render markers and data labels on high, low, first, last and all data points.  * **Trackball** - Display additional information about data points on interaction with the chart.  * **Plot band** - Highlight a particular vertical range using a specific color.  * **Live update** - Sparkline charts can be used in the live update.  ## Get the demo application Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view samples code in GitHub.
## Other useful links Take a look at the following to learn more about Syncfusion Flutter charts: * [Syncfusion Flutter Charts product page](https://www.syncfusion.com/flutter-widgets/flutter-charts?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [Video tutorials](https://www.syncfusion.com/tutorial-videos/flutter/charts?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [Knowledge base](https://www.syncfusion.com/kb?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [Download Free Trial](https://www.syncfusion.com/downloads?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [Pricing](https://www.syncfusion.com/sales/products/flutter?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [User guide documentation](https://help.syncfusion.com/flutter/cartesian-charts/overview?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev) * [Online Examples](https://flutter.syncfusion.com/?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev#/cartesian-charts/chart-types/line/default-line-chart) ## Installation Install the latest version from [pub](https://pub.dartlang.org/packages/syncfusion_flutter_charts?utm_source=pubdev&utm_medium=listing&utm_campaign=flutter-charts-pubdev#-installing-tab-). ## Chart getting started Import the following package. ```dart import 'package:syncfusion_flutter_charts/charts.dart'; ``` ### Add chart to the widget tree Add the chart widget as a child of any widget. Here, the chart widget is added as a child of container widget. ```dart @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( child: SfCartesianChart() ) ) ); } ``` **Note** * Use `SfCartesianChart` widget to render line, spline, area, column, bar, bubble, scatter, step line, and fast line charts. * Use `SfCircularChart` widget to render pie, doughnut, and radial bar charts. * Use `SfPyramidChart` and `SfFunnelChart` to render pyramid and funnel charts respectively. ### Bind data source Based on data, initialize the appropriate axis type and series type. In the series, map the data source and the fields for x and y data points. To render a line chart with category axis, initialize appropriate properties. ```dart @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( child: SfCartesianChart( // Initialize category axis primaryXAxis: CategoryAxis(), series: