c3js / c3js/c3

Labels cut off in chart

Open
#219 29 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

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:

```js
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
}
});
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.