How can i change text of legend in c3 pie chart

Question

How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.

Currently i am using this code it show legend for true but I not able to change the text I have tried this.

var chart = c3.generate({
        bindto: '#container',
        padding: {
                  top: 10,
                  right: 0,
                  bottom: 10,
                  left: 0,
            },
        data: {
            columns: [<?php echo $pieChartDataString; ?>],
            type : 'pie',
            labels: true
        },
        legend: {
                show: true,
                position: 'upper-center'
                format: {
                        title: function () { return "Legend title"; },
                        name : function () { return "Legend name"; },
                        value: function () { return "Legend value";}
                        }
                }

   //But these legend values or not showing 

    });

It's not showing my legend values its always shows only columns as legend.

Is there any way that I can change the legend values.

score 15 · Answer 1 · edited May 02 '17 at 10:17

15

You haven't provided the data that gets outputted from your php, so it's hard to say.

But the first item in each of the columns array determines the name that goes in the legend. So:

columns: [
    ['this is legend 1', 30],
    ['put your value here', 120], 
]

would result in the legend labels being "this is legend 1" and "put your value here".

Here's a fiddle: http://jsfiddle.net/jrdsxvys/9/

Edit... Another option is to use the names property, as done here: http://jsfiddle.net/jrdsxvys/40/

data: {
    columns: [
      ['d1', 30],
      ['d2', 120]
    ],
    type: 'pie',
    labels: true,
    names: {
      d1: 'some name here',
      d2: 'another name'
    }
}

edited May 02 '17 at 10:17

Aman Gupta

5,548
10
52
88

answered May 13 '15 at 15:05

Sean

14,359
13
74
124

I wish there were some more simple way . – Abhijit Gujar Jan 14 '19 at 05:45
Using names as above is a very easy method provided by the c3 library to modify legend labels. Here is another example provided by c3, which you can play around with and test to make it work: https://c3js.org/samples/data_name.html – Farhan Kassam Aug 24 '22 at 19:21

score 1 · Answer 2 · answered Oct 27 '17 at 21:01

1

@agpt Yes. The names property is a good way to go generally because the first property of the columns data array eg 'd1' above is used when doing things like having multiple types on charts. eg for a bar and line combination using types instead of type: 'pie':

columns: [
   ['bar_1', 3, 8, 6],
   ['bar_2', 4, 0, 7],
   ['bar_3', 2, 3, 0] 
],

types: {
  bar_1: 'bar',
  bar_2: 'line',
  bar_3: 'bar'
},

names : {
      bar_1: 'Initial',
      bar_2: '3 month',
      bar_3: '6 month'                
}

So, using the names property allows you to use more 'dynamic' property names and be consistent throughout the config.

answered Oct 27 '17 at 21:01

Murrah

1,508
1
13
26

Is there a way to do this but put spaces in the name? For example instead of the legend showing bar_1 it would be bar 1? – wuno Mar 15 '18 at 18:48
1

I am not working on that for now. Try eg `names : { 'bar 1': 'Initial' etc }` ie wrap all properties in quotes. Just a thought. – Murrah Mar 15 '18 at 23:57

How can i change text of legend in c3 pie chart

2 Answers2

Linked