How do I remove this weird trendline in flutter?
I think there might be a property I can put under the LineChart widget, but not sure what. During the initial startup, the charts don't show the trendline but after I long press on the ListTile, that's wrapped around it, the trendlines appear. Thanks in advance.
return SizedBox(
height: 30,
child: LineChart(LineChartData(
lineTouchData:
LineTouchData(enabled: false, handleBuiltInTouches: false),
minX: minMaxX['min'],
maxX: minMaxX['max'],
minY: minMaxY['min'],
maxY: minMaxY['max'],
titlesData: FlTitlesData(show: false),
gridData: FlGridData(
show: false, drawHorizontalLine: false, drawVerticalLine: false),
borderData: FlBorderData(show: false),
extraLinesData: ExtraLinesData(
extraLinesOnTop: false,
horizontalLines: [
HorizontalLine(y: widget.openPrice, color: kDisabledColor)
]),
lineBarsData: [
LineChartBarData(
isStepLineChart: false,
belowBarData: BarAreaData(
show: true,
colors: [chartColor.withOpacity(0.4)],
),
colors: [chartColor],
isCurved: false,
dotData: FlDotData(show: false),
spots: chartDataPoints
.map((point) => FlSpot(point['x'], point['y']))
.toList()),
])),
);
Related
I have been facing issues with displaying the tooltip for my line graph which is created from the FL charts package. On touching the line spots of the graph, my tooltip data is being duplicated and I have no idea why. Below attached is an example image and the code for my line chart.
LineChart(
LineChartData(
titlesData: FlTitlesData(
leftTitles: AxisTitles(),
rightTitles: AxisTitles(
sideTitles: SideTitles(
getTitlesWidget: getTitles,
reservedSize: 40,
showTitles: true,
),
),
topTitles: AxisTitles(),
bottomTitles: AxisTitles(),
),
gridData: FlGridData(
show: true,
drawVerticalLine: true,
drawHorizontalLine: true,
horizontalInterval: 4,
),
lineTouchData: LineTouchData(enabled: true),
maxY: 100,
lineBarsData: widget.weightLogData.map(
(d) {
List<FlSpot> weights = List.generate(
10,
(int index) {
return FlSpot(double.parse(index.toString()),
widget.weightLogData[index].weight!);
},
growable: false,
);
return LineChartBarData(
dotData: FlDotData(show: false),
spots: weights,
lineChartStepData: LineChartStepData(
stepDirection: 20,
),
);
},
).toList(),
),
),
I am using the charts_flutter package to display a Pie Chart. This is my code:
charts.PieChart<String>(
series,
animate: true,
defaultRenderer: charts.ArcRendererConfig(
strokeWidthPx: 0,
arcRendererDecorators: [
charts.ArcLabelDecorator(
labelPosition: charts.ArcLabelPosition.inside,
labelPadding: 3,
showLeaderLines: false,
insideLabelStyleSpec: const charts.TextStyleSpec(color: charts.Color.white, fontSize: 14, fontWeight: "HelveticaRegular"),
),
],
),
),
However, I want to remove this padding between the arcs. Is it possible?
I am creating a line graph in flutter and I would like the points to be different colours or even different icons depending on the position on the measure axis. Is this possible with this package.
The code below is my current Linechart
return new charts.LineChart(
widget.seriesList,
animate: widget.animate,
defaultRenderer: new charts.LineRendererConfig(
includePoints: true,
includeArea: false,
radiusPx: 5,
),
selectionModels: [
new charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: (num)=>{
widget.callback(num)
},
)
],
//this is the xaxis
domainAxis: new charts.NumericAxisSpec(
showAxisLine: true,
tickProviderSpec: new charts.BasicNumericTickProviderSpec(
zeroBound: false,
desiredMinTickCount: 12,
desiredMaxTickCount: 12
),
),
primaryMeasureAxis: new charts.NumericAxisSpec(
showAxisLine: true,
tickProviderSpec: new charts.BasicNumericTickProviderSpec(
desiredTickCount: 11,
desiredMinTickCount: 6,
desiredMaxTickCount: 11
),
),
);
I am showing a chart in my Flutter App using fl_chart library.
I am trying to show spots with an y value of either 1, 2, or 3 and I want to draw a horizontal line on the chart on the values 1, 2 and 3.
Here is my code:
class MyChart extends StatelessWidget {
final List<ScatterSpot> spots;
const MyChart({
Key? key,
required this.spots,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return ScatterChart(
ScatterChartData(
minX: 1,
maxX: 5,
minY: 1,
maxY: 3,
scatterSpots: spots,
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
drawVerticalLine: false,
getDrawingHorizontalLine: (value) {
return FlLine(
color: Colors.grey.shade300,
strokeWidth: 1,
);
},
horizontalInterval: 1,
),
borderData: FlBorderData(
show: false,
),
titlesData: FlTitlesData(
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) => value.toString(),
interval: 1,
),
rightTitles: SideTitles(
showTitles: false,
),
topTitles: SideTitles(
showTitles: false,
),
bottomTitles: SideTitles(
showTitles: false,
),
),
),
);
}
}
So, as you can see, I have defined a minY Value of 1 and a maxY Value of 3. I am drawing a horizontal line with an Interval of 1. The Titles on the y-axis are shown correctly for 1, 2 and 3, but the line is only drawn for the value 2, not for the values 1 and 3. How can I fix this?
Fixed it ^^
I just set borderData with bottom and top BorderSide
I'm implementing line chart in flutter i have draw the line chart but i need to show horizontal lines in different colors. Is there any way to get that?
Here is the attached image what i want to achieve.
LineChartData(
minX: 0,
maxX: 11,
minY: 0,
maxY: 6,
titlesData: LineTitles.getTitleData(),
gridData: FlGridData(
show: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: Colors.grey,
strokeWidth: 1,
);
},
drawVerticalLine: true,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.grey,
strokeWidth: 1,
);
},
),
borderData: FlBorderData(
show: true,
border: Border.all(color: Colors.grey, width: 1),
),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(4.9, 5),
FlSpot(6.8, 2.5),
FlSpot(8, 4),
FlSpot(9.5, 3),
FlSpot(11, 4),
],
isCurved: true,
barWidth: 3,
),
],
),[![I need to show the orange and red horizontal lines][1]][1]
Yes you can check gridline colors in fl_chart. You've already used function with which you can modify these colors which is getDrawingHorizontalLine().
getDrawingHorizontalLine: (value) {
if(value == 1) {
return FlLine(
color: Colors.red,
strokeWidth: 2,
);
} else if (value == 2 ) {
return FlLine(
color: Colors.yellow,
strokeWidth: 2,
);
} else {
return FlLine(
color: Colors.grey,
strokeWidth: 2,
);
}
}
Now here as you can see I've added condition that if values are 1 or 2 then gridline colors should be red & yellow respectively. Now this is the ugly way to put condition to change color but you can do it dynamically yourself.
If you want to change vertical gridlines then you should use getDrawingVerticalLine() to change color values.
You can see my screenshot for output below.