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 horizontal 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 horizontal bar chart using the Flutter SfCartesianChart widget.

Solution

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_chart_with_bar_chart_type

 

View the sample in GitHub.

 

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

 

horizontal_chart_with_column_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