Grid line with label cutoff by range
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
Grid lines with label are cutoff/clipped by the top of the chart and as far as I can tell there is no api to fix this or adjust the range so that the grid displays the value.
I was going to get the current range then adjust it down but the range API does no return the actual chosen range - it just returns undefined. I tried adjusting the padding which had no effect.
I want to use the auto-range selection capability of c3 since user entered data may vary
You can see that the word Goal at the top of the chart is cutoff about halfway so you can't see the top of the letters.

I have a straightforward configuration setting the text of the grid line to 'Goal', and it would be fine if it didn't get cutoff in the rendering.
grid: {
y: {
lines: [
{value: 0, text: 'Goal', position: 'start'}
]
}
}
Contributor guide
Research direction
Start from the grid.y lines configuration and the range API behavior described in the issue, then reproduce the chart with the provided Goal label and auto-range enabled. Verify the result by checking that the label is fully visible at the chart boundary while user-entered ranges still render correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3, javascript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100