Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the chart line color to custom color code value in Flutter

I am using chart_flutter plug in https://pub.dartlang.org/packages/charts_flutter and I want to change the line color of my TimeSeriesChart?

The code I have right now is this:

final chartdata = [
  charts.Series<VolumePerDay, DateTime>(
    id: 'Workout',
    colorFn: (_, __) => charts.MaterialPalette.lime.shadeDefault,
    // colorFn: (_, __) => Theme.of(context).accentColor,
    domainFn: (VolumePerDay workout, _) => workout.time,
    measureFn: (VolumePerDay workout, _) => workout.volume,
    data: data,
  )
];
return charts.TimeSeriesChart(
  chartdata,
  animate: false,
);

I thought that changing the colorFn property would change the color, but if I comment the line with MaterialPalette and uncomment the Theme color line, it gives me an error. How can I set the chart's line color to a color of my choice using color codes?

like image 485
dshukertjr Avatar asked Mar 09 '19 09:03

dshukertjr


2 Answers

I am new to flutter and was also facing the same issue, So, as far as I came to know is that may be we cant use the MaterialColor for the charts Color and So a workaround to this was to replace your charts.MaterialPalette.lime.shadeDefault code with charts.Color.fromHex(code: '#f2f2f2').

This was discussed in this GitHub issue.

like image 187
Mukul Avatar answered Sep 28 '22 15:09

Mukul


Dart colors can be used with ColorUtil method

color: charts.ColorUtil.fromDartColor(Colors.white),
like image 25
Ozcan Avatar answered Sep 28 '22 15:09

Ozcan