CODEWITHSUNDEEP
javascriptchartsc3
confusedfreak
confusedfreak

Reputation: 101

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.

Upvotes: 9

Views: 6926

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

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

Upvotes: 19

Related Questions