c3js / c3js/c3

Grid line with label cutoff by range

Open
#1,518 1 comment 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

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.

screen shot 2015-12-26 at 7 45 27 pm

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.