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(),
),
],
),
Related
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.
Syncfuction Hilo Series has high and low values and it automatically shows values as high and low label names. I want to change these label names to another language. Here is part of code of my work and how it looks like tooltip.
SfCartesianChart(
title: ChartTitle(
text: 'En düşük ve en yüksek oranlar',
alignment: ChartAlignment.near,
textStyle: TextStyle(
color: blueLogo,
fontSize: 12.sp,
)),
legend: Legend(
isVisible: true,
position: LegendPosition.top,
overflowMode: LegendItemOverflowMode.wrap),
tooltipBehavior: TooltipBehavior(enable: true),
primaryXAxis: CategoryAxis(
labelIntersectAction:
AxisLabelIntersectAction.multipleRows),
primaryYAxis: NumericAxis(maximum: 150, plotBands: [
PlotBand(
start: 80,
end: 80,
borderColor: Colors.red,
borderWidth: 1,
),
PlotBand(
start: 120,
end: 120,
borderColor: Colors.red,
borderWidth: 1,
)
]),
series: <ChartSeries>[
HiloSeries<ChartData, String>(
markerSettings: const MarkerSettings(isVisible: true),
name: 'Oranlar',
enableTooltip: true,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.unit,
lowValueMapper: (ChartData data, _) => data.low,
highValueMapper: (ChartData data, _) => data.high)
])
Output of this code sample
How can I change these high and low label names?
You can change the TooltipBehaviour of the chart and construct the tooltip widget yourself. Official syncfusion documentation is here.
Need to show no data available text in place of bar which has zero value , y axis labels are
string and x axis are integers
please refer below for the 1st image is acutal result and 2nd image is expected result . 1st image in which empty place which has zero value instead of empty place need to show no data available text
SfCartesianChart(
crosshairBehavior: _crosshairBehavior,
primaryXAxis: CategoryAxis(
majorTickLines: MajorTickLines(size: 20, width: 0),
axisBorderType: AxisBorderType.withoutTopAndBottom,
labelAlignment: LabelAlignment.center,
borderWidth: 2.0,
labelStyle: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w500),
//maximumLabelWidth: 100,
labelPosition: ChartDataLabelPosition.outside,
borderColor: Colors.blueGrey[800]),
primaryYAxis: CategoryAxis(
plotBands: <PlotBand>[
PlotBand(
isVisible: widget.isFleetAverageVisible,
start: 30,
end: 29,
borderWidth: 0.3,
borderColor: Colors.black,
)
],
interval: 25,
maximumLabels: 4,
maximum: 100,
minimum: 0,
majorTickLines: MajorTickLines(size: 15, width: 0),
majorGridLines: MajorGridLines(dashArray: [5, 5]),
),
series: stackedWidget(sortSelected != null
? sortSelected == true
? SortingOrder.ascending
: SortingOrder.descending
: SortingOrder.none),
legend: Legend(
isVisible: true,
position: LegendPosition.bottom,
overflowMode: LegendItemOverflowMode.wrap,
),
onLegendTapped: (LegendTapArgs args) {
},
),
List<ChartSeries> stackedWidget(SortingOrder sortingOrder) {
return <ChartSeries>[
StackedBarSeries<ChartData, String>(
sortingOrder: sortingOrder,
legendIconType: LegendIconType.horizontalLine,
legendItemText: "series1",
width: 0.3,
spacing: 0.2,
dataSource: chartData,
//list of data
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y1,
sortFieldValueMapper: (ChartData sales, _) => sales.y1,
color: Color.fromRGBO(51, 102, 255, 1))
];
}
Try giving the DataLabelSettings() to the dataLabelSettings: property on StackedBarSeries():
List<ChartSeries> stackedWidget(SortingOrder sortingOrder) {
return <ChartSeries>[
StackedBarSeries<ChartData, String>(
dataLabelSettings: DataLabelSettings(
builder: (
data,
point,
series,
pointIndex,
seriesIndex,
) {
if (chartData[pointIndex].y == 0 || chartData[pointIndex].y == null) {
return Row(children: const [
Icon(Icons.warning_amber_outlined),
Text("No data available"),
]);
} else {
return const SizedBox();
}
},
isVisible: true,
),
sortingOrder: sortingOrder,
legendIconType: LegendIconType.horizontalLine,
legendItemText: "series1",
width: 0.3,
spacing: 0.2,
dataSource: chartData,
//list of data
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y1,
sortFieldValueMapper: (ChartData sales, _) => sales.y1,
color: Color.fromRGBO(51, 102, 255, 1))
];
}
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
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