google / charts

https://pub.dev/packages/charts_flutter
Apache License 2.0
2.81k stars 1.21k forks source link

How to change color in pie chart? #412

Open AeroAngel123 opened 4 years ago

AeroAngel123 commented 4 years ago

I'm new to google chart flutter. I'm trying to implement a pie chart but not being able to change its default blue palette. I was able to do it for group bar charts. I want to make each category a different color in a pie chart as well. Here is an example that I pulled from their site:

/// Simple pie chart example. import 'package:charts_flutter/flutter.dart' as charts; import 'package:flutter/material.dart';

class SimplePieChart extends StatelessWidget { final List seriesList; final bool animate;

SimplePieChart(this.seriesList, {this.animate});

/// Creates a [PieChart] with sample data and no transition. factory SimplePieChart.withSampleData() { return new SimplePieChart( _createSampleData(), // Disable animations for image tests. animate: false, ); }

@override Widget build(BuildContext context) { return new charts.PieChart(seriesList, animate: animate); }

/// Create one series with sample hard coded data. static List<charts.Series<LinearSales, int>> _createSampleData() { final data = [ new LinearSales(0, 100), new LinearSales(1, 75), new LinearSales(2, 25), new LinearSales(3, 5), ];

return [
  new charts.Series<LinearSales, int>(
    id: 'Sales',
    domainFn: (LinearSales sales, _) => sales.year,
    measureFn: (LinearSales sales, _) => sales.sales,
    data: data,
  )
];

} }

/// Sample linear data type. class LinearSales { final int year; final int sales;

LinearSales(this.year, this.sales); }

jkbngl commented 4 years ago

Hi @AeroAngel123, take a look at: https://stackoverflow.com/questions/51879810/how-to-add-a-legend-on-pie-chart-from-flutter-charts-flutter

I think he accomplished what you want to accomplish!

leech001 commented 4 years ago
  static List<charts.Series<GaugeSegment, String>> _createSampleData() {
    final random = new Random();

    final data = [
      new GaugeSegment('Low', random.nextInt(100), charts.MaterialPalette.red.shadeDefault),
      new GaugeSegment('Acceptable', random.nextInt(100), charts.MaterialPalette.yellow.shadeDefault),
      new GaugeSegment('High', random.nextInt(100),charts.MaterialPalette.green.shadeDefault),
      new GaugeSegment('Highly Unusual', random.nextInt(100), charts.MaterialPalette.blue.shadeDefault),
    ];

    return [
      new charts.Series<GaugeSegment, String>(
        id: 'Segments',
        domainFn: (GaugeSegment segment, _) => segment.segment,
        measureFn: (GaugeSegment segment, _) => segment.size,
        colorFn: (GaugeSegment segment, _) => segment.color,
        data: data,
      )
    ];
  }

}

/// Sample data type.
class GaugeSegment {
  final String segment;
  final int size;
  final charts.Color color;

  GaugeSegment(this.segment, this.size, this.color);
}
jkbngl commented 4 years ago

works just perfect and very easy to implement, thanks @leech001

SAray2013 commented 4 years ago

Thank you is working :-)

SAray2013 commented 4 years ago

Could i customize colors? Example: Color(0xFFf1f1f1);

jkbngl commented 4 years ago

@SAray2013 sure, just when you create a new GaugeSegement pass in the Color this segment should have, e.g.:

GaugeSegment("Electronics", 5, charts.ColorUtil.fromDartColor(Color(0xFFf1f1f1)))

and then as by the example of @leech001 pass when creating the chart as colorFn the segment color:

colorFn: (ChartObject segment, _) => segment.color,

I hope this clears some stuff for you!

jay23794 commented 4 years ago

working fine @leech001 thanks 💯