Change corner radius in curved CornerStyle in (Syncfusion) Doughnut Chart - flutter

I am using syncfusion Pie charts in flutter. I want know know if there is a way to change the scale of the chart inside the parent container without change parent size,
and how to change the radius of the corner when the CornerStyle value is bothCurved
this is my code:
class HalfDoughnutChart extends StatelessWidget {
final List<ChartData> chartData = [
ChartData('David', 30, Color.fromRGBO(9, 0, 136, 1)),
ChartData('Mark', 38, Color.fromRGBO(147, 0, 119, 1)),
ChartData('Test', 34, Color.fromRGBO(228, 0, 124, 1)),
ChartData('Test', 52, Color.fromRGBO(255, 189, 57, 1))
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
color: Colors.grey,
height: 250,
width: 500,
child: SfCircularChart(
margin: EdgeInsets.all(0),
legend: Legend(isVisible: true,position: LegendPosition.right),
annotations: <CircularChartAnnotation>[
CircularChartAnnotation(
widget:
Container(
child: const Text('Annotation')
), radius: '2%',
verticalAlignment: ChartAlignment.far,
),
],
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataLabelMapper: (ChartData data, _) => "${data.y.toInt()} %",
dataSource: chartData,
enableSmartLabels: true,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
pointColorMapper: (ChartData data, _) => data.color,
radius: '70%',
innerRadius: '65%',
startAngle: 270, // Starting angle of doughnut
endAngle: 90,
dataLabelSettings: DataLabelSettings(
// Renders the data label
isVisible: true
),
// Corner style of doughnut segment
cornerStyle: CornerStyle.bothCurve)
]))));
}
}
class ChartData {
ChartData(this.x, this.y, [this.color]);
final String x;
final double y;
final Color color;
}
find chart image in below link:
https://ibb.co/r7MjNBB
thank you

Thanks for the interest in our Flutter charts widget. We have analyzed your queries and find the responses below.
Query #1 Is there a way to change the scale of the chart inside the parent container without change the parent size.
You can use the radius property to customize the size of the chart without changing its parent size. To know more about our charts, please refer to the help document.
Query #2 How to change the radius of the corner when the CornerStyle value is bothCurved?
As of now, you are unable to change the corner radius of each point however you can customize the corner style using the enum property cornerStyle. To know more about rounded corners, find the user guide.
Kindly revert us if you need any further assistance.
Thanks,
Dharanitharan. P

Related

Using sync fusion for live charts in flutter, I set up a marker, and after the graph updates once it just disappears

Marker disappears after the live chart updates once
I tried 3 main ways.
The first one was using setState, that did not work.
The second one was using updateDataSource, took inspiration from https://github.com/SyncfusionExamples/how-to-create-a-real-time-flutter-chart-in-10-minutes/blob/main/lib/main.dart, but it seems that the graph doesnt appear for me in this technique.
Lastly, the only thing that actually shows the graph for me is using stream builder, but with stream builder the marker only appears for a split second before the graph updates.
keep in mind i couldnt copy paste this code, it was on a different computer not connected to the internet, thus I had to type it on my own, so there might be small typos here and there.
class _GraphState extends State<Graph>{
#override
Widget build(BuildContext context{
final pointsProvider = Provider.of(PointsProvider>(context);
Stream<List<Point>> stream() async*{
while (true){
await Future<void>delayed(Duration(miliseconds: 200));
await pointsProvider.fetchPoints();
yield pointsProvider.points as List<Point>;
}
}
return StreamBuilder(
stream: stream(),
builder: (context, snapshot){
return Container(
margin: EdgeInsets.symmetric(horizontal: 40),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7)),
width: 960
height: 360,
child: SfCartesianChart(
onMarkerRender: (args){
if (args.pointsIndex! != 50){
args.markerHeight = 0;
args.markerWidth = 0;
}
},
plotAreaBackgroundColor: Color.fromRGBO(46, 46, 46, 1),
series: <ChartSeries>[
LineSeries<Point, double>(
markerSettings: MarkerSettings(
isVisible: true,
height: 40,
color: Colors.black,
width: 20,
),
color: Colors.yellow,
dataSource:
pointsProvider.points as List<Point>,
xValueMapper: (Point data, _) => point.x,
yValueMapper: (Point data, _) => point.y,
),
],
),
);
},
);
}
}

How to override series level markerSettings from SfCartesianChart()?

I have a use case where I have multiple Spline charts in the same picture (see image). As you can see in the image, I need to show a flag marker only in the center curve, but not on the adjacent graphs. I have implemented similar behavior in the image, but I'm not able to remove the marker from the 1st & 3rd graph.
#override
Widget build(BuildContext context) {
final chartData = <_ChartData>[...];
final chartData2 = <_ChartData2>[...];
final chartData3 = <_ChartData3>[...];
return SfCartesianChart(
/// ... Some other props
trackballBehavior: _getTrackBallBehavior(),
series: <ChartSeries>[
SplineAreaSeries<_ChartData2, int>(
dataSource: chartData2,
xValueMapper: (_ChartData2 data, _) => data.x,
yValueMapper: (_ChartData2 data, _) => data.y,
/// INDIVIDUAL LEVEL MARKER SETTING --- not overriding the global one below
markerSettings: const TrackballMarkerSettings(
markerVisibility: TrackballVisibilityMode.hidden,
shape: DataMarkerType.none,
),
),
SplineSeries<_ChartData, int>(
dataSource: chartData,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y,
),
SplineAreaSeries<_ChartData3, int>(
dataSource: chartData3,
xValueMapper: (_ChartData3 data, _) => data.x,
yValueMapper: (_ChartData3 data, _) => data.y,
),
],
);
}
TrackballBehavior _getTrackBallBehavior() {
return TrackballBehavior(
enable: true,
/// .... some other props
tooltipSettings: const InteractiveTooltip(
enable: true,
arrowLength: 0,
arrowWidth: 0,
),
/// GLOBAL MARKER SETTING
markerSettings: const TrackballMarkerSettings(
markerVisibility: TrackballVisibilityMode.visible,
shape: DataMarkerType.image,
width: 10,
height: 10,
image: CachedNetworkImageProvider(Images.targetFlagWhite),
),
builder: (ctx, details) {
if (details.seriesIndex == 0 || details.seriesIndex == 2)
return Text('Rs.1304', style: AppText.text14w600Title);
return Container(
width: 83.w,
height: 28.h,
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 2.h),
decoration: BoxDecoration(
/// Some decore props
),
child: Text('Rs..1344', style: AppText.text14w600Title),
);
},
);
}
How can achieve that? Or is there a workaround for it?
I suggest you use the onTrackballPositionChanging callback to hide the trackball marker for the specific series 1st and 3rd. In this callback you can get or set the x and y position for each marker, here we have set the marker x and y position value as double.infinity when the series index is 0 and 2 otherwise it is in actual value. We have attached the code snippet below for your reference.
Screenshot:
Code snippet:
onTrackballPositionChanging: (args) {
if (args.chartPointInfo.seriesIndex != 1) {
args.chartPointInfo.markerXPos = double.infinity;
args.chartPointInfo.markerYPos = double.infinity;
}
}

how to flutter syncfusion bar chart background grid line delete?

how to flutter syncfusion bar chart background grid line delete?
use pub.dev // syncfusion_flutter_charts 19.4.56
https://pub.dev/packages/syncfusion_flutter_charts
< image grid line (grey color line) >
my code
return SfCartesianChart(
title: ChartTitle(text: totalTaxString, textStyle: const TextStyle(fontWeight: FontWeight.bold)),
primaryXAxis: CategoryAxis(
maximumLabelWidth: MediaQuery.of(context).size.width > 480 ? MediaQuery.of(context).size.width * 0.3 : 100,
labelStyle: const TextStyle(overflow: TextOverflow.ellipsis)
// isVisible: false
),
primaryYAxis: CategoryAxis(
isVisible: false
),
series: <BarSeries>[
BarSeries<ModelPioChartData, String>(
dataSource: listPioChartData,
pointColorMapper:(ModelPioChartData data, _) => data.color,
xValueMapper: (ModelPioChartData data, _) => data.x,
yValueMapper: (ModelPioChartData data, _) => data.y,
dataLabelMapper: (ModelPioChartData data, _) {
if(data.y.toStringAsFixed(0).length > 4) {
return "${data.y/10000}์กฐ ์›";
} else {
return "${data.y.toStringAsFixed(0)}์–ต ์›";
}
},
dataLabelSettings: const DataLabelSettings(
isVisible: true
),
enableTooltip: true,
),
],
);
I suggest you use the majorGridLines property in the axis, you can customize the width, color, and size of the major grid line. We have attached the code snippet and UG below for your reference.
primaryXAxis:
CategoryAxis(
majorGridLines: const MajorGridLines(width: 0)
),
UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#grid-lines-customization

Flutter: How can I enable scrolling for syncfusion chart while also having PanAndZoomBehaviour enabled?

I'm using synfusion charts https://pub.dev/packages/syncfusion_flutter_charts
for my project so far they have great feature but when I try to scroll from it doesn't register the gesture when PanAndZoomBehaviour is enabled. And from there support page I found out that it is done purposefully, so how can I override the gesture for this chart so that I can enable scrolling.
I'm using SingleChildScrollView to scroll in another page.
code,
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:practice2/models/heart_rate.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class HeartRateNormalChart extends StatelessWidget {
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Container(
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(dateFormat: DateFormat('MMM'),),
primaryYAxis: NumericAxis(opposedPosition: true),
zoomPanBehavior: ZoomPanBehavior(enablePinching: true),
tooltipBehavior: TooltipBehavior(
enable: true,
header: 'Heart Rate (bpm)',
),
series: <ChartSeries>[
ScatterSeries(
animationDuration: 1500,
pointColorMapper: (heart, _) {
if (heart.bpm < 60) {
return Color(0xffFF6262);
} else {
return Color(0xff110E6B);
}
},
dataSource: <HeartRate>[
HeartRate(month: DateTime(2020, DateTime.february, 1), bpm: 70),
HeartRate(month: DateTime(2020, DateTime.july, 12), bpm: 72),
HeartRate(month: DateTime(2020, DateTime.august, 15), bpm: 55),
HeartRate(
month: DateTime(2020, DateTime.november, 24), bpm: 65),
HeartRate(
month: DateTime(2020, DateTime.december, 31), bpm: 80),
],
markerSettings:
MarkerSettings(height: width * 0.04, width: width * 0.04),
xValueMapper: (heart, _) => heart.month,
yValueMapper: (heart, _) => heart.bpm.ceil(),
enableTooltip: true,
),
]),
);
}
}
The scrolling gesture is prohibited purposefully while user interactions are enabled in the following scenarios:
Crosshair or trackball enabled with a single tap as activation mode
Zooming or panning enabled with modes other than the selection zooming
As of now, this is our default behavior of the charts and we already logged feedback for this feature request. We are not able to provide a specific timeline for this since this is not on our planned list, but it will come in any of our upcoming releases. For more information, you can follow this incident.

SfCartesianChart chart doesn't show after updated data from json in dart

This is SfCartesianChart and I want to make it dynamic as per the rest API data given below but when I put the dynamic data to it, the graph shows only null in the legend text and no data shown but I've posted the required data. Kindly help me it's right or not.
SfCartesianChart _getSpacingColumnChart() {
return SfCartesianChart(
// borderColor: Colors.red,
// borderWidth: 2,
// Sets 15 logical pixels as margin for all the 4 sides.
margin: EdgeInsets.all(0),
plotAreaBorderWidth: 0,
title: ChartTitle(
// text: 'Inventory - Finished Products',
// textStyle: TextStyle(
// fontSize: 18.0,
// color: Colors.blueAccent,
// ),
text: widget.title,
// backgroundColor: Colors.lightGreen,
// borderColor: Colors.blue,
borderWidth: 2,
// Aligns the chart title to left
alignment: ChartAlignment.center,
// ignore: deprecated_member_use
textStyle: ChartTextStyle(
color: Colors.blueAccent,
// fontFamily: 'Roboto',
// fontStyle: FontStyle.italic,
fontSize: 11,
)),
primaryXAxis: CategoryAxis(
majorGridLines: MajorGridLines(width: 0),
),
primaryYAxis: NumericAxis(
// maximum: 150,
// minimum: 0,
interval: 25,
axisLine: AxisLine(width: 0),
majorTickLines: MajorTickLines(size: 0)),
palette: <Color>[
Color.fromRGBO(15, 207, 105, 1.0),
Color.fromRGBO(242, 209, 106, 1.0),
Color.fromRGBO(0, 72, 205, 1.0)
],
series: _getDefaultColumn(),
legend: Legend(
isVisible: true,
// Legend will be placed at the bottom
position: LegendPosition.bottom,
// Overflowing legend content will be wraped
overflowMode: LegendItemOverflowMode.wrap),
// tooltipBehavior: TooltipBehavior(
// enable: true,
// canShowMarker: true,
// header: '',
// format: 'point.y marks in point.x'),
tooltipBehavior: TooltipBehavior(enable: true),
);
}
List<ColumnSeries<ColumnChartDataModel, String>> _getDefaultColumn() {
List<ColumnChartDataModel> chartData = <ColumnChartDataModel>[];
for (Map i in widget.data)
chartData
.add(ColumnChartDataModel.fromJson(i) // Deserialization step #3
);
print('chartDataNewchartDataNew=>${widget.data}');
return <ColumnSeries<ColumnChartDataModel, String>>[
ColumnSeries<ColumnChartDataModel, String>(
/// To apply the column width here.
width: isCardView ? 0.8 : _columnWidth,
/// To apply the spacing betweeen to two columns here.
spacing: isCardView ? 0.2 : _columnSpacing,
animationDuration: 3000,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(2), topRight: Radius.circular(2)),
dataSource: chartData,
// color: const Color.fromRGBO(252, 216, 20, 1),
xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
yValueMapper: (ColumnChartDataModel sales, _) => sales.y,
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelAlignment: ChartDataLabelAlignment.top,
textStyle: TextStyle(fontSize: 10, color: Colors.white)),
name: 'In'),
ColumnSeries<ColumnChartDataModel, String>(
dataSource: chartData,
width: isCardView ? 0.8 : _columnWidth,
spacing: isCardView ? 0.2 : _columnSpacing,
animationDuration: 3000,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(2), topRight: Radius.circular(2)),
// color: const Color.fromRGBO(169, 169, 169, 1),
xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
yValueMapper: (ColumnChartDataModel sales, _) =>
sales.secondSeriesYValue,
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelAlignment: ChartDataLabelAlignment.top,
textStyle: TextStyle(fontSize: 10, color: Colors.white)),
name: 'Out'),
ColumnSeries<ColumnChartDataModel, String>(
dataSource: chartData,
width: isCardView ? 0.8 : _columnWidth,
spacing: isCardView ? 0.2 : _columnSpacing,
animationDuration: 3000,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(2), topRight: Radius.circular(2)),
// color: const Color.fromRGBO(205, 127, 50, 1),
xValueMapper: (ColumnChartDataModel sales, _) => sales.x,
yValueMapper: (ColumnChartDataModel sales, _) =>
sales.thirdSeriesYValue,
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelAlignment: ChartDataLabelAlignment.top,
textStyle: TextStyle(fontSize: 10, color: Colors.white)),
name: 'Stock')
];
}
this page is the model data
Model Data
/// Package import
import 'package:flutter/material.dart';
/// Base class of the sample's stateful widget class
abstract class ColumnChartModel extends StatefulWidget {
/// base class constructor of sample's stateful widget class
const ColumnChartModel({Key key}) : super(key: key);
}
/// Base class of the sample's state class
abstract class ColumnChartModelState extends State<ColumnChartModel> {
/// Holds the information of current page is card view or not
bool isCardView;
#override
void initState() {
isCardView = true;
super.initState();
}
/// Get the settings panel content.
Widget buildSettings(BuildContext context) {
return null;
}
}
///Chart sample data
class ColumnChartDataModel {
/// Holds the datapoint values like x, y, etc.,
ColumnChartDataModel(
this.x,
this.y,
this.xValue,
this.yValue,
this.secondSeriesYValue,
this.thirdSeriesYValue,
this.pointColor,
this.size,
this.text,
this.open,
this.close,
this.low,
this.high,
this.volume);
/// Holds x value of the datapoint
final dynamic x;
/// Holds y value of the datapoint
final num y;
/// Holds x value of the datapoint
final dynamic xValue;
/// Holds y value of the datapoint
final num yValue;
/// Holds y value of the datapoint(for 2nd series)
final num secondSeriesYValue;
/// Holds y value of the datapoint(for 3nd series)
final num thirdSeriesYValue;
/// Holds point color of the datapoint
final Color pointColor;
/// Holds size of the datapoint
final num size;
/// Holds datalabel/text value mapper of the datapoint
final String text;
/// Holds open value of the datapoint
final num open;
/// Holds close value of the datapoint
final num close;
/// Holds low value of the datapoint
final num low;
/// Holds high value of the datapoint
final num high;
/// Holds open value of the datapoint
final num volume;
// factory ColumnChartDataModel.fromJson(Map<String, dynamic> json) => ColumnChartDataModel(
// x: json["x"],
// y: json["y"],
// secondSeriesYValue: json["secondSeriesYValue"],
// thirdSeriesYValue: json["thirdSeriesYValue"],
// );
factory ColumnChartDataModel.fromJson(Map<String, dynamic> parsedJson) {
return ColumnChartDataModel(
parsedJson['x'].toString(),
parsedJson['y'] as num,
parsedJson['secondSeriesYValue'] as num,
parsedJson['thirdSeriesYValue'] as num,
parsedJson['xValue'] as dynamic,
parsedJson['yValue'] as num,
parsedJson['pointColor'] as Color,
parsedJson['size'] as num,
parsedJson['text'] as String,
parsedJson['open'] as num,
parsedJson['close'] as num,
parsedJson['low'] as num,
parsedJson['high'] as num,
parsedJson['volume'] as num);
}
}
widget.data == [{productName: abcd-4, totalIn: 10, totalOut: 40, currentStock: 270}, {productName: afegwt-10 Pairs, totalIn: 110, totalOut: 80, currentStock: 530}]
widget.title == "some text"
Please help me..
Thankx in advance.
In the json data the key names should be matched as per the data model created. or you have to put separate instead of .fromJson().