c3js / c3js/c3

x axis multiline renders different results on init vs. on resize vs. on data toggle

Open
#2,346 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

* **C3 version**: 0.5.2
* **D3 version**: 4.12.0
* **Browser**: Chrome
* **OS**: OSX

* **Code pen**: https://codepen.io/jcsmorais/pen/pLMopX
* **Screen Capture**: https://goo.gl/2o4CjS

* **Summary**:

As you can see on my screen capture above (and code pen) when you have a bar chart with categories with multiline enabled there seems to be a different behavior between when you load the chart and when you resize the screen.

On my code pen you can see that I'm doing a couple sequences of refresh page + change screen width. Do notice that even though I'm changing the screen width it does not affect the width of the chart which is expected, 'cause I have a `max-width`set, but I guess it does lead to a resize being triggered which in turn leads to the long category text being changed from two `tspan` elements to three which makes the category text look way better since it stops looking as if it's been squeezed in there.

It seems this might be related with my custom font size and that it might be that for some reason that's only getting picked up on resize and not on chart initialization.

Side note: after the resize that leads to the three `tspans` being generated, if you toggle the visibility of the data by clicking `ratios` legend, you'll go back to the original structure where two `tspans` are rendered instead of three.

Thoughts?

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.