I'm using google charts for flutter and trying to align legends in the bottom middle.
I've tried using outsideJustification: charts.OutsideJustification.middleDrawArea but its still aligned left. Is there an option to align legends in the center?
this is what i have
charts.NumericComboChart(
data,
animate: true,
// hide Axis
primaryMeasureAxis: noneAxisRenderer,
// hide Axis
secondaryMeasureAxis: noneAxisRenderer,
// hide Axis
domainAxis: noneAxisRenderer,
// Configure the default renderer as a line renderer. This will be used
// for any series that does not define a rendererIdKey.
defaultRenderer: charts.LineRendererConfig(),
// Custom renderer configuration for the point series.
behaviors: [
charts.SeriesLegend(
position: charts.BehaviorPosition.bottom,
cellPadding: EdgeInsets.symmetric(horizontal: 2.0),
outsideJustification: charts.OutsideJustification.middleDrawArea,
),
],
);
which results in this:
Related
I want to rotate the bar chart label decorators 90 degrees.
In my flutter app I draw a simple vertical bar chart of daily amounts (using charts_flutter 0.10.0) with labels on both a numeric y-axis and ordinal x-axis.
These axis labels can be styled and easily rotated using labelRotation. The vertical bars also each have 'bar label decorator' labels that show the exact graphed amount – but because of size constraints and resulting narrow bars, the label decorators overflow.
I need to rotate these bar decorator labels 90 degrees, so they run in the same direction as each bar's long axis, allowing the label text to fit – but cannot work out how.
Unlike for the axis labels of primaryMeasureAxis and domainAxis, which have a labelRotation property in their renderSpec, the bar label decorators don't seem to have any option other than simple text styling (fontFamily, fontSize, lineHeight, color, fontWeight) or label position behaviour via BarLabelDecorator.
My guess is that this isn't currently possible without an update to BarLabelDecorator to provide a rotate option. I am hoping I'm wrong!
Widget build(BuildContext context) {
charts.NumericAxisSpec yAxisStyling = charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
labelStyle: charts.TextStyleSpec(
fontSize: 12,
color: charts.ColorUtil.fromDartColor(Colors.grey.shade500),
),
lineStyle: new charts.LineStyleSpec(
color: charts.ColorUtil.fromDartColor(Colors.grey.shade400)),
)
);
charts.OrdinalAxisSpec xAxisStyling = charts.OrdinalAxisSpec(
renderSpec: charts.GridlineRendererSpec(
labelStyle: charts.TextStyleSpec(
fontSize: 12,
color: charts.ColorUtil.fromDartColor(Colors.grey.shade500),
),
// labelRotation: 90, // <- just an example / don't need these rotated
lineStyle: new charts.LineStyleSpec(color: charts.MaterialPalette.transparent),
),
showAxisLine: false, // doesn't seem to work on it's own - need above 'transparent' line
);
return new charts.BarChart(
seriesList,
animate: animate,
vertical: true,
// Set a bar label decorator.
// insideLabelStyleSpec: new charts.TextStyleSpec(),
// outsideLabelStyleSpec: new charts.TextStyleSpec(...)),
barRendererDecorator: new charts.BarLabelDecorator<String>(), // <- ? no rotate property
primaryMeasureAxis: yAxisStyling,
domainAxis: xAxisStyling,
);
}
In case anyone else is looking...
Although there is (currently) no way to achieve this natively with the public release of the google charts flutter package, this answer to "Is there a way to put label text vertically in flutter charts_flutter: ^0.8.1" describes a workaround through custom extension of the BarRendererDecorator class.
The money-line is by ultimately rotating the direction of drawing text on the canvas:
canvas.drawText(labelElement, labelX, labelY, rotation: -math.pi / 2);
The complete solution is probably not the most maintainable (in terms of becoming technical debt as the charts package is inevitably updated), but it will do the job.
(In the mean-time I've decided against decorating the bars, and instead use a tap gesture to show custom tooltips on the bar value etc. Neater and less crowding of the UI, especially on small screens.)
I am using this package syncfusion_flutter_charts: ^18.4.47 to provide chart this is my code and there is a square beside my chart as showing in the pic
I am using this package syncfusion_flutter_charts: ^18.4.47 to provide chart this is my code and there is a square beside my chart as showing in the picenter image description here
body: SizedBox(
height: 200,
width: 300,
child: SfCartesianChart(
primaryXAxis: CategoryAxis(
maximumLabelWidth: 80,
),
enableAxisAnimation: true,
// borderColor: yellow,
plotAreaBorderColor: yellow,
plotAreaBackgroundColor: yellow,
series: <ChartSeries<GeluValue, String>>[
BarSeries(
dataSource: <GeluValue>[
GeluValue("السبت", 180),
GeluValue("الاحد", 200),
GeluValue("الاثنين", 160),
GeluValue("الثلاثاء", 70),
GeluValue("الاربعاء", 90),
GeluValue("الخميس", 100),
GeluValue("الجمعة", 70),
],
xAxisName: "days",
yAxisName: "values",
// color: yellow,
animationDuration: 20,
xValueMapper: (GeluValue gelu, _) => gelu.day,
yValueMapper: (GeluValue gelu, _) => gelu.gelu,
)
]),
),
We would like to tell you that, since the chart is a widget formed by drawing, RTL is not applicable for it. Your reported issue may arise due to using of delegates in your app like GlobalWidgetsLocalizations.delegate. Since for Arabic and some other locales, the default behavior is by RTL (right-to-left), we get the position from the right end and the chart starts to render from there. To resolve this issue, you can use the following code snippet,
Directionality(
textDirection: TextDirection.ltr,
child: SfCartesianChart()
)
By wrapping up our chart widget using the Directionality widget and set the textDirection to TextDirection.ltr will allow rendering the chart from the left end and hopes this will resolve your issue. Also, if you need the mirror image of the chart, you can achieve it by using the opposedPosition and isInversed properties in the respective axis. Here we also attached the modified given sample and screenshot for your reference, please make use of it. Now the rendered chart looks like renders from RTL (right-to-left). To know more about our charts, please refer to the following help document.
https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#placing-axes-at-the-opposite-side
Sample: https://www.syncfusion.com/downloads/support/directtrac/320174/ze/I320174-arabic-chart499151652
Screenshots
Mirror image
I haven't found an example where charts_flutter has been used using a data stream that changes over time. Is it possible to do it, or is it not the right tool?
In my case, I have to show a line graph that follows the signals from microphone.
Thanks
UPDATE
This is my attempt: inside my build() method I defined the chart like this:
charts.TimeSeriesChart(
getStreamData(),
animate: true,
domainAxis: new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec(), showAxisLine: false),
primaryMeasureAxis: new charts.NumericAxisSpec(showAxisLine: false),
dateTimeFactory: const charts.LocalDateTimeFactory(),
where my goal is consuming a data stream, and set a fixed range of measurements axis to avoid strange oscillations of the graph.
At this time the chart successfully rebuilds, but the range on measurement axis changed every time.
You can provide a static range for an axis like this (example is for 12-18 inclusive):
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
<charts.TickSpec<num>>[
charts.TickSpec<num>(12),
charts.TickSpec<num>(14),
charts.TickSpec<num>(16),
charts.TickSpec<num>(18),
],
),
),
I'm using charts_flutter and using a scrollable bar chart. Horizontal scrolling works great with the behaviors SlidingViewport() and PanAndZoomBehavior() (charts_flutter example). I would also like to have labels follow the bar itself and stay inside the chart window when scrolling. See image.
Code
BarChart(
data,
behaviors: [
SlidingViewport(),
PanAndZoomBehavior(),
],
animate: true,
domainAxis: OrdinalAxisSpec(
viewport: OrdinalViewport('Week ${weeks.last}', 4),
),
)
I used ClipRect() to solve that issue, simply wrap your widget with what ever clipper you wish although the default works as well,
ClipRect(child : BarChart(
data,
behaviors: [
SlidingViewport(),
PanAndZoomBehavior(),
],
animate: true,
domainAxis: OrdinalAxisSpec(
viewport: OrdinalViewport('Week ${weeks.last}', 4),
),
))
I used https://github.com/google/charts inside my flutter app. It works great. But when i zoom on chart, the zoom happens but in the wrong place! It starts expanding keeping the left static. The effect is the chart slide under your finger zooming not in the point you are zooming to. Is there a way to zoom like you zoom on a picture on gallery?
code of my chart
Widget build(BuildContext context) {
return new charts.LineChart(
_chartSeriesFromChartData(seriesList),
animate: false,
defaultRenderer: charts.LineRendererConfig(includeArea: true, includePoints: true),
primaryMeasureAxis: charts.NumericAxisSpec(tickProviderSpec: charts.BasicNumericTickProviderSpec(desiredTickCount: 8)),
behaviors: [ZoomBehaviour()],
)
You can use code like this in your code:
behaviors: [new charts.PanAndZoomBehavior()],
or if you want selection by item in our charts you can use:
behaviors: [new charts.SeriesLegend()],
and if you want use two of them maybe you can use:
behaviors: [new charts.SeriesLegend(), new charts.PanAndZoomBehavior()],