Articles in this section
Category / Section

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

2 mins read

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_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

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