To utilize LineChart , you need to call the constructor underneath:

 const LineChart(
this.data, {
this.chartRendererKey,
super.key,
super.duration = const Duration(milliseconds: 150),
super.curve = Curves.linear,
});

In LineChart we will use the LineChartData constructor on the data field:

LineChartData({
this.lineBarsData = const [],
this.betweenBarsData = const [],
super.titlesData = const FlTitlesData(),
super.extraLinesData = const ExtraLinesData(),
this.lineTouchData = const LineTouchData(),
this.showingTooltipIndicators = const [],
super.gridData = const FlGridData(),
super.borderData,
super.rangeAnnotations = const RangeAnnotations(),
double? minX,
double? maxX,
super.baselineX,
double? minY,
double? maxY,
super.baselineY,
super.clipData = const FlClipData.none(),
super.backgroundColor,
})

There are some properties of LineChartData:

• > lineBarsData: This property is utilized to draw some lines in various shapes and overlap them.
• > betweenBarsData: This property is utilized to fill the area between two LineChartBarData with a color or gradient.
• > lineTouchData: This property is utilized to handle touch behaviors and responses.
• > showingTooltipIndicators: This property is utilized to show some a popup with information on top of each [LineChartBarData.spots]. Just put line indicator numbers and spot indices you want to show on top of them.
• > titlesData: This property is utilized to hold data for showing titles on each side of the charts.
• > gridData: This property is utilized to be responsible for rendering grid lines behind the content of charts, [show] determines showing or hiding all grids.
• > borderData: This property is utilized to [show] determine to show or hide borders around the chart. [border] Determines the visual look of 4 borders.

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
flutter:
sdk: flutter
fl_chart: ^0.64.0

Step 2: Import

import 'package:fl_chart/fl_chart.dart';

Step 3: Run flutter packages get in the root directory of your app.

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In the main .dart file. We will create a new class MyHomePage(). In this class, we will define a list of <int> showingTooltipOnSpots is equal to 21 in the bracket. It shows when the app runs default shows a popup and line on the 21 number.

  List<int> showingTooltipOnSpots = [21];

Now, we will create a list of FlSpot. It determines the axis based on horizontal and vertical positions.

  List<FlSpot> get allSpots => const [
FlSpot(0, 20),
FlSpot(1, 30),
FlSpot(2, 40),
FlSpot(3, 50),
FlSpot(4, 35),
FlSpot(5, 40),
FlSpot(6, 30),
FlSpot(7, 20),
FlSpot(8, 25),
FlSpot(9, 40),
FlSpot(10, 50),
FlSpot(11, 35),
FlSpot(12, 50),
FlSpot(13, 60),
FlSpot(14, 40),
FlSpot(15, 50),
FlSpot(16, 20),
FlSpot(17, 25),
FlSpot(18, 40),
FlSpot(19, 50),
FlSpot(20, 35),
FlSpot(21, 80),
FlSpot(22, 30),
FlSpot(23, 20),
FlSpot(24, 25),
FlSpot(25, 40),
];

Now, we will create lineBarsData is equal to the LineChartBarData() method. In this method, we will add showingIndicators is equal to showingTooltipOnSpots, spots are equal to the allSpots, also add barWidth, gradient, dotData, etc.

    final tooltipsOnBar = lineBarsData[0];

final lineBarsData = [
LineChartBarData(
showingIndicators: showingTooltipOnSpots,
spots: allSpots,
isCurved: false,
barWidth: 3,
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(colors: [
const Color(0xff9DCEFF).withOpacity(0.4),
const Color(0xff92A3FD).withOpacity(0.1),
], begin: Alignment.topCenter, end: Alignment.bottomCenter),
),
dotData: const FlDotData(show: false),
gradient: const LinearGradient(
colors: [Color(0xff9DCEFF), Color(0xff92A3FD)],
),
),
];

In the body, we will add the LineChart() method. Inside this method, we will add the LineChartData() method. In this method, we will add showingTooltipIndicators show showingTooltipOnSpots.map((index) return ShowingTooltipIndicators with LineBarSpot. It shows some pop-up information on top of the line. We will add lineTouchData where enable was true and it is used to handle the touch behavior.

                    LineChart(
LineChartData(
showingTooltipIndicators:
showingTooltipOnSpots.map((index) {
return ShowingTooltipIndicators([
LineBarSpot(
tooltipsOnBar,
lineBarsData.indexOf(tooltipsOnBar),
tooltipsOnBar.spots[index],
),
]);
}).toList(),
lineTouchData: LineTouchData(
enabled: true,
handleBuiltInTouches: false,
touchCallback: (FlTouchEvent event,
LineTouchResponse? response) {
if (response == null ||
response.lineBarSpots == null) {
return;
}
if (event is FlTapUpEvent) {
final spotIndex =
response.lineBarSpots!.first.spotIndex;
showingTooltipOnSpots.clear();
setState(() {
showingTooltipOnSpots.add(spotIndex);
});
}
},
mouseCursorResolver: (FlTouchEvent event,
LineTouchResponse? response) {
if (response == null ||
response.lineBarSpots == null) {
return SystemMouseCursors.basic;
}
return SystemMouseCursors.click;
},
getTouchedSpotIndicator: (LineChartBarData barData,
List<int> spotIndexes) {
return spotIndexes.map((index) {
return TouchedSpotIndicatorData(
const FlLine(
color: Colors.red,
),
FlDotData(
show: true,
getDotPainter:
(spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 3,
color: Colors.white,
strokeWidth: 3,
strokeColor: const Color(0xffC58BF2),
),
),
);
}).toList();
},
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: const Color(0xffC58BF2),
tooltipRoundedRadius: 20,
getTooltipItems: (List<LineBarSpot> lineBarsSpot) {
return lineBarsSpot.map((lineBarSpot) {
return LineTooltipItem(
"${lineBarSpot.x.toInt()} mins ago",
const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.bold,
),
);
}).toList();
},
),
),
lineBarsData: lineBarsData,
minY: 0,
maxY: 110,
titlesData: const FlTitlesData(
show: false,
),
gridData: const FlGridData(show: false),
borderData: FlBorderData(
show: true,
border: Border.all(
color: Colors.transparent,
),
),
),
),

Then, we will add lineBarsData is equal to the variable lineBarsData that we will already create, minY is zero, maxY is 110, titlesData, gridData, and borderData.

When we run the application, we ought to get the screen’s output like the underneath screen capture.