search

c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

Donut chart with 100% is not completely closed #2504

Open madflow opened 5 years ago

madflow commented 5 years ago

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

But:

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

yields:

grafik

mattbeevor commented 5 years ago

The white line is the stroke around the zero thickness arc. Zero thickness arcs are still rendered. As arcs are rendered in order, when the zero thickness one is the first one listed it will be occluded by the second arc, that is why you only see the problem when the zero thickness one is listed second.

To solve this I could try to set the arcs visibility to "hidden" when it has a value of 0 and submit a PR.

@panthony do you know if this is a good idea and is likely to be accepted?

This is my first time trying to fix a bug so I hope this makes sense.

madflow commented 5 years ago

@mattbeevor This has been fixed in a C3 fork: https://github.com/naver/billboard.js/issues/652

Maybe this can help with the PR.