How to rotate the legend in the cartesian chart (SfCartesianChart) ?
In this article, we explain how to rotate the legend in the chart using the Flutter cartesian chart.
To achieve the below transposed look chart, the legend needs to be rotated. The SfCartesianChart widget provides option to use the custom widgets as legend using the legendItemBuilder property. So, you can wrap the required widgets using the RotatedBox widget and return it using the legendItemBuilder property. In the RotatedBox widget using the quarterTurns property, you can rotate the child widget. Here the default legend can’t be rotated.
The following steps explain how to rotate the legend in the SfCartesianChart widget.
Step 1: Initialize the variable chartData which holds the data source, then assign the value at the initState.
late List<ChartSampleData> chartData;
@override
void initState() {
chartData = <ChartSampleData>[
ChartSampleData(
x: 'Germany',
y: 128,
secondSeriesYValue: 129,
thirdSeriesYValue: 101),
ChartSampleData(
x: 'Russia',
y: 123,
secondSeriesYValue: 92,
thirdSeriesYValue: 93),
ChartSampleData(
x: 'Norway',
y: 107,
secondSeriesYValue: 106,
thirdSeriesYValue: 90),
ChartSampleData(
x: 'USA',
y: 87,
secondSeriesYValue: 95,
thirdSeriesYValue: 71),
];
super.initState();
}
Step 2: Now create the SfCartesianChart widget with the ColumnSeries and assign the chartData to the dataSource property and map the x, y values to xValueMapper and yValueMapper properties respectively. Use the isTransposed property to transpose the vertical and horizontal axes i,e using this you can render vertical chart.
SfCartesianChart( isTransposed: true, primaryXAxis: CategoryAxis(), series: <ColumnSeries<ChartSampleData, String>>[ ColumnSeries<ChartSampleData, String>( dataSource: chartData, color: const Color.fromRGBO(252, 216, 20, 1), xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Gold'), ColumnSeries<ChartSampleData, String>( dataSource: chartData, color: const Color.fromRGBO(169, 169, 169, 1), xValueMapper: (ChartSampleData sales, _) => sales.x as String, yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue, name: 'Silver'), ColumnSeries<ChartSampleData, String>( dataSource: chartData, color: const Color.fromRGBO(205, 127, 50, 1), xValueMapper: (ChartSampleData sales, _) => sales.x as String, yValueMapper: (ChartSampleData sales, _) => sales.thirdSeriesYValue, name: 'Bronze') ], )
Step 3: Declare the legend property in the SfCartesianChart, enable it by setting true to the isVisible property in the legend. Then return the custom widget wrapped with the RotatedBox widget in the legendItemBuilder property. Then specify the quarterTurns property of RotatedBox widget.
SfCartesianChart(
// Other required properties
legend: Legend(
isVisible: true,
legendItemBuilder:
(String name, dynamic series, dynamic point, int index) {
return RotatedBox(
quarterTurns: 1,
child: SizedBox(
width: 87,
child: Row(children: <Widget>[
SizedBox(
child: Icon(
Icons.bar_chart,
color: series.color,
)),
const SizedBox(
width: 1,
),
Text(series.name),
])),
);
}),
)
Thus, the rotated view for legend in the cartesian chart is achieved by the help of legendItemBuilder and RotatedBox widget.
