c3js / c3js/c3

Axis rotated bar chart clips axis x tick text

Open
#1,570 2 comments 0 reactions 0 assignees View on GitHub
C-bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.