c3js / c3js/c3

Donut chart with 100% is not completely closed

Open
#2,504 2 comments 0 reactions 0 assignees View on GitHub
C-bug
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

* **C3 version**:
- v0.6.8
* **D3 version**:
- 5
* **Browser**:
- Firefox Latest
* **OS**:
- Ubuntu 18.04

When one serie is 100% in a donut chart - the charts has a small "gap" at the top.

```
var chart = c3.generate({
data: {
columns: [
['data1', 100],
['data2', 0],
],
type : 'donut'
},
donut: {
title: "Iris Petal Width"
}
});
```

yields:

![grafik](https://user-images.githubusercontent.com/183248/46812235-94bb3f80-cd74-11e8-827e-fb4e8800382d.png)

But:

```
var chart = c3.generate({
data: {
columns: [
['data1', 0],
['data2', 100],
],
type : 'donut'
},
donut: {
title: "Iris Petal Width"
}
});
```

yields:

![grafik](https://user-images.githubusercontent.com/183248/46812283-b1577780-cd74-11e8-9d0c-adb198728763.png)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the provided c3.generate donut examples with D3 5 in Firefox, comparing the cases where data1 or data2 is 100%. Inspect the donut rendering entry point to find why one 100% series leaves a gap; done means a 100% donut is completely closed in both examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3js, javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.