first time asking a question here. I would like to how to remove the extra spacing around the SfCircularChart from syncfusion_flutter_charts package.
Container(
// Wrapping around fixed size Container
width: 200,
height: 200,
color: Colors.red,
child: SfCircularChart(
// Setting the margin to zero
margin: EdgeInsets.zero,
series: <CircularSeries>[
PieSeries<Category, String>(
dataSource: dailyEarningList,
xValueMapper: (Category data, _) => data.name,
yValueMapper: (Category data, _) => data.value,
dataLabelSettings: DataLabelSettings(
isVisible: true,
),
),
],
),
)
Image
PieSeries<Category, String>(
radius: "100",
dataSource: [Category(["a", "b", "c"])],
xValueMapper: (Category data, _) => "d",
yValueMapper: (Category data, _) => 1,
dataLabelSettings: const DataLabelSettings(
isVisible: true,
),
),
The library has a radius parameter. It's a string. I do not understand why it's a string. In your example if you set it to "100", it will match the container.
Related
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;
}
}
I'm using RadialBarSeries() inside SfCircularChart().
After calling Legend() (in the property legend in SfCircularChart()),
I got the following:
I want to change these circular icons to normal square icons.
This is my code:
child: SfCircularChart(
legend: Legend(
isVisible: true,
overflowMode: LegendItemOverflowMode.wrap,
position: LegendPosition.left,
),
series: <CircularSeries>[
RadialBarSeries<Qualification, String>(
dataLabelSettings: DataLabelSettings(isVisible: true),
dataSource: _qualifications,
xValueMapper: (Qualification data, _) => data.name,
yValueMapper: (Qualification data, _) => data.value
)
],
)
You can do it as follows.
child: SfCircularChart(
title: ChartTitle(text: 'Advances'),
palette: const <Color>[
Color(0xFFffc107),
Color(0xFF0386E8),
],
legend: Legend(
isVisible: true,
overflowMode: LegendItemOverflowMode.wrap,
position: LegendPosition.left,
),
tooltipBehavior: _tooltipData,
series: <CircularSeries>[
RadialBarSeries<ChartData, String>(
legendIconType: LegendIconType.seriesType,
dataSource: _chartData,
xValueMapper: (ChartData data, _) => data.name,
yValueMapper: (ChartData data, _) => data.value,
dataLabelSettings: const DataLabelSettings(
isVisible: true,
),
enableTooltip: true,
cornerStyle: CornerStyle.endCurve,
maximumValue: 100)
],
),
legendIconType: specifies the shape of the legend.
legendIconType: LegendIconType.seriesType,
legendIconType: LegendIconType.circle,
see more here
Documentation: here
Now: My goal:
I am using the syncfusion_flutter_charts package to display the chart and that table view is so annoying. How to remove that? or how to do this kind of chart using custom widgets?
// child of some widgets like container
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
legend: Legend(isVisible: false),
tooltipBehavior: TooltipBehavior(enable: true),
series: <ChartSeries<_SalesData, String>>[
LineSeries<_SalesData, String>(
dataSource: data,
xValueMapper: (_SalesData sales, _) =>sales.year.toString(),
yValueMapper: (_SalesData sales, _) =>sales.value,
),
],
),
You can customize you chart, You can use this. I use map for test and date for example ({"val": 100, "year": 2000}), so you can use your favorite type, Set or anything else.
SfCartesianChart(
primaryXAxis: CategoryAxis(
isVisible: false,
),
primaryYAxis: CategoryAxis(
isVisible: false,
),
plotAreaBorderWidth: 0,
backgroundColor: Colors.grey[200],
legend: Legend(isVisible: false),
tooltipBehavior: TooltipBehavior(enable: true),
series: <ChartSeries<Map, String>>[
FastLineSeries<Map, String>(
width: 2,
dataSource: [{"val": 100, "year": 2000}, ...],
color: Colors.green,
yValueMapper: (Map sales, _) => sales['val'],
xValueMapper: (Map sales, _) => sales['year'].toString(),
),
],
),
I am using this plugin for creating a pie chart. The label are shown perfectly when there are only 2 divisions but when they increase only 2 labels are shown rest are not.
My Code:-
final List<ChartData> chartData=[ChartData('abc;, 15),ChartData('uvw', 15),ChartData('xyz', 15)];
class ChartData {
ChartData(this.x, this.y, [this.color]);
final String x;
final double y;
final Color color;
}
SfCircularChart(
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataSource: chartData,
pointColorMapper:(ChartData data, _) => data.color,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
startAngle: 90,
endAngle: 360,
dataLabelMapper: (ChartData data, _) => data.x,
radius: '45%',
dataLabelSettings: DataLabelSettings(
isVisible: true,
labelPosition: ChartDataLabelPosition.outside,
labelAlignment: ChartDataLabelAlignment.auto,
textStyle: GoogleFonts.gugi(
textStyle: TextStyle(
),
),
),
)
]
),
I am trying to add another line in the time series chart. And currently I did not find anyway to do this. I am using chart_flutter dependencies.
Here is my chart code look like:
charts.TimeSeriesChart(
series,
animate: true,
defaultRenderer: charts.LineRendererConfig(
includeArea: true,
includeLine: true,
),
dateTimeFactory: const charts.LocalDateTimeFactory(),
behaviors: [
charts.PanAndZoomBehavior(),
charts.SeriesLegend(
position: charts.BehaviorPosition.top,
horizontalFirst: false,
cellPadding: EdgeInsets.only(left: 80, top: 10, bottom: 4.0),
),
charts.SelectNearest(
eventTrigger: charts.SelectionTrigger.tap
),
charts.LinePointHighlighter(
symbolRenderer: CustomCircleSymbolRenderer(size: size),
),
],
selectionModels: [
charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: (charts.SelectionModel model) {
if(model.hasDatumSelection) {
final tankVolumeValue = model.selectedSeries[0].measureFn(model.selectedDatum[0].index).round();
final dateValue = model.selectedSeries[0].domainFn(model.selectedDatum[0].index);
CustomCircleSymbolRenderer.value = '$dateValue \n $tankVolumeValue';
}
})
]),
Any idea on how to add another line is welcome.
The answer above is simply that you can add more data in the variable that hold the data. Like below:
charts.Series(
id: 'Tank 1',
data: some data here,
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (TankPing ping, _) => some data,
measureFn: (TankPing ping, _) => some data
),
charts.Series(
id: 'Tank 1',
data: some data here,
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (TankPing ping, _) => some data,
measureFn: (TankPing ping, _) => some data
)