imaNNeo / imaNNeo/fl_chart

PieChartData incorrect center color for one PieChartSectionData with opacity color in sections

Open
#1,716 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Dart
Stars
7.6k
Forks
2k
Avg merge
9d 1h
Merged PRs (30d)
2

Description

**Describe the bug**
The center of the pie chart has an incorrect color when it has one PieChartSectionData in the sections parameter and the PieChartSectionData color has opacity

**To Reproduce**

````
import 'package:collection/collection.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() => runApp(const FlChartPieCharts());

class FlChartPieCharts extends StatelessWidget {
const FlChartPieCharts({super.key});

static const List pieChartData1 = [1];
static const List pieChartData2 = [0.5, 0.5];

@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'FL Chart Pie Charts',
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TestPieChart(pieChartData: pieChartData1),
SizedBox(height: 32),
TestPieChart(pieChartData: pieChartData2)
],
),
),
);
}
}

class TestPieChart extends StatefulWidget {
const TestPieChart({super.key, required this.pieChartData});

final List pieChartData;

@override
State createState() => _TestPieChartState();
}

class _TestPieChartState extends State {
int touchedIndex = -1;

@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 2,
child: PieChart(
PieChartData(
centerSpaceColor: Colors.white,
pieTouchData: PieTouchData(
touchCallback: (FlTouchEvent event, pieTouchResponse) {
setState(() {
if (pieTouchResponse == null || pieTouchResponse.touchedSection == null) {
return;
}
touchedIndex = pieTouchResponse.touchedSection!.touchedSectionIndex;
});
},
),
sections: [
...widget.pieChartData.mapIndexed(
(index, data) => PieChartSectionData(
value: data,
radius: 32,
color: touchedIndex == index ? Colors.green : Colors.green.withOpacity(0.5),
),
),
],
),
),
);
}
}

````
**Screenshots**
![simulator_screenshot_63C8B2D6-57D4-4D59-8D17-DC174A4151A5](https://github.com/user-attachments/assets/51dc0138-3c6f-474c-9f1b-acf703e7ef0c)

**Versions**
- which version of the Flutter are you using?
3.22.3
- which version of the FlChart are you using? fl_chart:
0.68.0

Contributor guide

Open the contributing guide

Research direction

Start by running the provided Flutter reproduction and inspect the PieChart, PieChartData, and PieChartSectionData entry points involved in rendering the center and section colors. Reproduce the single-section case with a translucent color, compare it with the two-section case, and verify that the center remains the configured white centerSpaceColor.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.