How to create vertical bar chart in Flutter using cartesian charts widget (SfCartesianChart) ?
Description
This article explains how to create a vertical bar chart using the Flutter SfCartesianChart widget.
Solution
The vertical bar chart is also known as column chart. You can customize the column chart with color, marker, data label, tooltip, and more user interaction feature.
While the horizontal chart is named a bar chart, you can achieve a vertical bar chart either by using the column chart type directly or by using the bar chart with the isTransposed property. To learn more about the isTransposed property, refer to the user guide.
Vertical bar chart with column chart type
Step 1: Declare and initialize the chartData with the required data source.
//Initialize the data source. List<ChartSampleData > chartData = <ChartSampleData>[ ChartSampleData(x: 'China', y: 0.541), ChartSampleData(x: 'Brazil', y: 0.818), ChartSampleData(x: 'Bolivia', y: 1.51), ChartSampleData(x: 'Mexico', y: 1.302), ChartSampleData(x: 'Egypt', y: 2.017), ChartSampleData(x: 'Mongolia', y: 1.683), ];
Step 2: Assign the required properties in the SfCartesianChart widget and initialize the series with the type of ColumnSeries and bind the dataSource.
SfCartesianChart( series: <ColumnSeries<ChartSampleData, String>>[ ColumnSeries<ChartSampleData, String>( // Binding the chartData to the dataSource of the column series. dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.y, ), ], ),
Thus, the vertical bar chart is achieved using the column chart type widget.
Screenshot
View the Github Sample here.
Vertical bar chart with bar chart type
Step 1: Declare and initialize the chartData with the required data source.
//Initialize the data source List<ChartSampleData > chartData = <ChartSampleData>[ ChartSampleData(x: 'France', y: 84452000), ChartSampleData(x: 'Spain', y: 68175000), ChartSampleData(x: 'US', y: 77774000), ChartSampleData(x: 'Italy', y: 50732000), ChartSampleData(x: 'Mexico', y: 32093000), ChartSampleData(x: 'UK', y: 34436000), ];
Step 2: Then, initialize the SfCartesianChart and set the isTransposed property to true.
SfCartesianChart( // Setting isTransposed to true to render vertically. isTransposed: true, ),
Step 3: Assign the required properties in the SfCartesianChart widget and initialize the series with the type of BarSeries and bind the dataSource.
SfCartesianChart( series: <BarSeries<ChartSampleData, String>>[ BarSeries<ChartSampleData, String>( // Binding the chartData to the dataSource of the bar series. dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.y, ), ], ),
Thus, the vertical bar chart is achieved using the bar chart type widget with the isTransposed property.
Screenshot
