CODEWITHSUNDEEP
user-interfaceflutterchartsinitializer
Little Monkey
Little Monkey

Reputation: 6157

Give a coloured border to pie charts

I'm using this package charts_flutter and I'm trying to give a coloured border to my Pie chart. I've seen that there is a stroke parameter (that should be what I'm looking for since the comment regarding this is: /// Stroke color of the border of the arcs.) , but it's in the "initializer list" and I can't find the way to access it:

ArcRendererConfig(
      {
...
     })
        this.stroke = StyleFactory.style.arcStrokeColor,
...

Is there a way to access it, or some other way to give a border to my pie chart? This is my widget:

charts.PieChart([
      charts.Series<PieEntry, String>(
          domainFn: (PieEntry entry, _) => entry.domain,
          measureFn: (PieEntry entry, _) => entry.measure,
          data: entries,
      )
    ]);

Upvotes: 1

Views: 1007

Answers (1)

nnnte
nnnte

Reputation: 89

I created my own implementation of the Style object by mimicking the default MaterialStyle class. Then, I used the setter to set it globally.

Step 1: Add charts_common to your pubspec.yaml.

  charts_common: ^0.9.0

This should technically already be in your dependencies beacuse charts_flutter uses it, but I included it just to be safe.

Step 2: Implement your own Style class In this example, I changed the arcStrokeColor to my own version of black to match the background. I used the ColorUtil.fromDartColor(Color color) utility to pass in a flutter Color class.

// ignore: implementation_imports
import 'package:charts_common/src/chart/cartesian/axis/spec/axis_spec.dart' show LineStyleSpec;
// ignore: implementation_imports
import 'package:charts_common/src/common/color.dart' show Color;
// ignore: implementation_imports
import 'package:charts_common/src/common/graphics_factory.dart' show GraphicsFactory;
// ignore: implementation_imports
import 'package:charts_common/src/common/line_style.dart' show LineStyle;
// ignore: implementation_imports
import 'package:charts_common/src/common/style/style.dart' show Style;
// ignore: implementation_imports
import 'package:charts_common/src/common/material_palette.dart' show MaterialPalette;
// ignore: implementation_imports
import 'package:charts_common/src/common/palette.dart' show Palette;
import 'package:charts_flutter/flutter.dart';
import 'package:stonks/consts.dart';


class CustomMaterialStyle implements Style {
  const CustomMaterialStyle();

  @override
  Color get black => MaterialPalette.black;

  @override
  Color get transparent => MaterialPalette.transparent;

  @override
  Color get white => MaterialPalette.white;

  @override
  List<Palette> getOrderedPalettes(int count) =>
      MaterialPalette.getOrderedPalettes(count);

  @override
  LineStyle createAxisLineStyle(
      GraphicsFactory graphicsFactory, LineStyleSpec spec) {
    return graphicsFactory.createLinePaint()
      ..color = spec?.color ?? MaterialPalette.gray.shadeDefault
      ..dashPattern = spec?.dashPattern
      ..strokeWidth = spec?.thickness ?? 1;
  }

  @override
  LineStyle createTickLineStyle(
      GraphicsFactory graphicsFactory, LineStyleSpec spec) {
    return graphicsFactory.createLinePaint()
      ..color = spec?.color ?? MaterialPalette.gray.shadeDefault
      ..dashPattern = spec?.dashPattern
      ..strokeWidth = spec?.thickness ?? 1;
  }

  @override
  int get tickLength => 3;

  @override
  Color get tickColor => MaterialPalette.gray.shade800;

  @override
  LineStyle createGridlineStyle(
      GraphicsFactory graphicsFactory, LineStyleSpec spec) {
    return graphicsFactory.createLinePaint()
      ..color = spec?.color ?? MaterialPalette.gray.shade300
      ..dashPattern = spec?.dashPattern
      ..strokeWidth = spec?.thickness ?? 1;
  }

  @override
  Color get arcLabelOutsideLeaderLine => MaterialPalette.gray.shade600;

  @override
  Color get defaultSeriesColor => MaterialPalette.gray.shadeDefault;

  @override
  Color get arcStrokeColor => ColorUtil.fromDartColor(BLACK);

  @override
  Color get legendEntryTextColor => MaterialPalette.gray.shade800;

  @override
  Color get legendTitleTextColor => MaterialPalette.gray.shade800;

  @override
  Color get linePointHighlighterColor => MaterialPalette.gray.shade600;

  @override
  Color get noDataColor => MaterialPalette.gray.shade200;

  @override
  Color get rangeAnnotationColor => MaterialPalette.gray.shade100;

  @override
  Color get sliderFillColor => MaterialPalette.white;

  @override
  Color get sliderStrokeColor => MaterialPalette.gray.shade600;

  @override
  Color get chartBackgroundColor => MaterialPalette.white;

  @override
  double get rangeBandSize => 0.65;
}

Step 3: In your main function, call the setter function provided by StyleFactory

void main() {
  StyleFactory.style = CustomMaterialStyle();
  runApp(MyApp());
}

Step 4: Hot Reload You should see the changes take effect immediately. It'd be nice if the library eventually gave us a proper way to access these members :)

Upvotes: 1

Related Questions