CODEWITHSUNDEEP
javascriptbar-chartc3.js
AppSensei
AppSensei

Reputation: 8400

How to resize bar graph in c3.js

I want to make the c3.js graph smaller than it actually is right now. I played with the width but it cuts off the larger value if its not 620.

The red color graph is 620px. I want it to be the size of the first graph with all the values showing without any fade/cutoff.

enter image description here

var chart = c3
            .generate({
                bindto : "#topSources",
                size : {
                    height : 180,
                    width : 620
                },
                bar : {
                    width : 16
                },
                padding : {
                    right : 230,
                    top : 50
                },
                color : {
                    pattern : [ '#008000', '#008000', '#008000', '#008000',
                            '#008000' ]
                },
                data : {
                    columns : [ [ 'Throughput', data.columns[0][1],
                            data.columns[0][2], data.columns[0][3],
                            data.columns[0][4], data.columns[0][5] ] ],
                    type : 'bar',
                    labels : {
                        format : {
                            Throughput : d3.format('$'),

                        }
                    },

                    color : function(inColor, data) {
                        var colors = [ '#008000', '#008000', '#008000',
                                '#008000', '#008000' ];
                        if (data.index !== undefined) {
                            return colors[data.index];
                        }

                        return inColor;
                    }
                },
                axis : {
                    rotated : true,
                    x : {
                        type : 'category',
                        show : false,
                    },
                    y : {
                        show : false
                    }
                },
                tooltip : {
                    grouped : false
                },
                legend : {
                    show : false
                }
            });

Upvotes: 0

Views: 1718

Answers (1)

mgraham
mgraham

Reputation: 6207

Set a value for axis padding (bottom of the y axis in this instance since it's a rotated bar chart). 80px will cover most of the lengths of your labels - if you change the font size etc it'll need to be different

axis : {
      ...
      y : {
         show : false,
         padding: {  // use these 3 lines
            bottom: 80,
         },
      }
},

Upvotes: 1

Related Questions