Based on this tutorial, https://www.digitalocean.com/community/tutorials/flutter-bar-charts , how do you rotate the labels on the x-axis of the chart?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Hi there @ohohabbydale,
I came across this example from the following GitHub thread here.
Stanisław Góra, has put together a nice code snippet which seems to be exactly what you are looking for:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart';
import 'package:charts_flutter/src/text_element.dart';
import 'package:charts_flutter/src/text_style.dart' as style;
class Chart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LineChart(
_createSampleData(),
behaviors: [
LinePointHighlighter(
symbolRenderer: CustomCircleSymbolRenderer()
)
],
selectionModels: [
SelectionModelConfig(
changedListener: (SelectionModel model) {
if(model.hasDatumSelection)
print(model.selectedSeries[0].measureFn(model.selectedDatum[0].index));
}
)
],
);
}
List<Series<LinearSales, int>> _createSampleData() {
final data = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
return [
new Series<LinearSales, int>(
id: 'Sales',
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
)
];
}
}
class CustomCircleSymbolRenderer extends CircleSymbolRenderer {
@override
void paint(ChartCanvas canvas, Rectangle<num> bounds, {List<int> dashPattern, Color fillColor, Color strokeColor, double strokeWidthPx}) {
super.paint(canvas, bounds, dashPattern: dashPattern, fillColor: fillColor, strokeColor: strokeColor, strokeWidthPx: strokeWidthPx);
canvas.drawRect(
Rectangle(bounds.left - 5, bounds.top - 30, bounds.width + 10, bounds.height + 10),
fill: Color.white
);
var textStyle = style.TextStyle();
textStyle.color = Color.black;
textStyle.fontSize = 15;
canvas.drawText(
TextElement("1", style: textStyle),
(bounds.left).round(),
(bounds.top - 28).round()
);
}
}
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}
Regards, Bobby
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.