CODEWITHSUNDEEP
chartsflutter
Muzaffer
Muzaffer

Reputation: 53

Flutter Charts How do I rotate the X axis?

Example Image How can I only rotate the x axis on the bar chart? I used labelRotationAngle to do it with the Kotlin language. Is it possible to do this with Flutter?. Thank you for your help.

Rotate

 charts.BarChart(
   _createDataForChart(key, city_name),
   animate: true,
   behaviors: [new charts.PanAndZoomBehavior()],,
   )
List<charts.Series<priceChart,String>> _createDataForChart(key, city_name){
return [
      new charts.Series<priceChart, String>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (priceChart sales, _) => sales.date,
        measureFn: (priceChart sales, _) => sales.price,
        data: data,
      )
    ]
}

Upvotes: 4

Views: 2595

Answers (1)

Arash Mohammadi
Arash Mohammadi

Reputation: 1419

U can use the domainAxis with renderSpec to achieve this. Example Code here:

charts.BarChart(
  seriesList,
  animate: animate,
  domainAxis: new charts.OrdinalAxisSpec(
    renderSpec: charts.SmallTickRendererSpec(
      //
      // Rotation Here, 
      labelRotation: 45,
    ),
  ),
)

45 degree is the best one yet. if u go 90 it will shrink the chart. but you can use labelAnchor: charts.TickLabelAnchor.before with labelRotation: -90 to achieve what you want. Example code:

charts.BarChart(
  seriesList,
  animate: animate,

  domainAxis: new charts.OrdinalAxisSpec(
    renderSpec: charts.SmallTickRendererSpec(
      // Rotation Here,
      labelRotation: -90,
      labelAnchor: charts.TickLabelAnchor.before,

    ),
  ),

)

Upvotes: 5

Related Questions