Flutter offers an efficient way to display data with charts using the syncfusion_flutter_charts library. Among the various chart types, the bar chart is widely used for data visualization. The SfCartesianChart widget provides several properties that control the appearance and behavior of the chart. This article explores the key properties of both the SfCartesianChart widget and the BarSeries, detailing how they influence the design and functionality of the chart.
1. SfCartesianChart Widget Properties
The SfCartesianChart widget serves as the core component to render the bar chart. Multiple properties allow for customization of the chart’s layout, axes, and overall appearance. Below is a breakdown of the essential properties related to chart layout and axis configuration.
Chart Appearance and Layout
- margin:
The margin property defines the space surrounding the entire chart. Setting this to EdgeInsets.zero ensures no extra space around the chart, maximizing the available area for rendering. - plotAreaBorderWidth:
This property determines the width of the border surrounding the plot area, the region containing the actual chart. By setting it to 0, the border is removed entirely, leaving the chart free from unnecessary lines.
Axis Configuration
- primaryYAxis:
This property configures the vertical (Y) axis. Important sub-properties include:- isVisible: When set to false, the Y-axis becomes invisible.
- borderWidth: Setting this to 0 removes the Y-axis border.
- majorGridLines: By setting this to width: 0, any grid lines on the Y-axis are eliminated.
- axisLine: A width of 0 removes the Y-axis line itself.
- primaryXAxis:
The primaryXAxis property manages the horizontal (X) axis, which is used to display categories. Key configurations for the X-axis include:- rangePadding: Set to ChartRangePadding.none to remove padding between the first and last categories, ensuring the categories are aligned to the edges of the chart.
- isVisible: Set to true to make the X-axis visible.
- majorGridLines: A width of 0 removes any grid lines along the X-axis.
- majorTickLines: Setting the size to 0 removes the tick marks along the X-axis.
- isInversed: When set to true, the order of the X-axis categories is reversed, with the first category appearing on the right and the last one on the left.
- axisLine: Setting the width to 0 eliminates the X-axis line.
- axisLabelFormatter: This allows for custom formatting of the axis labels, such as adjusting the font size, which is set to 19 in this example.
Legend Configuration
- legend:
The legend is used to display the names of the series, though it is hidden in this chart:- isVisible: Set to false to hide the legend.
- position: This setting defines the legend’s position if it were visible, but since it is hidden, this property does not impact the chart’s display.
2. BarSeries Properties
The BarSeries is responsible for rendering the bars in the chart. This component defines the visual appearance and data mapping for the bars. Below are the key properties that control the bar series:
Data Label Settings
- dataLabelSettings:
This property configures how the data labels are displayed on the bars:- margin: Set to EdgeInsets.zero, meaning there is no additional margin around the data labels.
- isVisible: Set to true to make the data labels visible on the chart.
- labelAlignment: Set to ChartDataLabelAlignment.outer to place the labels outside the bars, making them easy to read.
- labelPosition: Set to ChartDataLabelPosition.outside to position the labels outside the bars, further improving readability.
Data Configuration
- dataSource:
The dataSource property accepts a list of ChartData objects, which provide the data for each bar. Each ChartData object includes:- name: The category label (e.g., “RED”, “GREEN”).
- y: The value determining the height of the bar.
- color: The color of the bar.
- pointColorMapper:
This property assigns a color to each bar by mapping the color property of each ChartData object to the respective bar.
Bar Appearance
- width:
The width property controls the thickness of each bar. A value of 0.5 makes the bars thinner, ensuring they are not too wide and allowing space between them. - spacing:
The spacing property controls the distance between adjacent bars. A setting of 0 places the bars directly next to each other without any gap.
Value Mappers
- xValueMapper:
This property maps each data point’s name to the X-axis. The categories (such as “RED”, “YELLOW”, etc.) are linked to the X-axis labels based on the name property. - yValueMapper:
The yValueMapper property maps each data point’s y value to the Y-axis, determining the height of the bars according to their respective y values.
Full Code:
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class ChartData {
ChartData(this.y, this.color, this.name);
String name;
final double y;
final Color color;
}
class BarSeriesChart extends StatefulWidget {
const BarSeriesChart({super.key});
@override
State<BarSeriesChart> createState() => _BarSeriesChartState();
}
class _BarSeriesChartState extends State<BarSeriesChart> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData(1, const Color(0xffe81416),'RED'),
ChartData(2, const Color(0xffffa500),'ORANGE'),
ChartData(3, const Color(0xfffaeb36),'YELLOW'),
ChartData(4, const Color(0xff79c314),'GREEN'),
ChartData(5, const Color(0xff487de7),'BLUE'),
ChartData(6, const Color(0xff4b369d),'INDIGO'),
ChartData(7, const Color(0xff70369d),'VIOLET')
];
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('BarSeries Chart'),
backgroundColor: Colors.orange,
),
body: SafeArea(
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12),
height: 250,
child: SfCartesianChart(
margin: EdgeInsets.zero,
plotAreaBorderWidth: 0,
primaryYAxis: const NumericAxis(
isVisible: false,
borderWidth: 0,
majorGridLines: MajorGridLines(width: 0),
axisLine: AxisLine(width: 0)),
primaryXAxis: CategoryAxis(
rangePadding: ChartRangePadding.none,
isVisible: true,
majorGridLines: const MajorGridLines(width: 0),
majorTickLines: const MajorTickLines(
size: 0,
),
isInversed: true,
axisLine: const AxisLine(width: 0),
axisLabelFormatter: (axisLabelRenderArgs) {
return ChartAxisLabel(axisLabelRenderArgs.text,
const TextStyle(fontSize: 19));
},
),
legend: const Legend(
isVisible: false, position: LegendPosition.right),
series: <CartesianSeries>[
BarSeries<ChartData, String>(
dataLabelSettings: const DataLabelSettings(
margin: EdgeInsets.zero,
isVisible: true,
labelAlignment: ChartDataLabelAlignment.outer,
labelPosition: ChartDataLabelPosition.outside,
),
dataSource: chartData,
pointColorMapper: (ChartData data, _) => data.color,
width: 0.5,
spacing: 0,
xValueMapper: (ChartData data, _) => data.name,
yValueMapper: (ChartData data, _) => data.y),
]),
),
),
),
);
}
}Add syncfusion_flutter_charts in your pubspec.yml file
Output:
Conclusion:
The SfCartesianChart and BarSeries properties offer powerful customization options for creating bar charts in Flutter. By adjusting properties like axis visibility, bar width, data labels, and spacing, developers can design charts that are both visually appealing and functional. These flexible configurations make it easy to tailor charts to meet specific needs, enhancing data presentation in Flutter applications.