We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: SfCartesianChart |
Published Date: February 8, 2021 |
Last Revised Date: February 9, 2021

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

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile