0

I am using C3.js and needs to display custom legend text instead data1, data2, etc in the legend. So I have used names property but still the customized legends text is not appearing.

The following is my code :

$scope.chart1 = {
        size: {
            height: 175
                // width: 480
        },
        data: {
            type: 'pie',
            columns: [
                ['data1', 45],
                ['data2', 100],
                ['data3', 60],
                ['data4', 5]
            ]
        },
        tooltip: {

        },
        legend: {
            show: true,
            position: 'right'
        },
        names: {
            'data1': 'warning',
            'data2': 'success',
            'data2': 'info',
            'data2': 'danger'
        } 
    };

Can any one help what is the right way to display custom legend texts?

Madasu K
  • 1,813
  • 2
  • 38
  • 72
  • http://jsfiddle.net/jrdsxvys/9/ – Mahi Oct 21 '16 at 05:05
  • is there any other possible way of achieving this without directly keeping the customised text like that. I need to have data1, data2, but while displaying I need display 'warning', 'success', etc. – Madasu K Oct 21 '16 at 05:14

1 Answers1

1

var chart = c3.generate({
    padding: {
        top: 10,
        right: 0,
        bottom: 10,
        left: 0,
    },
    data: {
        columns: [ ['data1', 45],
                ['data2', 100],
                ['data3', 60],
                ['data4', 5]],
        type: 'pie',
        labels: true,
      names:{
            'data1': 'warning',
            'data2': 'success',
            'data2': 'info',
            'data2': 'danger'
    }
    }
    //But these legend values or not showing 

});
<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' />
Mahi
  • 1,707
  • 11
  • 22
  • essentially you replaced the data1, data2, etc with custome texts, which I do not prefer. What I am looking for is, for example if you want to customise colors for each legend, you can use colors property (http://c3js.org/samples/data_color.html), in the same way is there any way to customise legend texts. If you see the post http://stackoverflow.com/questions/30191582/how-can-i-change-text-of-legend-in-c3-pie-chart, there he mentioned names property is used for this but his sample code is not working out. I want a similar solution like that – Madasu K Oct 21 '16 at 05:53
  • @MadasuK is this you wanted ?? – Mahi Oct 21 '16 at 06:46