imaNNeo / imaNNeo/fl_chart

Highlight a specific part of a section in a pie chart.

Open
#586 0 comments 0 reactions 0 assignees View on GitHub
enhancement Pie Chart
Dominant language
Dart
Stars
7.6k
Forks
2k
Avg merge
9d 1h
Merged PRs (30d)
2

Description

This may be a rather specific request, but please bear with me. I'd like to highlight a specific part (%) of a pie chart section(s) (maybe through transparency).

My use case is as follows: I'm using a pie chart for a class in university, to visually represent the weight of assignments (e.g. a project may be 30%, two homeworks 10% each and the exam 50% of the final grade). Now, for most classes, you need to do at least a bit of each assignment to pass, for instance 50% of each assignment (corresponding to 15%, 2x5% and 25% for the previous example). Sometimes it's more complicated, like you may need to do 50% of the exam and 50% of the other tasks in a cumulative manner (so you could do the project and get a max score, and not need to do the homeworks anymore).

For the first (simple) use-case, having a simple `highlightValue` property inside `PieChartSectionData` and a way to toggle whether I want sub-slices to be highlighted or not would suffice. I tried to use my bad photoshop skills to show a rough idea of what I mean by highlighting through transparency:

For the second use case, I'm not sure what the best visualisation would be, I'm open to suggestions. It would be interesting if we could define some pie chart data using a tree of values rather than a simple list. It would require `PieChartSectionData` to have another (optional) field containing a list of `PieChartSectionData`. For the second example above, this would look something like:

```dart
PieChart(
PieChartData(
sections: [
PieChartSectionData(
title: "Assignments",
value: 50,
highlightValue: 25,
subsections: [
PieChartSectionData(
title: "Homework1",
value: 10
),
PieChartSectionData(
title: "Homework2",
value: 10
),
PieChartSectionData(
title: "Project",
value: 30
),
]
),
PieChartSectionData(
title: "Exam",
value: 50,
highlightValue: 25,
)
]
),
);
```

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the PieChart, PieChartData, and PieChartSectionData entry points described in the issue. Determine whether the highlightValue and nested subsections proposals can support both examples without an agreed visualization design. Done should include an accepted API design, the rendered highlighting behavior, and coverage for the supported cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.