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
Related
I have tried creating this bar graph using SfCartesianChart, and have been able to complete 95% of it, but unable to remove the middle labels.
...
Lobo,
Greetings from Syncfusion.
We have validated your query and we have achieved your requirement by using the axisLabelFormatter callback in axis. We have rendered the first and last axis labels alone using this axisLabelFormatter callback, and its invoked while rendering each axis label in the chart. Please refer the following code snippet.
Code snippet :
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Syncusion flutter charts'),
centerTitle: true,
),
body: SfCartesianChart(
primaryXAxis: CategoryAxis(
axisLabelFormatter: (AxisLabelRenderDetails details) {
String text = details.value == 0
? 'Jun 2022'
: details.value == chartData.length - 1
? 'Mar 2022'
: "";
return ChartAxisLabel(text, details.textStyle);
},
majorGridLines: const MajorGridLines(width: 0),
majorTickLines: const MajorTickLines(width: 0),
),
primaryYAxis: NumericAxis(
isVisible: false,
majorTickLines: const MajorTickLines(width: 0),
majorGridLines: const MajorGridLines(width: 0),
),
series: <ChartSeries<ChartSampleData, String>>[
ColumnSeries<ChartSampleData, String>(
dataSource: chartData,
dataLabelSettings: const DataLabelSettings(isVisible: true),
xValueMapper: (ChartSampleData sales, _) => sales.x,
yValueMapper: (ChartSampleData sales, _) => sales.y),
],
),
),
);
}
}
class ChartSampleData {
ChartSampleData(this.x, this.y);
final String? x;
final double? y;
}
final List<ChartSampleData> chartData = [
ChartSampleData('jan', 50.56),
ChartSampleData('Feb', 49.42),
ChartSampleData('Mar', 53.21),
ChartSampleData('Apr', 64.78),
ChartSampleData('May', 59.97),
];
ScreenShot:
Syncfusion Custom Axis Label
Regards,
Lokesh Palani.
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))
];
}
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(),
),
],
),