How to create vertical bar chart in Flutter using cartesian charts widget (SfCartesianChart) ?
Description
This article explains how to create the 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.
Having the horizontal chart named as bar chart. By using this bar chart and isTransposed property, you can achieve the vertical bar chart. To know more on isTransposed property, find the user guide.
Vertical bar chart with column chart type
Step 1: First, 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: Then, 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
Vertical bar chart with bar chart type
Step 1: First, 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: Now, 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.
Screenshot
