syncfusion / flutter-examples

This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.

Syncfusion Flutter examples

This repository contains awesome demos of Syncfusion Flutter UI widgets. This is the best place to check our widgets to get more insight into the usage of APIs. You can also check our widgets by installing the complete Flutter sample browser from Google Play Store or App Store, in which you can browse the demo for all the widgets and view the source code of each sample within the app itself.

Table of contents

• Requirements to run the demo
• Repository Structure
• Widgets Catalog
• License
• Using the examples
• Support and Feedback

Requirements to run the demo

• IDE tools are Visual Studio code and Android studio.
• Flutter SDK

  Channel	Version
  Stable	2.0.2
  Beta	2.0.2

• Dart and Flutter add-ons for Visual Studio Code (available via the Visual studio code extension) in Android Studio it available in plugin preference.

Repository Structure

The lib/samples directory contains the Flutter widget examples for each widget such as Charts, DataGrid, etc. All the examples can be deployed in Android, iOS, and web platforms.

Widgets Catalog

Widgets	Repository
Barcode Generator	Link
Calendar	Link
Charts	Link
DataGrid	Link
Date Range Picker	Link
Linear Gauge	Link
Maps	Link
PDF	Link
PDF Viewer	Link
Progress Bar	Link
Radial Gauge	Link
Range Selector	Link
Range Slider	Link
Slider	Link
Spark Charts	Link
Signature Pad	Link
Treemap	Link
XlsIO	Link

License

Syncfusion has no liability for any damage or consequence that may arise by the use or viewing of the examples. The examples are for demonstrative purposes and if you choose to use or access the examples you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, accessing or otherwise viewing the examples. By accessing, viewing, or otherwise seeing the examples you acknowledge and agree Syncfusion’s examples will not allow you to seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize or otherwise do anything with Syncfusion’s examples.

Using the examples

Step 1

Unzip the downloaded flutter example archive.

Note: If you clone this repository ignore this step.

Step 2

Open the flutter example folder in an IDE.

Step 3

Run the following command to get the required packages.

$ flutter pub get

Step 4

Run your application either using F5 or Run > Start Debugging.

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.

Useful links

Take a look at the following to learn more about Syncfusion Flutter widgets:

• Syncfusion Flutter product page
• User guide documentation
• API reference
• Knowledge base
• Video tutorials

Support and feedback

• For any other queries, reach our Syncfusion support team or post the queries through the Community forums and submit a feature request or a bug through our Feedback portal.
• To renew the subscription, click renew or contact our sales team at [email protected] | Toll Free: 1-888-9 DOTNET.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1,000+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Blazor, mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, and UWP and WinUI). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

flutter-examples's Issues

Line Series Trackball Tooltip Format Series Name

Description:

In the following example for a line series chart (where x-axis is DateTimeAxis and y-axis is NumericAxis) the following does not work as expected:

tooltipSettings: InteractiveTooltip(
	textStyle: ChartTextStyle(color: Colors.black, fontSize: 11),
	format: 'series.name: point.y',
	borderWidth: 1,
	borderColor: Colors.black,
	color: Color.fromRGBO(255, 255, 255, 0.75),
)

The tooltip label correctly parses and replaces point.y but does not do the same for series.name it just keeps it as the string: 'series.name' in the tool tip and does not update.

Issue Resolution:

Digging through the code, the following seems to be the culprit - series.name is completely missing:

lib/src/chart/user_interaction/trackball_painter.dart

labelValue = chart
  .trackballBehavior.tooltipSettings.format
  .replaceAll('point.x', (x ?? xValue).toString())
  .replaceAll('point.y',
      _getLabelValue(yValue, cartesianSeries._yAxis))
  .replaceAll('{', '')
  .replaceAll('}', '');

Changing to this to the following (adding series.name replacement), solved the issue:

labelValue = chart
  .trackballBehavior.tooltipSettings.format
  .replaceAll('point.x', (x ?? xValue).toString())
  .replaceAll('point.y',
      _getLabelValue(yValue, cartesianSeries._yAxis))
  .replaceAll('{', '')
  .replaceAll('}', '')
  .replaceAll('series.name', cartesianSeries.name);

Gradient for SplineSeries Line.

Hello is there any way to Gradient for SplineSeries Line of graph.

Trackball still shows for a few seconds，after fingers move away from chart

Now, If trackballBehavior is enabled, trackball disappear immediately after fingers move away from chart.

I hope trackball still shows for a few seconds after fingers move away from chart, in order to be able to take a screenshot.

Looking forward to your reply ~~

MarkerSettings image: No proposed image appears

class TendenciasData {
  TendenciasData(
    this.mes,
    this.vendas
  );

  final String mes;
  final double vendas;
}

ScatterSeries<TendenciasData, String>(
  dataSource: [
    TendenciasData('Jan', 12),
    TendenciasData('Fev', 25),
    TendenciasData('Mar', 9),
    TendenciasData('Abr', 36),
    TendenciasData('Mai', 15),
    TendenciasData('Jun', 42)
  ],
  xValueMapper: (TendenciasData tendencias, _) => tendencias.mes,
  yValueMapper: (TendenciasData tendencias, _) => tendencias.vendas,
  markerSettings: MarkerSettings(
    imageUrl: 'assets/images/ghost.png',
    isVisible: true,
    shape: DataMarkerType.image
  ),
  name: 'Scatter'
)

image_teste :

Issue with tooltip visible

Hello I have found one issue when we used SplineSeries and give animationDuration:0 then tooltip not display even it's shouldAlwaysShow: true and enable: true.

Notes:- It's display when we give animationDuration is grater then 0 or not used that parameter.

is it right for version

the latest version is '17.3.14'. it's ok??

Issue with Trackball with CategoryAxis

The following exception is thrown when using enabling a Trackball with a CategoryAxis x-axis.

════════ Exception caught by gesture library ═══════════════════════════════════
The following RangeError was thrown while dispatching a pointer event:
RangeError (index): Invalid value: Not in range 0..6, inclusive: 170

When the exception was thrown, this was the stack
#0 List.[] (dart:core-patch/growable_array.dart:147:60)
#1 _TrackballPainter._generateAllPoints
package:syncfusion_flutter_charts/…/user_interaction/trackball_painter.dart:631
#2 TrackballBehavior.show
package:syncfusion_flutter_charts/…/user_interaction/trackball.dart:206
#3 TrackballBehavior.onTouchDown
package:syncfusion_flutter_charts/…/user_interaction/trackball.dart:230
#4 _ContainerArea._bindInteractionWidgets.
package:syncfusion_flutter_charts/…/base/chart_base.dart:1636
...
Event: PointerDownEvent#19ffd(position: Offset(246.1, 405.0), timeStamp: 32:30:22.992000, pointer: 15, kind: touch, buttons: 1, down: true, pressure: 0.6, pressureMin: 0.0, pressureMax: 3.2, size: 0.1, radiusMajor: 91.8, radiusMinor: 91.8)
position: Offset(246.1, 405.0)
Target: RenderPointerListener#26a18 relayoutBoundary=up1
parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=425.0)
size: Size(391.4, 425.0)
behavior: deferToChild
listeners: down, move, up
════════════════════════════════════════════════════════════════════════════════

This appears to be due to the following code in trackball_painter.dart (line 630):

} else if (axis is CategoryAxis) {
                        x = axis._visibleLabels[xValue.round()].text;
                      }

The _visibleLabel property of axis contains only 6 values due to the large number of x-values in my CategoryAxis, and these being truncated to display nicely.

I suspect this can be fixed by changing the code to:

} else if (axis is CategoryAxis) {
                        x = axis._labels[xValue.round()].text;
                      }

Initial trackball line position

Is it possible to set initial trackball line position? I need a line to be visible when chart renders for the first time. Currently, it is visible only when touching the chart. Ideally, I would love to set the trackball line position using index.

trying to transpose the axis and pan yields exception

In a Catersian Chart using a Column series, when we transpose and try to pan we get an exception :

When the exception was thrown, this was the stack
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
#1 ZoomPanBehavior._doubleTapZooming
package:syncfusion_flutter_charts/…/user_interaction/zooming_panning.dart:203
#2 ZoomPanBehavior.onDoubleTap
package:syncfusion_flutter_charts/…/user_interaction/zooming_panning.dart:594
#3 _ContainerArea._bindInteractionWidgets.
package:syncfusion_flutter_charts/…/base/chart_base.dart:1775
#4 GestureRecognizer.invokeCallback
package:flutter/…/gestures/recognizer.dart:182
...
Handler: "onDoubleTap"
Recognizer: DoubleTapGestureRecognizer#31719
debugOwner: GestureDetector
════════════════════════════════════════════════════════════════════════════════

is project opensource ?

is project opensource and anyone can reuse it :D

onTrackballPositionChanging

Every time I click on a point using trackball the onTrackballPositionChanging callback is fired for every other point. After that I have no idea on which point I clicked...

Is there a way to find out the index of the point I clicked on using trackball?

Gauge annotation does not show up v17.3.26-beta

I'm new to syncfusion and I've been trying to create a simple gauge. Everything else was rendered except the gauge annotation when I did my own code, so I tried the example (in a separate project with just the gauge) and got the same issue. Sometimes I see the annotation sometimes but it disappears immediately. There are also no errors thrown. The Container widget here is a child of <Widget>[] which itself nested inside a Column widget

          Container(
            child: SfRadialGauge(
              axes: <RadialAxis>[
                RadialAxis(minimum: 0, maximum: 150,
                  pointers: <GaugePointer>[MarkerPointer(
                    markerType: MarkerType.invertedTriangle,
                    markerOffset: -5,
                    enableAnimation: true,
                    animationDuration: 0.5,
                    value: 90,
                    color: Colors.pink,
                    )
                  ],
                  annotations: <GaugeAnnotation>[
                    GaugeAnnotation(
                      widget: Container(
                        child:Text('90', style: Theme.of(context).textTheme.body1),
                      ),
                      angle: 90,
                      positionFactor: 0.5,
                      horizontalAlignment: GaugeAlignment.center,
                      verticalAlignment: GaugeAlignment.center,
                    )
                  ]
                )
              ]
            ),
          ),

Github refused to upload the image of the rendered output so:
Rendered Output

Graph Area (within some height and width)

When I am using SfCartesianChart() widget to my viewport, It'll cover the random screen area based on the remaining space it has.

Is it possible to give some specific height and width to it?

Gradient not supported on Radial Gauge v17.3.26-beta

Following the example on this page. I get the following error on Android Studio.
The named parameter 'gradient' isn't defined
Is there a way to implement a gradient on the RangePointer?

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: Center(
        child: SfRadialGauge(
            axes:<RadialAxis>[RadialAxis( 
                axisLineStyle: AxisLineStyle(thickness: 0.1,
                  thicknessUnit: GaugeSizeUnit.factor,),
              pointers: <GaugePointer>[RangePointer(
                value: 40, width: 0.1, sizeUnit: GaugeSizeUnit.factor,
                gradient: const SweepGradient(  //error occurs here
                    colors: <Color>[Color(0xFFCC2B5E), Color(0xFF753A88)],
                    stops: <double>[0.25, 0.75]
                ),
              )]
            ),
          ]
        ),
      ),
    );
  }

Is it free? 【question】

I couldn't find the price on the official website.
Can you tell me if there is a price?

DateTime LineSeries - Gesture Callback Issues

Description:

I am seeing some issues with using gesture detection methods with latest version (have always had this issue, even with previous versions) - The sample data is provided below as screenshot and code to reproduce at the end of this issue.

Description: Issue 1

First issue I am seeing is with trackball gesture detector. To recreate this issue do the following:

1. Use one finger to tap and display the trackball
2. Keep holding tap
3. Now with a second figure tap or drag somewhere else on the chart area

This sometimes happens when you are attempting to pinch zoom and both fingers don't touch at the same time. You will get the following trace in debug console (it does not crash the app):

════════ Exception caught by gesture ═══════════════════════════════════════════
The following NoSuchMethodError was thrown while handling a gesture:
The getter 'dx' was called on null.
Receiver: null
Tried calling: dx

Caused by chart_base,dart in the following location:

if (chart.trackballBehavior.activationMode ==
    ActivationMode.singleTap) {
  chart.trackballBehavior.onTouchMove(position.dx, position.dy);

Description: Issue 2

This issue is a little more catastrophic. It will result in this to be rendered in chart area (when in debug mode):

This is trickier to recreate but you can do it by using two fingers, tapping and holding on chart area.

---

Likely an issue with intervalType and how it is handled in code.

primaryXAxis: DateTimeAxis(
	isVisible: true,
	intervalType: DateTimeIntervalType.days,
	dateFormat: DateFormat('M/dd/yy'),
	placeLabelsNearAxisLine: false,
),

I believe this has to do with DateTime axis and the fact that there are some missing protections in datetime_axis.dart in the _alignRangeStart - I believe this is where the error is stemming from.

  /// Returns the range start values based on actual interval type
  int _alignRangeStart(DateTimeAxis axis, int startDate, num interval) {
    DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(startDate);
    switch (axis._actualIntervalType) {
...
  }

Code To Reproduce:

Please run this simple main.dart to reproduce. All the code lives within it, attached below as txt file:

main.txt

NumericAxis issues with values that are float and have 3 zero decimals after floating point

In my app case I work with presenting crypto currencies and their value has different ranges. For Bitcoin ranges are around 9000, but for other currencies it gets to 0.000xxxxx.

When setting data points with values all starting with float 0.000xxxx NumericAxis losses data. I am passing graph info data with 9 digits precision and only leading 3 are zeros, so there should be no problem displaying this, but library doesn't support lower values it seems. Also format displaying in a popup on click shows only "0.0" value, and not floating point values that are passed to the lib.

Any advice how I can work around the issue and display correct graph data on click, and present correct primaryYAxis?
You can find attached screenshot from the device, to see what the problem is.

[Question] - how to make use of EmptyPointMode.average in case there is more than one missing values in a row

Hi there and thanks for providing such a useful chart package for Flutter. I dare to say this is the best chart package so far.
I have a question though:
I would like to use AreaSeries with EmptyPointMode.average.
In case, I have one missing y value in between two existing ones, the average mode works just fine and calculates average. If however, I have let's say two missing values, where the next follows the first one, e.g.:

  final List<_ChartData> chartData = <_ChartData>[
    _ChartData('China', 0.541),
    _ChartData('Brazil', null),
    _ChartData('Egypt', null),
    _ChartData('Bolivia', 1.51),
    _ChartData('Mexico', 1.302),
    _ChartData('Mongolia', 1.683),
  ];

the average is not calculated and I have a gap rather than the expected average value. Is that the expected chart behavior? In case it is, is there a way to override it, e.g. to calculate average based on the existing points which wrap the missing y values ones?

Auto highlight tooltip.

Hello is there any way to highlight default tooltip with out tap or click on chart for any particular data point?

Gradient is not supported

I use gradient just like

SplineSeries<MyData, String>(
    //...................
   gradient: LinearGradient(
      colors: [
         Colors.black,
         Colors.red,
      ],
    //.................
)

but it doesn't work. Is it wrong to use?

Bar Series with Negative Values - Bar Segment Painter Issue

Description:

This is a re-open of #25 which was closed (I can't reopen issues because I am not a collaborator on the project), but this still is an issue. Here are more details and concrete example to reproduce:

As you can see from above some of the negative bars are in the wrong direction. The issue only occurs for negative values that are greater than -1 (Data D and Data E) - but values equals less than or equal to -1 are in the right direction (Data C)

Code To Reproduce:

Please run this simple main.dart to reproduce. All the code lives within it, attached below as txt file:

main.txt

DataLabelSettings and MarkerSettings image

Im trying to set custom marker with visible labels:
`

        //primaryXAxis: CategoryAxis(),
        // Chart title
        //title: ChartTitle(text: 'Half yearly sales analysis'),
        // Enable legend
        legend: Legend(isVisible: false),
        // Enable tooltip
        tooltipBehavior: TooltipBehavior(enable: true),
        zoomPanBehavior: ZoomPanBehavior(
            enablePinching: true,
            zoomMode: ZoomMode.x,
            enablePanning: true),
        series: <ChartSeries<DskPoint, num>>[
          LineSeries<DskPoint, num>(
            dataSource: <DskPoint>[
              DskPoint(0, 35),
              DskPoint(1, 28),
              DskPoint(2, 34),
              DskPoint(3, 32),
              DskPoint(4, 40)
            ],
            xValueMapper: (DskPoint sales, _) => sales.x,
            yValueMapper: (DskPoint sales, _) => sales.y,
            dataLabelSettings: DataLabelSettings(isVisible: true),
            //markerSettings: MarkerSettings(isVisible: true, shape: DataMarkerType.rectangle),
             markerSettings: MarkerSettings(
                isVisible: true,
                shape: DataMarkerType.image,
                imageUrl: 'images/truck.png'),
            // Enable data label
          ),
          ScatterSeries<DskPoint, num>(
              dataSource: <DskPoint>[
                DskPoint(1, 10)
              ],
              xValueMapper: (DskPoint sales, _) => sales.x,
              yValueMapper: (DskPoint sales, _) => sales.y,
              //markerSettings: MarkerSettings(isVisible: true, shape: DataMarkerType.rectangle),
              markerSettings: MarkerSettings(
                  isVisible: true,
                  shape: DataMarkerType.image,
                  imageUrl: 'images/truck.png'),
              name: 'India'),
        ]),
  )),`

the values is dissapearing, but when we scroll chart labels comes to visible state,when stop scrolling they dissapear again..

Automatic panning is not supported

Automatic panning does not work if we set :

zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
enablePinching: false,
),

Full Chart :

        /// Used for column 
        SfCartesianChart(
      plotAreaBorderWidth: 0,
      primaryXAxis: CategoryAxis(
        majorGridLines: MajorGridLines(width: 0),
      ),
      primaryYAxis: NumericAxis(
          maximum: 100,
          minimum: 0,
          interval: 25,
          axisLine: AxisLine(width: 0),
          majorTickLines: MajorTickLines(size: 0)),
      series: getColumnSeries(),
          isVisible: true,
          overflowMode: LegendItemOverflowMode.wrap),
      tooltipBehavior: TooltipBehavior(enable: true),
      zoomPanBehavior: ZoomPanBehavior(
        enablePanning: true,
        enablePinching: false,
      ),
    ),

The only way to get panning working is to :

1. zoomPanBehavior: ZoomPanBehavior(
   enablePanning: true,
   enablePinching: true,
   ),

2. zoomPanBehavior: ZoomPanBehavior(
   enablePanning: true,
   enablePinching: false, enableDoubleTapZooming: true
   ),

I just want to view a graph and be able to pan the graph without having to doubletap - is this another bug in syncfusion or is this a limitation ?

Reanimate graph

Hello is there any way for Reanimate graph without data change?

some of the labels did not show in piechart

I run the pie with smart labels demo, it set eight labels, but only show six, how to fix this?

Bar Series with Negative Values - Bar Segment Painter Issue

Description:

Something happened from v3 to v4 that really messed up how a bar series deals with negative values. The painter completely fails to draw bar charts in the opposite direct - this was working just fine in v3.

The following is for the same exact code, just updating from v3 to v4 of package.

---

Here is the output from v3:

Here is the output from v4:

NOTE: The data labels are messed up because of #23 in v4 - this issue is just focused on the bar segment painter issue as seen below.

Issue Resolution:

I tried to dig around, but could not find anything to identify what is causing the issue. @dharanidharandharmasivam @JayavigneshwaranG - please let me know if you have any thoughts on this.

onTouchUp callback

I'd like to see to some sort of onTouchUp function for TrackballBehavior in particular, where a callback function gets activated when user stops touching the chart.

Thanks.

Bar Series Tooltip Format Y Value

Description:

This is a re-open of #22 which was closed (I can't reopen issues because I am not a collaborator on the project), but this still is an issue. Here are more details and concrete example to reproduce:

tooltipBehavior: TooltipBehavior(
	enable: true,
	header: 'Tooltip Header',
	format: "point.x has value of: point.y",
),

Code To Reproduce:

As you can see from the above, point.y does not get replaced. Please run this simple main.dart to reproduce. All the code lives within it, attached below as txt file:

main.txt

Error: depends on intl

This error occurred today when I went to update the flutter.

[erpmobile] flutter packages get
Running "flutter pub get" in erpmobile...                  
Because syncfusion_flutter_charts >=1.0.0-beta.4 depends on intl ^0.15.7 and erpmobis depends on intl ^0.16.0, syncfusion_flutter_charts >=1.0.0-beta.4 is forbidden.

So, because erpmobis depends on syncfusion_flutter_charts ^1.0.0-beta.4, version solving failed.
pub get failed (1)
exit code 1

Thank you guys

select the first line by default

There are multiple lines, I want to select the first line by default, how can I do it?

Thanks~~

只有折线图, 有没有曲线图啊, 还有能不能加个阴影?

同上

tooltip data outside plot

Hi, thanks for this wonderful project! The best chart library for flutter!
I 'm wondering if it's possible to have the data which is shown inside tooltips, rendered outside the plot, inside another widget for example. Something similar to this https://google.github.io/charts/flutter/example/behaviors/selection_callback_example.html

Thanks in advance

Failed to build application for the Web.

...
LBdeMacBook-Pro:flutter_athena lb$ flutter run -d chrome

Launching lib/main.dart on Chrome in debug mode...

AssetNotFoundException: syncfusion_flutter_charts|lib/charts.ddc.js
Error compiling dartdevc module:syncfusion_flutter_charts|lib/charts.ddc.js

packages/syncfusion_flutter_charts/src/circular_chart/utils/helper.dart:22:9: Error: Expected 0 type arguments.
final Point innerRadiusStartPoint = Point(
^^^^^
packages/syncfusion_flutter_charts/src/circular_chart/utils/helper.dart:22:47: Error: 'Point' is imported from both 'dart:math' and 'dart:ui'.
final Point innerRadiusStartPoint = Point(
^^^^^
packages/syncfusion_flutter_charts/charts.dart:7:1: Error: 'Point' is imported from both 'dart:math' and 'dart:ui'.
import 'dart:ui';
^^^^^
packages/syncfusion_flutter_charts/src/circular_chart/utils/helper.dart:25:9: Error: Expected 0 type arguments.
final Point innerRadiusEndPoint = Point(
^^^^^
packages/syncfusion_flutter_charts/src/circular_chart/utils/helper.dart:25:45: Error: 'Point' is imported from both 'dart:math' and 'dart:ui'.
final Point innerRadiusEndPoint = Point(
^^^^^
packages/syncfusion_flutter_charts/src/circular_chart/utils/helper.dart:29:9: Error: Expected 0 type arguments.
final Point radiusStartPoint = Point(
^^^^^
packages/syncfusion_flutter_charts/src/circular_chart/utils/helper.dart:29:42: Error: 'Point' is imported from both 'dart:math' and 'dart:ui'.
final Point radiusStartPoint = Point(
^^^^^

Failed after 234ms
Building application for the web... 10.1s
Failed to build application for the Web.

...

Issue with SplineSeries

Issue when used SplineSeries and value is near about zero then graph not display proper.

Line Series Y-Axis Title Alignment Issue

Description:

There is a minor issue introduced with the latest v4 version of the package. It seems that now AxisTitle alignment is measured as a function of the entire chart container height (possibly?) as opposed to just the y-axis (like it was before in v3).

primaryYAxis: NumericAxis(
  isVisible: true,
  title: AxisTitle(
    alignment: ChartAlignment.center,
    text: "Rate of Return (%)",
  ),
)

The following is for the same exact code, just updating from v3 to v4 of package - note how Rate of Return (%) gets shifted down (no longer centered about the y-axis) in v4.

---

Here is the output from v3:

Here is the output from v4:

Issue Resolution:

I am not sure why anyone would want AxisTitle alignment relative to the entire rendered chart container and not just the chart axis. The axis title should measure its alignment relative to the axis height.

Gesture issue when panning enabled SfCartesianChart is putted in LayoutBuilder

I found that the panning gesture cannot be handled so well when the chart is putted in LayoutBuilder. It works well if LayoutBuilder is removed.

Example:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class Datum {
  double y;
  DateTime x;

  Datum({
    this.x,
    this.y,
  });
}

List<Datum> data = [
  Datum(x: DateTime(2019, 8, 1), y: 20.1),
  Datum(x: DateTime(2019, 8, 3), y: 14.5),
  Datum(x: DateTime(2019, 8, 4), y: 17.7),
  Datum(x: DateTime(2019, 8, 5), y: 31.3),
  Datum(x: DateTime(2019, 8, 6), y: 12.8),
];

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
//      body: chart(),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return chart();
        },
      ),
    );
  }
}

SfCartesianChart chart() {
  return SfCartesianChart(
    series: [
      SplineSeries<Datum, DateTime>(
        dataSource: data,
        xValueMapper: (Datum datum, int index) => datum.x,
        yValueMapper: (Datum datum, int index) => datum.y,
        markerSettings: MarkerSettings(
          isVisible: true,
        ),
      ),
    ],
    primaryXAxis: DateTimeAxis(
      zoomPosition: 1,
      zoomFactor: 0.25,
    ),
    zoomPanBehavior: ZoomPanBehavior(
      enablePanning: true,
      zoomMode: ZoomMode.x,
    ),
  );
}

Intl library version issue

I have an error when upgrading to the latest syncfusion library version and this is the reason:

Because every version of flutter_driver from sdk depends on intl 0.15.8 and ProjectName depends on intl ^0.16.0, flutter_driver from sdk is forbidden.

flutter_driver which is main part of tests in Flutter is dependant on 0.15.8, and because of your mandatory version of 0.16.0 app can't use this library package. Official release branch of flutter doesn't fully support Intl 0.16.0 and your framework must not go above the release veresion and force it.

We as a company have bought a licence for this chart library, but are unable to utilize it due to a bug you introduce with versioning.

Add Limit Line

StackedColumnSeries not stacking properly

I've two different series with DateTime and a double value. i'm trying to achieve Stacked Column chart stacking double value from two different series. ( This Part is done).

The issue is stacked value of second series isn't on the top and there's no option to force push them to top.

https://imgur.com/a/8TiJsQI

    return <StackedColumnSeries<PlotData, DateTime>>[
      StackedColumnSeries<PlotData, DateTime>(
        dataSource: plotDay,
        name: "Day",
        color: Colors.blue[400],
        width: 0.4,
        yValueMapper: (PlotData data, _) => data.energy,
        xValueMapper: (PlotData data, _) => data.time,
       // borderRadius: BorderRadius.circular(5),
      ),
      StackedColumnSeries<PlotData, DateTime>(
        dataSource: plotNight,
        color: Colors.brown[400],
        width: 0.4,
         name: "Night",
        borderRadius: BorderRadius.circular(5),
        yValueMapper: (PlotData data, _) => data.energy,
        xValueMapper: (PlotData data, _) => data.time,
      ),
    ];
  }

zoomPanBehavior in example dynamic updates

im trying to add this behavior in your example file add_remove_series.dart:

...
zoomPanBehavior: ZoomPanBehavior(
        enablePinching: true,
        zoomMode: ZoomMode.x,
        enablePanning: true
    ),
...

after adding or removing line series, zoom of lines stops working
.. update...
it also stop working when we dont add or delete anything and start-stop zooming

Exception when hiding a series

When you tap on a legend to hide a series, then tap the graph - you get an exception :

The following NoSuchMethodError was thrown while dispatching a pointer event:
The method 'contains' was called on null.
Receiver: null
Tried calling: contains(Instance of 'Offset')
When the exception was thrown, this was the stack
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
#1 _ContainerArea._bindInteractionWidgets._findSeries
package:syncfusion_flutter_charts/…/base/chart_base.dart:1438
#2 _ContainerArea._bindInteractionWidgets.
package:syncfusion_flutter_charts/…/base/chart_base.dart:1532
#3 RenderPointerListener.handleEvent
package:flutter/…/rendering/proxy_box.dart:2683
#4 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent
package:flutter/…/gestures/binding.dart:198
...
Event: PointerDownEvent#4e7ef(position: Offset(238.7, 473.0), timeStamp: 89:38:41.622606, pointer: 96, kind: touch, device: 140607296318576, buttons: 1, down: true, pressure: 0.0, pressureMin: 0.0, pressureMax: 6.7, radiusMajor: 6.7, radiusMin: 5.0, radiusMax: 8.3, orientation: -1.6)
position: Offset(238.7, 473.0)
Target: RenderPointerListener#992e2 relayoutBoundary=up1
parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=307.0, 0.0<=h<=450.0)
size: Size(307.0, 450.0)
behavior: deferToChild
listeners: down, move, up

Bar Chart - is it possible to have different widths for different bars in the same chart

A chart like below but I would like to make the bar for Algeria really big but keep the others the the size they are now if that is at all possible

App Exits while Live update example is running

Running App in emulator, simulator, real device on Android or IOS, the APP crash while executing Live Update Example. Some times its get 15K+ point updates, sometimes not.

Bar Series Label Position When Transposed

Description:

Something happened from v3 to v4 that really messed up the data label positioning when the bar series is transposed - relevant snippets below:

SfCartesianChart(
    ...
    isTransposed: true,
    ...
    series: <BarSeries<ValueData, String>>[
    ...
      dataLabelSettings: DataLabelSettings(
        isVisible: true,
        position: CartesianLabelPosition.outer,
        labelPosition: LabelPosition.outside,
        alignment: ChartAlignment.center,
        textStyle: ChartTextStyle(
          fontSize: 8.5,
          fontWeight: FontWeight.bold,
        ),
          ),
    ...
    ],
)

The following is for the same exact code, just updating from v3 to v4 of package.

---

Here is the output from v3:

Here is the output from v4:

Issue Resolution:

Fix data labels and add more robust testing/checks for when bar series enables isTransposed: true

Bar Series Tooltip Format Y Value

Description:

For bar series data, for some reason the tooltip does not honor point.y. For example, the following code:

tooltipBehavior: TooltipBehavior(
  enable: true,
  header: '',
  format: "point.x: point.y",
)

The value of point.y is not parsed and updated with true value - instead the return is an empty string.

Issue Resolution:

I noticed in the source code that that is completed through a search and replace. Just need to update this to get the actual value so it can be used in the tooltip label.

Spline chart color

Is it possible to paint the space below the spline? Something like this:

Improved `EmptyPointMode.average`

I've been experimenting with using SyncFusion flutter charts with a data stream that has many nulls and is also not close to 0.
I wrote some code to improve the current EmptyPointMode.average handling by not just looking at the neighbor one to the left or right of an empty point, but iterating the entire list of points and only dividing by 2 if it's actually averaging between two points:

        case EmptyPointMode.average:
          double lastNonNullBefore = null;
          for(var i = pointIndex - 1; i >= 0; i--) {
            if(series._dataPoints[i].y != null) {
              lastNonNullBefore = series._dataPoints[i].y;
              break;
            }
          }

          double firstNonNullAfter = null;
          for(var i = pointIndex + 1; i < series._dataPoints.length; i++) {
            if(series._dataPoints[i].y != null) {
              firstNonNullAfter = series._dataPoints[i].y;
              break;
            }
          }

          if (lastNonNullBefore != null && firstNonNullAfter != null) {
            series._dataPoints[pointIndex].y = (lastNonNullBefore + firstNonNullAfter) / 2;
          } else if (lastNonNullBefore != null) {
            series._dataPoints[pointIndex].y = lastNonNullBefore;
          } else if (firstNonNullAfter != null) {
            series._dataPoints[pointIndex].y = firstNonNullAfter;
          } else {
            series._dataPoints[pointIndex].y = 0.0;
          }
          series._dataPoints[pointIndex].isEmpty = true;
          break;

Here the full diff:

Index: lib/src/chart/utils/helper.dart
<+>UTF-8
===================================================================
--- lib/src/chart/utils/helper.dart
+++ lib/src/chart/utils/helper.dart
@@ -989,24 +989,28 @@
           series._dataPoints[pointIndex].y = 0;
           break;
         case EmptyPointMode.average:
-          if (pointIndex == 0) {
-            ///Check the first point is null
-            pointIndex == series._dataPoints.length - 1
-                ?
-                ///Check the series contains single point with null value
-                series._dataPoints[pointIndex].y = 0
-                : series._dataPoints[pointIndex].y =
-                    ((series._dataPoints[pointIndex + 1].y) ?? 0) / 2;
-          } else if (pointIndex == series._dataPoints.length - 1) {
-            ///Check the last point is null
-            series._dataPoints[pointIndex].y =
-                ((series._dataPoints[pointIndex - 1].y) ?? 0) / 2;
-          } else {
-            series._dataPoints[pointIndex].y =
-                (((series._dataPoints[pointIndex - 1].y) ?? 0) +
-                        ((series._dataPoints[pointIndex + 1].y) ?? 0)) /
-                    2;
+          double lastNonNullBefore = null;
+          for(var i = pointIndex - 1; i >= 0; i--) {
+            if(series._datapoints[i].y != null) {
+              lastNonNullBefore = series._datapoints[i].y;
+              break;
+            }
+          }
 
+          double firstNonNullAfter = null;
+          for(var i = pointIndex + 1; i < series._dataPoints.length; i++) {
+            if(series._dataPoints[i].y != null) {
+              firstNonNullAfter = series._dataPoints[i].y;
+              break;
+            }
+          }
+
+          if (lastNonNullBefore != null && firstNonNullAfter != null) {
+            series._dataPoints[pointIndex].y = (lastNonNullBefore + firstNonNullAfter) / 2;
+          } else if (lastNonNullBefore != null) {
+            series._dataPoints[pointIndex].y = lastNonNullBefore;
+          } else if (firstNonNullAfter != null) {
+            series._dataPoints[pointIndex].y = firstNonNullAfter;
+          } else {
+            series._dataPoints[pointIndex].y = 0.0;
           }
           series._dataPoints[pointIndex].isEmpty = true;
           break;

Would it be possible to integrate these changes and what's the preferred way to submit PRs to the library itself?

X-Axis does not adjust itself when setting a ColumnSeries width

As can be seen from the snapshot - when width is set for a column series, the x-axis fails to adjust properly.

Can't setState on onTrackballPositionChanging

Hi, I've been really enjoying working with this library. I have only come across one issue, when I try to use the onTrackballPositionChanging (or any other UI event handler), I get exceptions, because it doesn't like that I am trying to save the currently selected point to state with setState().
I've done some reading, and this is not recommended by the flutter team on: https://api.flutter.dev/flutter/widgets/CustomPaint-class.html

Because custom paint calls its painters during paint, you cannot call setState or markNeedsLayout during the callback (the layout for this frame has already happened).

Is there any way that these UI event handlers like onTrackballPositionChanging could be called from somewhere else? otherwise, I don't even know what I could use these events for...

Memory leak in SfCartesianChart, SfRadialGauge, probably others when animation is enabled.

I've noticed a memory leak when animation is enabled, this affects at least SfRadialGauge and I believe other charts as well.

Demonstration app exhibiting the issue, https://gist.github.com/muhleder/9df9cf63ef4da9c7b7d5f4e62ecb8010
This is the flutter sample counter app, with a syncfusion radial guage from the examples. The guage is rebuilt when the counter increments.

The memory leak can be observed by opening devtools, going to the memory tab, pressing GC, then Snapshot to view current memory state, hitting the counter increment button a bunch of times, then GC/Snapshot again to view the new memory state.

The number of chart/guage objects in memory increases linearly with the counter.

Screenshot show result of rebuild 45 times, I've tested up to 200 rebuilds and memory is still not released.

Setting enableAnimation to false fixes the issue in this demo.