im quite new to flutter and having some problems, i could not find in the fl chart documentation
anyone know why my Line Chart shows double X and Y Axis? And how to remove the double axes?
Also the X and Y Axis Values are chaing dynamicly, how can i give them a defined value like 1-1000 and display every 50-Step? so 0,50,100,150 etc ...
Im using FL Chart Library.
Expanded(
child: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
child: LineChart(
LineChartData(
borderData: FlBorderData(show: true),
lineBarsData: [
LineChartBarData(
spots: generateUserLoginData(dashIntranet),
isCurved: false,
barWidth: 2,
colors: [
MD_Blue
]
)
]
)
)
)
)
Sorry for my English, thanks in advance!
Related
So I am stuck into trying to paint the different value for a selected line in a time series chart. soo basically what I am trying to achieve is show the comparison on the values inside the series of the chart. I will upload some code and embed the deployed link for the sample program. this was done using dart and flutter
This is the code that is responsible for the series inside the chart:
List<charts.Series<StockSeries, DateTime>> series = [
charts.Series(
id: "strategyReturns",
data: chartData,
domainFn: (StockSeries series, _) => series.date,
measureFn: (StockSeries series, _) => series.strategyReturns,
colorFn: (StockSeries series, _) => series.strategyReturnsColor),
charts.Series(
id: "pSEiReturns",
data: chartData,
domainFn: (StockSeries series, _) => series.date,
measureFn: (StockSeries series, _) => series.pSEiReturns,
colorFn: (StockSeries series, _) => series.pSEiReturnsColor),
];
this is the code that is responsible for drawing the chart and here also is where I think the problem is:
return Container(
height: 500,
padding: const EdgeInsets.all(25),
child: Card(
child: Padding(
padding: const EdgeInsets.all(9.0),
child: Column(children: <Widget>[
Text(
"Chart",
style: Theme.of(context).textTheme.bodyText2,
),
Expanded(
child: charts.TimeSeriesChart(
series,
animate: true,
defaultRenderer: charts.LineRendererConfig(),
dateTimeFactory: const charts.LocalDateTimeFactory(),
behaviors: [
charts.SeriesLegend(),
charts.SlidingViewport(),
charts.PanAndZoomBehavior(),
charts.LinePointHighlighter(
symbolRenderer: CustomCircleSymbolRenderer(),
)
],
selectionModels: [
charts.SelectionModelConfig(
changedListener: (charts.SelectionModel model) {
if (model.hasDatumSelection) {
final value = model.selectedSeries[0]
.measureFn(model.selectedDatum[0].index);
CustomCircleSymbolRenderer.value =
value.toString(); // paints the tapped value
}
})
],
domainAxis: charts.DateTimeAxisSpec(
tickProviderSpec: const charts.DayTickProviderSpec(
increments: [15]), // View in increments of 30 days
viewport: charts.DateTimeExtents(
start: DateTime(
chartData.last.date.year,
chartData.last.date.month - 3,
chartData.last.date
.day), // Start Date 6 months before current date
end: DateTime(chartData.last.date.year,
chartData.last.date.month + 1, chartData.last.date.day),
),
),
primaryMeasureAxis: charts.NumericAxisSpec(
viewport: const charts.NumericExtents(-30, 30),
tickFormatterSpec:
charts.BasicNumericTickFormatterSpec.fromNumberFormat(
NumberFormat("#.##")),
tickProviderSpec: const charts.BasicNumericTickProviderSpec(
zeroBound: false, dataIsInWholeNumbers: false)),
))
]),
),
),
);
I pasted the whole part of the chart code. But the one responsible for painting the values are this part of the code
symbolRenderer: CustomCircleSymbolRenderer(),
)
],
selectionModels: [
charts.SelectionModelConfig(
changedListener: (charts.SelectionModel model) {
if (model.hasDatumSelection) {
final value = model.selectedSeries[0]
.measureFn(model.selectedDatum[0].index);
CustomCircleSymbolRenderer.value =
value.toString(); // paints the tapped value
}
})
and this part is responsible on painting a rectangle when you click a part of the graph and this is where the value comes from:
void paint(charts.ChartCanvas canvas, Rectangle<num> bounds,
{List<int>? dashPattern,
charts.Color? fillColor,
charts.FillPatternType? fillPattern,
charts.Color? strokeColor,
double? strokeWidthPx}) {
super.paint(canvas, bounds,
dashPattern: dashPattern,
fillColor: fillColor,
fillPattern: fillPattern,
strokeColor: strokeColor,
strokeWidthPx: strokeWidthPx);
canvas.drawRect(
Rectangle(bounds.left - 5, bounds.top - 30, bounds.width + 10,
bounds.height + 10),
fill: charts.Color.white);
var textStyle = style.TextStyle();
textStyle.color = charts.Color.black;
textStyle.fontSize = 15;
canvas.drawText(charts_text.TextElement("$value", style: textStyle),
(bounds.left).round(), (bounds.top - 28).round());
image:
here is the sample of the problem. in the chart it paints -7.317 which is the value of the red dot, what I want to achieve is if I tap on the red dot it will show -7.317 and also show the value of the green dot which should be -1.46 and vice versa
if you are willing to help I can explain it more in depth through meeting. I will also post the deployed version for you to try out the graph. link: https://knndeploy.herokuapp.com/#/
Im a newbie in flutter. I'm making a project and I want to know how can I render the list of points using latlong plugin from flutter inside flutter map. I was able to render the first point but unable to show the other points in the list. Can you please guide me or correct my code.
Widget _mapBuilder(BuildContext context) {
final List<LatLng> _mapPoints = [
LatLng(9.7, 123.1),
LatLng(10.7, 124.9),
LatLng(11.7, 125.05)
];
return FlutterMap(
options: MapOptions(
center: _mapPoints[1],
zoom: 16.0,
),
layers: [
TileLayerOptions(
urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c'],
attributionBuilder: (_) {
return const Text("© OpenStreetMap contributors");
},
),
MarkerLayerOptions(markers: [
for (var point in _mapPoints) ...[
Marker(
width: 15.0,
height: 15.0,
point: point,
builder: (ctx) => Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(50.0),
border: Border.all(color: Colors.white, width: 2)),
),
),
]
]),
],
);
You can create markers list like this and use that list in Markers parameters required in marker layer.
final List<LatLng> _mapPoints = [
LatLng(12.9, 77.8),
LatLng(12.1, 77.2),
LatLng(12.5,77.4),
];
for (LatLng i in _mapPoints){
lister.add(Marker(point: i, builder:(ctx) =>
Container(child: Column(
children: [
Icon(Icons.add,size: 40,),
Text("data",style: TextStyle(fontSize: 12),)
],
),
)));
}
How to make this type of gauge in flutter application?
Image
check this library :- fl_chart
it has all the charts and graph and you can customise it as you want
you can use this package :
syncfusion_flutter_gauges
then import this package in your dart file:
import 'package:syncfusion_flutter_gauges/gauges.dart';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(),
),
);
}
Normal radial slider
To create a normal radial slider, we need to disable the labels and ticks properties in the RadialAxis class and set the axis range values in the minimum and maximum properties based on our design needs.
To show 100 percent progress, we need to define the axis’s minimum value as 0 and maximum value as 100 as in the following code example.
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(minimum: 0,
maximum: 100,
showLabels: false,
showTicks: false,
axisLineStyle: AxisLineStyle(
cornerStyle: CornerStyle.bothCurve,
color: Colors.white30,
thickness: 25),
)
]
)
The range pointer will be the track and the marker pointer will be the thumb for the radial slider. You can also set a gradient for the range pointer as shown in the following code example.
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
pointers: <GaugePointer>[
RangePointer(
value: 50,
cornerStyle: CornerStyle.bothCurve,
width: 25,
sizeUnit: GaugeSizeUnit.logicalPixel,
gradient: const SweepGradient(
colors: <Color>[
Color(0xFFCC2B5E),
Color(0xFF753A88)
],
stops: <double>[0.25, 0.75]
)),
MarkerPointer(
value: 50,
enableDragging: true,
markerHeight: 34,
markerWidth: 34,
markerType: MarkerType.circle,
color: Color(0xFF753A88),
borderWidth: 2,
borderColor: Colors.white54)
], )
]
)
I am using syncfusion Pie charts in flutter. I want know know if there is a way to change the scale of the chart inside the parent container without change parent size,
and how to change the radius of the corner when the CornerStyle value is bothCurved
this is my code:
class HalfDoughnutChart extends StatelessWidget {
final List<ChartData> chartData = [
ChartData('David', 30, Color.fromRGBO(9, 0, 136, 1)),
ChartData('Mark', 38, Color.fromRGBO(147, 0, 119, 1)),
ChartData('Test', 34, Color.fromRGBO(228, 0, 124, 1)),
ChartData('Test', 52, Color.fromRGBO(255, 189, 57, 1))
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
color: Colors.grey,
height: 250,
width: 500,
child: SfCircularChart(
margin: EdgeInsets.all(0),
legend: Legend(isVisible: true,position: LegendPosition.right),
annotations: <CircularChartAnnotation>[
CircularChartAnnotation(
widget:
Container(
child: const Text('Annotation')
), radius: '2%',
verticalAlignment: ChartAlignment.far,
),
],
series: <CircularSeries>[
DoughnutSeries<ChartData, String>(
dataLabelMapper: (ChartData data, _) => "${data.y.toInt()} %",
dataSource: chartData,
enableSmartLabels: true,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
pointColorMapper: (ChartData data, _) => data.color,
radius: '70%',
innerRadius: '65%',
startAngle: 270, // Starting angle of doughnut
endAngle: 90,
dataLabelSettings: DataLabelSettings(
// Renders the data label
isVisible: true
),
// Corner style of doughnut segment
cornerStyle: CornerStyle.bothCurve)
]))));
}
}
class ChartData {
ChartData(this.x, this.y, [this.color]);
final String x;
final double y;
final Color color;
}
find chart image in below link:
https://ibb.co/r7MjNBB
thank you
Thanks for the interest in our Flutter charts widget. We have analyzed your queries and find the responses below.
Query #1 Is there a way to change the scale of the chart inside the parent container without change the parent size.
You can use the radius property to customize the size of the chart without changing its parent size. To know more about our charts, please refer to the help document.
Query #2 How to change the radius of the corner when the CornerStyle value is bothCurved?
As of now, you are unable to change the corner radius of each point however you can customize the corner style using the enum property cornerStyle. To know more about rounded corners, find the user guide.
Kindly revert us if you need any further assistance.
Thanks,
Dharanitharan. P
I rendered bar chart using the charts_flutter package in flutter. But the domain label on x-axis overlap each other. Is there a way I can resolve this? Is there a way to either incline the text or increase the width of the chart so that it becomes horizontally scrollable?
I have tried searching for any solutions like labelspecs but could not reach a solution. Here's my code -
double maxheight = .80 * MediaQuery.of(context).size.height;
var series = [
new charts.Series(
domainFn: (BarChartConfig barchartconfig, _) => barchartconfig.name,
measureFn: (BarChartConfig barchartconfig, _) => barchartconfig.rowcount,
colorFn: (BarChartConfig barchartconfig, _) => barchartconfig.color,
id: 'Count',
data: datacharts,
)
];
var chart = new charts.BarChart(
series,
animate: true,
animationDuration: Duration(seconds: 2),
);
return SizedBox(
height: maxheight,
child: chart,
);
#aswani-prakash answer is good,
If you want your labels visible, Then you can simply rotate x-axis labels.
BarChart(
...
domainAxis: charts.OrdinalAxisSpec(
renderSpec: charts.SmallTickRendererSpec(labelRotation: 60),
),
),
Could you post the build function of your chart widget?
Here's an example of adjusting the font size via domainAxis -> renderSpec -> labelStyle -> fontSize:
https://google.github.io/charts/flutter/example/axes/custom_font_size_and_color
Also, you may set minimumPaddingBetweenLabelsPx: 0 within the renderSpec object to adjust the padding between labels. The whole build function could then look somewhat like this:
#override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
/// Assign a custom style for the domain axis.
///
/// This is an OrdinalAxisSpec to match up with BarChart's default
/// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
/// other charts).
domainAxis: new charts.OrdinalAxisSpec(
renderSpec: new charts.SmallTickRendererSpec(
minimumPaddingBetweenLabelsPx: 0
// Tick and Label styling here.
labelStyle: new charts.TextStyleSpec(
fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black),
// Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec(
color: charts.MaterialPalette.black))),
/// Assign a custom style for the measure axis.
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec(
// Tick and Label styling here.
labelStyle: new charts.TextStyleSpec(
fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black),
// Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec(
color: charts.MaterialPalette.black))),
);
}
Set a sliding viewport and ordinal viewport
var chart = charts.BarChart(
series,
animate: true,
domainAxis: new charts.OrdinalAxisSpec(
viewport: new charts.OrdinalViewport('AePS', 3),
),
behaviors: [
new charts.SeriesLegend(),
new charts.SlidingViewport(),
new charts.PanAndZoomBehavior(),
],
)