Axis rotated bar chart clips axis x tick text
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
Using this config
{
data: {
type: 'bar',
json: [{"key":"Quia enim ut.","value":24},{"key":"Omnis et dolor ea quod exercitationem sint quo ut tempora doloremque.","value":46}],
keys: {
x: 'key',
value: ['value']
},
labels: true
},
axis: {
rotated: true,
x: {
type: 'category',
tick: {
multiline: true
}
}
},
legend: {
show: false
},
bar: {
width: 16
},
grid: {
y: {show: true}
},
tooltip: {show: false}
}
here
http://c3js.org/samples/chart_combination.html
Displays the second bar tick text clipped, i was also wondering how to display the whole text using multiline false?
Contributor guide
Research direction
Start by reproducing the supplied configuration in the linked chart_combination.html sample, focusing on rotated category axes and multiline tick labels. Trace how the second x-axis tick's text bounds are calculated; done means the long label is not clipped and the behavior of multiline: false is documented or corrected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100