How to create horizontal bar chart in Flutter using cartesian charts widget (SfCartesianChart) ?
This article explains how to create the horizontal bar chart using the Flutter SfCartesianChart widget.
Cartesian charts provide built-in support for bar charts, which render horizontally by default. You can customize the chart with colors, markers, data labels, tooltips, and other interactive features. For more information about Syncfusion charts, please refer to the user guide.
A vertical chart called a column chart. You can also achieve a horizontal chart by using a column chart with the isTransposed property. To learn more about the isTransposed property, please refer to the user guide.
Horizontal bar chart with bar chart type
Step 1: First, declare and initialize the chartData with the required data source.
//Initialize the data source final List<ChartSampleData> chartData = <ChartSampleData>[ ChartSampleData( x: 'France', y: 84452000, secondSeriesYValue: 82682000, thirdSeriesYValue: 86861000), ChartSampleData( x: 'Spain', y: 68175000, secondSeriesYValue: 75315000, thirdSeriesYValue: 81786000), ChartSampleData( x: 'US', y: 77774000, secondSeriesYValue: 76407000, thirdSeriesYValue: 76941000), ChartSampleData( x: 'Italy', y: 50732000, secondSeriesYValue: 52372000, thirdSeriesYValue: 58253000), ChartSampleData( x: 'Mexico', y: 32093000, secondSeriesYValue: 35079000, thirdSeriesYValue: 39291000), ChartSampleData( x: 'UK', y: 34436000, secondSeriesYValue: 35814000, thirdSeriesYValue: 37651000), ];
Step 2: TInitialize the SfCartesianChart widget with required properties and 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, ), BarSeries<ChartSampleData, String>( // Binding the chartData to the dataSource of the bar series. dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue, ), BarSeries<ChartSampleData, String>( // Binding the chartData to the dataSource of the bar series. dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.thirdSeriesYValue, ) ], ),
Thus, the horizontal chart is achieved using the bar chart type widget.
Screenshot
View the Github Sample here.
Horizontal bar chart using the column chart type
Step 1: First, declare and initialize the chartData with the required data source.
//Initialize the data source final List<ChartSampleData> chartData = <ChartSampleData>[ ChartSampleData( x: 'France', y: 84452000, secondSeriesYValue: 82682000, thirdSeriesYValue: 86861000), ChartSampleData( x: 'Spain', y: 68175000, secondSeriesYValue: 75315000, thirdSeriesYValue: 81786000), ChartSampleData( x: 'US', y: 77774000, secondSeriesYValue: 76407000, thirdSeriesYValue: 76941000), ChartSampleData( x: 'Italy', y: 50732000, secondSeriesYValue: 52372000, thirdSeriesYValue: 58253000), ChartSampleData( x: 'Mexico', y: 32093000, secondSeriesYValue: 35079000, thirdSeriesYValue: 39291000), ChartSampleData( x: 'UK', y: 34436000, secondSeriesYValue: 35814000, thirdSeriesYValue: 37651000), ];
Step 2: Initialize the SfCartesianChart and set the isTransposed property to true.
SfCartesianChart( // Setting isTransposed to true to render horizontally. isTransposed: true, ),
Step 3: Assign the required properties in the SfCartesianChart widget and initialize the series with the type of ColumnSeries and bind the dataSource.
SfCartesianChart( series: <ColumSeries<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, ), ColumnSeries<ChartSampleData, String>( // Binding the chartData to the dataSource of the column series. dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue, ), ColumnSeries<ChartSampleData, String>( // Binding the chartData to the dataSource of the column series. dataSource: chartData, xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.thirdSeriesYValue, ) ], ),
Thus, the horizontal chart is achieved using the column chart type widget.
Screenshot
