#219·c3

Labels cut off in chart

Author: AbeHandlerCreated May 7, 2014Updated Jan 9, 2025
Labelsquestion

I have a bar chart with rotated axes. The labels are a little long and are getting cut off. Here is a live demo:

https://dl.dropboxusercontent.com/spa/juxddtvfvlf51yv/Sample/test.html

Here is the code:

javascript
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 50, 50, 50, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.25 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    },
    axis: {
        x: {
            type: 'categorized',
            categories: ['City: Police and Fire', 'City: General Fund', 'City: Public Library', 'Board of Liquidation', 'Sewerage and Water Board', 'Audubon Zoo', 'Audubon Aquarium', 'Board of Assessors', 'School Board', 'Levee Board', 'Law Enforcement', 'Economic Development','Parkway and Recreation Department', 'Capital Improvement', 'Street and Traffic Control', 'Police and Fire']
        },
        rotated: true
    }
});