c3js / c3js/c3

Category label can get cut off for rotated graph with only 2 categories

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

Description

* **C3 version**: 0.4.21
* **D3 version**: 3.5.8
* **Browser**: Chrome 64.0.3282.167
* **OS**: MacOS 10.13.3

I have a rotated graph so that the category labels are displayed to the left of the chart. Multiline is set to false so that the labels are on a single line. If there is 3 or more categories, the space for labels are calculated correctly, however if there are only 2 categories only the first label's width is considered. If the second label is longer than the first label it will extend outside the svg area and become cutoff.

Demo on codepen: https://codepen.io/MacArmstrong/pen/paKBMg

`var chart = c3.generate({
data: {
columns: [
['Values', 10, 20]
]
},
axis: {
rotated: true,
x: {
tick: {
multiline: false
},
type: 'category',
categories: ['Normal Label', 'Longer Label Name']
}
}
});`

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.