Flutter Chart label text overlapping - flutter

Working on Flutter Chart, the domainFn lists the days in a month, 1...31, but they are overlapping, I would like to set the label in a scale of 5 i.e 5, 10, 15, 20, 25, 30.
List<charts.Series<EventChart, String>> _createChart(
List<EventChart> eventChart) {
return [
charts.Series<EventChart, String>(
id: widget.activity,
domainFn: (EventChart eventChart, _) => eventChart.label,
measureFn: (EventChart eventChart, _) => eventChart.count,
data: eventChart,
measureUpperBoundFn: (EventChart eventChart, _) =>
eventChart.count < 4 ? eventChart.count + 4 : eventChart.count,
measureLowerBoundFn: (EventChart eventChart, _) => 0,
fillColorFn: (EventChart eventChart, _) {
return charts.MaterialPalette.blue.shadeDefault;
},
)
];
}
);
BARCHART WIDGET:
Flexible(
child: charts.BarChart(
_createChart(pro.eventChart(widget.activity)
),
animate: true,
behaviors: [
charts.LinePointHighlighter(
drawFollowLinesAcrossChart: true,
showHorizontalFollowLine:
charts.LinePointHighlighterFollowLineType.all
)
],
),

You can select the ticks to be displayed by providing a tickProviderSpec in the domainAxis:
#override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
domainAxis: new charts.OrdinalAxisSpec(
tickProviderSpec: charts.StaticOrdinalTickProviderSpec(
[
charts.TickSpec('10'),
charts.TickSpec('15'),
charts.TickSpec('20'),
...
]
)),
);
}

Related

flutter: I want to click plot chart and show data on charts_flutter

I want to show data when i clicked dot plot chats
like this (for example i use SfCircularChart but i want to use Scatter it's not free for SfCircularChart ,So I had to build it myself):
My code result this:
I want this:
this is my code:
class SimpleScatterPlotChart extends StatelessWidget {
List<charts.Series<_HeartRateData, num>> seriesList;
final bool animate;
SimpleScatterPlotChart({required this.seriesList, this.animate = false});
factory SimpleScatterPlotChart.withSampleData() {
return new SimpleScatterPlotChart(
seriesList: _createSampleData(),
animate: false,
);
}
#override
Widget build(BuildContext context) {
return Container(
height: 250,
width: 350,
child: new charts.ScatterPlotChart(
seriesList,
animate: animate,
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec(
labelStyle: new charts.TextStyleSpec(
color: charts.Color.fromHex(code: '#7A7A7A')
),
)
),
//primaryMeasureAxis: new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()),
domainAxis: charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: charts.NoneRenderSpec(),
),
),
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<_HeartRateData, num>> _createSampleData() {
return [
new charts.Series<_HeartRateData, num>(
id: 'Sales',
colorFn: (_HeartRateData sales, _) {
//final bucket = sales.heartRate / maxMeasure;
if (sales.heartRate < 61) {
return charts.Color.fromHex(code: '#F8D277');
} else if (sales.heartRate < 100) {
return charts.Color.fromHex(code: '#61D2A4');
} else {
return charts.Color.fromHex(code: '#DD5571');
}
},
domainFn: (_HeartRateData sales, _) => sales.date,
measureFn: (_HeartRateData sales, _) => sales.heartRate,
radiusPxFn: (_HeartRateData sales, _) => sales.radius,
data: apiData,
),
];
}
}

clicking on legend causes Unexpected null value charts_flutter

When I click on a specific item in the legend like '1 week out (25)' the chart goes red and gives an error Unexpected null value. The relevant error-causing widget was BarChart. I don't even need the legend to be clickable, but I don't see an override to the callback that's happening here. Desired output is that the legend is not clickable, or the legend is clickable, but the UI doesn't bug out when selecting a specific legend item. Cheers!
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
class StackedHorizontalBarChartCurrentCapacity extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
final CapableShop capableShop;
StackedHorizontalBarChartCurrentCapacity(this.seriesList, this.capableShop,
{this.animate});
factory StackedHorizontalBarChartCurrentCapacity.withCurrentCapacityEnrouteData(
CapableShop capableShop) {
return new StackedHorizontalBarChartCurrentCapacity(
_createCurrentCapacityEnrouteData(
currentEnroute: capableShop.currentEnroute,
currentEnrouteOptimal: capableShop.currentEnrouteOptimal,
currentEnrouteWeek1: capableShop.currentEnrouteWeek1,
currentEnrouteWeek2: capableShop.currentEnrouteWeek2,
currentEnrouteWeek3: capableShop.currentEnrouteWeek3,
currentEnrouteWeek3plus: capableShop.currentEnrouteWeek3plus,
currentFlexMax: capableShop.currentFlexMax,
currentOptimal: capableShop.currentOptimal),
capableShop,
animate: false,
);
}
#override
Widget build(BuildContext context) {
// print(capableShop.toJson());
return new charts.BarChart(
seriesList,
animate: animate,
barGroupingType: charts.BarGroupingType.stacked,
vertical: false,
behaviors: [
new charts.SeriesLegend(
desiredMaxColumns: 2,
cellPadding: EdgeInsets.all(2),
showMeasures: true,
desiredMaxRows: 3,
position: charts.BehaviorPosition.top,
horizontalFirst: false,
measureFormatter: (measure) => "(" + measure.toString() + ")",
legendDefaultMeasure: charts.LegendDefaultMeasure.firstValue,
)
],
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: charts.SmallTickRendererSpec(
minimumPaddingBetweenLabelsPx: 0,
labelAnchor: charts.TickLabelAnchor.after,
labelStyle: charts.TextStyleSpec(
fontSize: 10,
),
labelRotation: 30,
lineStyle:
charts.LineStyleSpec(color: charts.MaterialPalette.black)),
tickProviderSpec: charts.StaticNumericTickProviderSpec([
charts.TickSpec(capableShop.currentOptimal,
label: capableShop.currentOptimal.toString() + ' Optimal'),
charts.TickSpec(capableShop.currentFlexMax,
label: capableShop.currentFlexMax.toString() + ' Flex Max'),
charts.TickSpec(capableShop.currentEnrouteOptimal,
label: capableShop.currentEnrouteOptimal.toString() +
' Enroute Optimal'),
]),
viewport:
charts.NumericExtents(0, capableShop.currentEnrouteOptimal)),
);
}
static List<charts.Series<ChartAmount, String>>
_createCurrentCapacityEnrouteData({
int currentEnroute,
int currentEnrouteWeek1,
int currentEnrouteWeek2,
int currentEnrouteWeek3,
int currentEnrouteWeek3plus,
int currentFlexMax,
int currentOptimal,
int currentEnrouteOptimal,
}) {
final canonicalEnroute = [
new ChartAmount(
"${currentEnroute ?? 10} Canonical Enroute", currentEnroute ?? 10),
];
final oneWeekOut = [
new ChartAmount(
"${(currentEnrouteWeek1 ?? 2) + (currentEnrouteWeek2 ?? 3) + (currentEnrouteWeek3 ?? 1) + (currentEnrouteWeek3plus ?? 1)} AVSO Enroute",
currentEnrouteWeek1 ?? 2),
];
final twoWeeksOut = [
new ChartAmount(
"${(currentEnrouteWeek1 ?? 2) + (currentEnrouteWeek2 ?? 3) + (currentEnrouteWeek3 ?? 1) + (currentEnrouteWeek3plus ?? 1)} AVSO Enroute",
currentEnrouteWeek2 ?? 3),
];
final threeWeeksOut = [
new ChartAmount(
"${(currentEnrouteWeek1 ?? 2) + (currentEnrouteWeek2 ?? 3) + (currentEnrouteWeek3 ?? 1) + (currentEnrouteWeek3plus ?? 1)} AVSO Enroute",
currentEnrouteWeek3 ?? 1),
];
final plus = [
new ChartAmount(
"${(currentEnrouteWeek1 ?? 2) + (currentEnrouteWeek2 ?? 3) + (currentEnrouteWeek3 ?? 1) + (currentEnrouteWeek3plus ?? 1)} AVSO Enroute",
currentEnrouteWeek3plus ?? 1),
];
return [
new charts.Series<ChartAmount, String>(
id: '1 Week Out',
domainFn: (ChartAmount amount, _) => amount.label,
measureFn: (ChartAmount amount, _) => amount.enroute,
data: oneWeekOut,
measureUpperBoundFn: (_, __) => currentEnrouteOptimal,
measureLowerBoundFn: (_, __) => 0,
),
new charts.Series<ChartAmount, String>(
id: '2 Weeks Out',
domainFn: (ChartAmount amount, _) => amount.label,
measureFn: (ChartAmount amount, _) => amount.enroute,
data: twoWeeksOut,
measureUpperBoundFn: (_, __) => currentEnrouteOptimal,
measureLowerBoundFn: (_, __) => 0,
),
new charts.Series<ChartAmount, String>(
id: '3 Weeks Out',
domainFn: (ChartAmount amount, _) => amount.label,
measureFn: (ChartAmount amount, _) => amount.enroute,
data: threeWeeksOut,
measureUpperBoundFn: (_, __) => currentEnrouteOptimal,
measureLowerBoundFn: (_, __) => 0,
),
new charts.Series<ChartAmount, String>(
id: '3+ Weeks Out',
domainFn: (ChartAmount amount, _) => amount.label,
measureFn: (ChartAmount amount, _) => amount.enroute,
data: plus,
measureUpperBoundFn: (_, __) => currentEnrouteOptimal,
measureLowerBoundFn: (_, __) => 0,
),
new charts.Series<ChartAmount, String>(
id: 'Canonical Enroute',
domainFn: (ChartAmount amount, _) => amount.label,
measureFn: (ChartAmount amount, _) => amount.enroute,
data: canonicalEnroute,
measureUpperBoundFn: (_, __) => currentEnrouteOptimal,
measureLowerBoundFn: (_, __) => 0,
colorFn: (datum, index) =>
charts.ColorUtil.fromDartColor(Colors.blue[800]),
),
];
}
}

disable grid and axis labels on scatter plot flutter

I am using charts_flutter package and I can't find a way to hide\disable the grid and axis labels.
Relevant code:
class _VennState extends State<VennDiagramWidget> {
List<charts.Series<VennCircle, int>> circlesList;
static List<charts.Series<VennCircle, int>> _createRandomCircles() {
final circles = [
VennCircle('red', 1, 5, 0.8, 'Venn1'),
VennCircle('black', 2, 10, 0.5, 'Venn2'),
VennCircle('green', 3, 20, 1, 'Venn3'),
];
return [
new charts.Series(
id: 'circles',
data: circles,
domainFn: (VennCircle venn, _) => venn.circleSize,
measureFn: (VennCircle venn, _) => venn.opacity,
colorFn: (VennCircle venn, _) {
if (venn.circleColor == 'red') {
return charts.MaterialPalette.red.shadeDefault;
} else if (venn.circleColor == 'black') {
return charts.MaterialPalette.black;
}
return charts.MaterialPalette.green.shadeDefault;
},
radiusPxFn: (VennCircle venn, _) => venn.circleSize,
),
];
}
scatterPlot() {
return new charts.ScatterPlotChart(
circlesList,
animate: true,
);
}
Right now, that's how it looks
I wish to remove the values labels on both axis and the grid\ticks so I can see only the circles.
Try these options:
charts.ScatterPlotChart(
seriesList,
animate: animate,
primaryMeasureAxis:
new charts.NumericAxisSpec(
showAxisLine: true,
renderSpec: new charts.NoneRenderSpec(),
),
domainAxis:
new charts.NumericAxisSpec(
showAxisLine: true,
renderSpec: new charts.NoneRenderSpec(),
),
);

How to apply an opacity to a scatter plot flutter

I am using charts_flutter to draw a scatter plot.
So far, this is the relevant code I wrote:
class _VennState extends State<VennDiagramWidget> {
List<charts.Series<VennCircle, int>> circlesList;
static List<charts.Series<VennCircle, int>> _createRandomCircles() {
final circles = [
VennCircle('red', 1, 50, 0.8, 'Venn1', 15, 35),
VennCircle('black', 2, 150, 0.5, 'Venn2', 18, 20),
VennCircle('green', 3, 200, 1, 'Venn3', 25, 25),
];
return [
new charts.Series(
id: 'circles',
data: circles,
domainFn: (VennCircle venn, _) => venn.x_value,
measureFn: (VennCircle venn, _) => venn.y_value,
colorFn: (VennCircle venn, _) {
if (venn.circleColor == 'red') {
return charts.MaterialPalette.red.shadeDefault;
} else if (venn.circleColor == 'black') {
return charts.MaterialPalette.black;
}
return charts.MaterialPalette.green.shadeDefault;
},
radiusPxFn: (VennCircle venn, _) => venn.circleSize,
domainUpperBoundFn: (VennCircle venn, _) => 50,
domainLowerBoundFn: (VennCircle venn, _) => 0,
measureUpperBoundFn: (VennCircle venn, _) => 50,
measureLowerBoundFn: (VennCircle venn, _) => 0,
),
];
}
scatterPlot() {
return new charts.ScatterPlotChart(
circlesList,
animate: true,
primaryMeasureAxis: new charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: new charts.NoneRenderSpec(),
),
domainAxis: new charts.NumericAxisSpec(
showAxisLine: false,
renderSpec: new charts.NoneRenderSpec(),
),
);
}
I couldn't find a way to change the opacity of each circle. (each circle can have a different opacity)
I came across this Opacity widget but I wasn't able to apply it - probably because it should be used on a widget.
On that note, how can I define VennCircle as widget and not an object?
EDIT: I was able to do that simply by modifying the colorFn function:
colorFn: (VennCircle venn, _) {
if (venn.circleColor == 'red') {
return charts.Color.fromOther(
color: charts.ColorUtil.fromDartColor(
Color.fromARGB(100, 255, 0, 0)));
} else if (venn.circleColor == 'black') {
return charts.ColorUtil.fromDartColor(Color.fromARGB(95, 0, 0, 0));
}
return charts.ColorUtil.fromDartColor(Color.fromARGB(95, 0, 255, 0));
},

Set maximum value on primary measure axis

This is a question for Flutter development using charts_flutter. Is there a parameter to fix the maximum value on the measure axis? I'm currently using desiredTickCount as a hack but I ideally only want 3 tickers (0,5,10) for a range of 0-10 on the measure axis.
Code snippet:
Widget _createChart() {
return new charts.BarChart(
_createSampleData(),
animate: true,
vertical: false,
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.BasicNumericTickProviderSpec(
desiredTickCount: 11,
),
),
barRendererDecorator: new charts.BarLabelDecorator(),
// Hide domain axis.
domainAxis:
new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
);
}
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
new OrdinalSales('Liver', 8),
new OrdinalSales('Heart', 4),
new OrdinalSales('Spleen', 5),
new OrdinalSales('Lung', 1),
new OrdinalSales('Kidney', 2),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
// Set a label accessor to control the text of the bar label.
labelAccessorFn: (OrdinalSales sales, _) => '${sales.year}',
),
];
}
}
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}
If you really just want 0, 5 and 10 try using a StaticNumericTickProviderSpec
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
<charts.TickSpec<num>>[
charts.TickSpec<num>(0),
charts.TickSpec<num>(5),
charts.TickSpec<num>(10),
],
),
),