Flutter Tutorial - Line Chart - FLChart

Thanks, you save my evening)))

hello, is possible to change the left title with image or icon?

Nice line shart

Can it displays legend?

I am getting the error that parameter colors is not defined

Hi Johannes Mike i am using this chart package in my flutter project i want to adjust the on tap for dotData to keep showing on the chart if the user did tap on the line only the specific dot data tapped and if the user tapped on another dot it will show and hide the previous showed dot data , can you please help me with this problem and thank you ❤

How would I use Firestore Data for my chart info ?

good tutorial 👏🏼

this example is not yours, it belongs to flchart team ! u should've mentioned it to show your honesty at least !

Great video Mike Love your work

can this handle real time data?

This video is great, but it's outdated. Latest dependencies are not compatible with the code. When I run the code with dependencies used in this video, it gives me problems with null safety. It would be nice to have at least source code updated.

Hey Johannes,
thank you for the tutorial. I just want to let you know, that there had to be some improvement on fl_chart, which doesn't suit one on one with your tutorial anymore. For example the titles arguments in the FlTitlesData widget know takes a AxisTitles widget, which then takes a SideTitles widget. No big deal for an advanced dev, but a beginner maybe couldn't follow along your tutorial anymore. So maybe you want to take a look at the changes and update your video.

If your file line_titles.dart is not working try this code:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineTitles {
static getTitleData() => FlTitlesData(
show: true,
bottomTitles: AxisTitles(
axisNameWidget: const Text(
'Meseci',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
getTitlesWidget: (value, meta) {
const style = TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
);
Widget text;
switch (value.toInt()) {
case 2:
text = const Text('MAR', style: style);
break;
case 5:
text = const Text('JUN', style: style);
break;
case 8:
text = const Text('SEP', style: style);
break;
default:
text = const Text('', style: style);
break;
}

return SideTitleWidget(
axisSide: meta.axisSide,
space: 8.0,
child: text,
);
}),
),
leftTitles: AxisTitles(
axisNameWidget: const Text(
'Vrednost',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (double value, TitleMeta meta) {
const style = TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
);
String text;
switch (value.toInt()) {
case 1:
text = '10K';
break;
case 3:
text = '30k';
break;
case 5:
text = '50k';
break;
default:
return Container();
}

return Text(text, style: style, textAlign: TextAlign.left);
},
reservedSize: 40,
interval: 1,
),
),
);
}

Can you explain how to zoom charts??

I got the 500th like!

Can the gradient colors be along the vertical axis instead? It'd make more sense in many use cases...

Hey sir nice tutorial how to make tooltip add certain dot without on tap event in fl chart

How can we make a linechart with timestamp as the x-axis parameter. Basically I want to plot data every second as it is being added to firestore database.

Thanks Jhonnes

Thank you for this tutorial :)

Great job. Could you please make fl line and pie chart data from json url based apis. It would be great help or share any refrenece. Thank you.

How can I connect this with google sheets API?

It's amazing! Thank you!

if you're having error (TextStyle? cannot be assigned to TextStyle?) when adding ''getTextstyles' , just update dependency to 0.41.0{null safety) and add 'context' with value....... thank you for this video

Hi this really helped me. Just one question... can I somehow declare the direction in which the linear gradient under belowBarData is shown? Id like to have it from top to bottom but its from left to right... great video tho

i want to show the line below fldot for some points, is it possible? also that line should be visible without taping on it..?

very good

Impressive ♥️♥️ 🌟

Really Helpful Video.

Hey Jonnahes love your content.... Can I possible get the from firebase and put in the Line chart? Any source

UPDATE 2021: to get getTextStyles working you need to add context. So then it becomes
getTextStyles: (context, value) => const TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,),

Thank you bro for video. Helps a lot!

Hey, it's a great tutorial! But I've got a question, how can I make the chart scrollable on the X-axis? Because I need to show data for the date range a year back, the chart would be too big to display without scrolling. Would be great to know the solution to implement something like this. Thank you.

Sir kindly make banking app using flutter.???

how to change the color gradient of area under the graph from left to right to top to bottom

Thank you. it is very helpful

you look different on videos ,than in real

Whatever I search regarding flutter, you are always there to help me.
You are awesome man❤❤.

Thanks for the video, helps a lot!

Excellent Johannes, thanks

dieser deutsche Akzent xD

Wonderful tutorial! I just want to ask if there's a way to dynamically change the labels of the graph? I think they are built to be constants but since this is a graphic tool, it should be able to be changed dynamically. Thank you!

Sir, how can I fix the Y-Axis to contains only 10 value?

great, many thanks Johannes

FlSpot(1,-0.16752809), FlSpot(3, 0.24400593),FlSpot(6, 4.68283943),FlSpot(10, 19.54111649) value add than over follow the scren

values on x and y axis are overlapping when I increase values on x or y axis.
Is there any solution for this?

great video but I'm facing a bit of a problem with the chart as some extra lines show up on the chart as if their start and end is connected.

(G)old

muito obrigado mesmo.Toppp dmmssss. Sou do Brasil