Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating custom donut or pie chart using c3.js

Trying to create the below using c3.js.

enter image description here

We are using the same charting library across the application so would like to keep it consistent. Didn't find a way in c3.js to either customize donut or pie chart to get this. Any help or pointers are greatly appreciated.

like image 545
confusedfreak Avatar asked Jun 25 '15 00:06

confusedfreak


1 Answers

HTML

<div id="chart"></div>

CSS

#chart {
    width: 150px;
    height: 150px;    
}

/* don't do anything fancy when hovering */
#chart .c3-defocused.c3-target {
    opacity: 1 !important;
}

#chart text {
    fill: #ccc;
}

#chart .c3-chart-arcs-title {
    fill: white;
    font-size: 3em;
}

JS

var percentage = 0.79;

var chart = c3.generate({
    data: {
        columns: [
            ['show', percentage],
            ['dontshow', 1 - percentage],
        ],
        type: 'donut',
        order: null
    },
    color: {
        pattern: ['#13BDD1', '#FFF']
    },
    legend: {
        show: false
    },
    donut: {
        label: {
            show: false
        },
        title: Math.round(percentage * 100),
        width: 15,
        expand: false
    },
    tooltip: {
        show: false
    }
});

// baseline text properly
d3
    .select(".c3-chart-arcs-title")
    .attr("dy", "0.3em")

// add percentage symbol
d3.select(".c3-chart-arcs")
    .append("text")
    .text("%")
    .attr("dy", "-0.5em")
    .attr("dx", "2em")

// black background for center text
d3.select(".c3-chart")
    .insert("circle", ":first-child")
    .attr("cx", chart.internal.width / 2)
    .attr("cy", chart.internal.height / 2 - chart.internal.margin.top)
    .attr("r", chart.internal.innerRadius)

Fiddle - http://jsfiddle.net/xpvhow5p/


enter image description here

like image 93
potatopeelings Avatar answered Nov 15 '22 10:11

potatopeelings