Geek Answers Handbook

How to show values ​​in C3.js in Donut Legend?

here is a simple screenshot example where you can see a donut chart.

enter image description here

Is it possible to show real values ​​(rather than% -calculated) in the legend of the diagram marked with red arrows in the screenshot?

Everyone wants to know “22.7 percent of WHAT” when viewing an image, so is there any solution for displaying the sums (for example, I faked them in the screenshot — arrows) of the data rows, or maybe the total amount of all the data rows?

Hi,

Florian

+4
source share
1 answer

/ D3, . , , , , , , .. D3-. , , . .

, ( ) , D3. / .

var cols = [
            ['data1', 30],
            ['data2', 120],
        ];
  
cols[1][0] = "Category C: " + cols[1][1];
  
var chart = c3.generate({
    data: {
        columns: cols,
        type : 'donut'
    },
    donut: {
        title: "Iris Petal Width"
    }
    
});
          
d3.selectAll(".c3-legend-item-data1 text").text("Changed")
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />
+3

More articles:


All Articles