How To Create Custom Line Chart in Flutter? - flutter

Question

I just want to line chart in my flutter application like below image.
Here is my code but the result output is normal. i am using charts_flutter: ^0.9.0 packages.
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter_screenutil/screenutil.dart';
import 'data/sale_data.dart';
class LineChart extends StatelessWidget {
// Defining the data
final data = [
new SalesData(1, 7),
new SalesData(2, 19),
new SalesData(3, 6),
new SalesData(4, 3),
new SalesData(5, 10),
new SalesData(6, 21),
new SalesData(7, 3),
new SalesData(8, 10),
new SalesData(9, 5),
new SalesData(10, 15),
new SalesData(11, 8),
new SalesData(12, 12),
new SalesData(13, 6),
new SalesData(14, 18),
new SalesData(15, 4),
new SalesData(16, 8),
new SalesData(17, 3),
new SalesData(18, 12),
new SalesData(19, 7),
new SalesData(20, 3),
new SalesData(21, 8),
new SalesData(22, 12),
new SalesData(23, 6),
new SalesData(24, 18),
new SalesData(25, 4),
new SalesData(26, 8),
new SalesData(27, 3),
new SalesData(28, 12),
new SalesData(29, 7),
new SalesData(30, 3),
new SalesData(31, 8),
new SalesData(32, 12),
new SalesData(33, 6),
new SalesData(34, 18),
new SalesData(35, 4),
new SalesData(36, 8),
new SalesData(37, 3),
new SalesData(38, 12),
new SalesData(39, 7),
new SalesData(40, 3),
];
_getSeriesData() {
List<charts.Series<SalesData, int>> series = [
charts.Series(
//dot color is fillcolorfn
fillColorFn: (SalesData series, _) =>
charts.MaterialPalette.green.shadeDefault,
//seriesColor: charts.ColorUtil.fromDartColor(Colors.red),
id: "Sales",
data: data,
patternColorFn: (SalesData series, _) => charts.MaterialPalette.white,
// areaColorFn: ((SalesData series, _) => charts.MaterialPalette.black),
domainUpperBoundFn: (SalesData series, _) => series.domainUpper,
domainLowerBoundFn: (SalesData series, _) => series.domainLower,
measureUpperBoundFn: (SalesData series, _) => series.measureUpper,
measureLowerBoundFn: (SalesData series, _) => series.measureLower,
domainFn: (SalesData series, _) => series.year,
measureFn: (SalesData series, _) => series.sales,
colorFn: (SalesData series, _) =>
charts.MaterialPalette.red.shadeDefault),
];
return series;
}
#override
Widget build(BuildContext context) {
return Container(
height: ScreenUtil().setHeight(800),
child: Card(
color: Colors.white,
child: Padding(
padding: EdgeInsets.only(
left: ScreenUtil().setWidth(20),
right: ScreenUtil().setWidth(20),
),
child: Column(
children: <Widget>[
// Text(
// "Sales of a company over the years",
// style: TextStyle(fontWeight: FontWeight.bold),
// ),
// SizedBox(
// height: 20,
// ),
Padding(
padding: EdgeInsets.only(
top: ScreenUtil().setWidth(20),
),
child: Align(
alignment: Alignment.centerRight,
child: Container(
alignment: Alignment.topRight,
color: Colors.white,
height: ScreenUtil().setHeight(50),
width: ScreenUtil().setWidth(100),
child: Text("hello"),
),
),
),
Expanded(
child: new charts.LineChart(
_getSeriesData(),
animate: true,
// domainAxis: new charts.NumericAxisSpec(
// // Set the initial viewport by providing a new AxisSpec with the
// // desired viewport, in NumericExtents.
// viewport: new charts.NumericExtents(0.0, 40.0)),
),
)
],
),
),
),
);
}
}
my output image is below

Answer 1

I've checked the two images that you've shared and the only difference that I can see seems to only be different colors used on those charts. You can try using fl_chart plugin to see if it fits your use case. With fl_chart, it allows you to modify the charts color as detailed on the docs.