Articles in this section
Category / Section

How to create vertical bar chart in Flutter using cartesian charts widget (SfCartesianChart) ?

2 mins read

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_chart_with_column_chart

 

View the sample in GitHub.

 

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

 

vertical_chart_with_bar_chart_type

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied