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 chart provides the bar chart support and by default it renders horizontally. You can customize the chart with color, marker, data label, tooltip, and more user interaction feature. To know more about our charts, find the user guide.
Having the vertical chart called column chart. By using this column chart and isTransposed property, you can achieve the horizontal chart. To know, more about isTransposed property, find 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: Then, initialize 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
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: Then, initialize the SfCartesianChart and set the isTransposed property to true.
SfCartesianChart( // Setting isTransposed to true to render horizontally. isTransposed: true, ),
Step 3: Now, 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
