Truncated labels in axis using custom font

[NeomMob]

Truncated labels using custom css

This is a follow up of #425 even using latest version and setting clippath, a aprt of the labels is missing.

I there somehting I am doing wrong?

[netil]

Hi @NeomMob, can you provide a reproducible code? This issue comes mainly from the calculating y Axis space and determining the correct space will be affected by user's environment (what type of font is used, etc.)

Maybe providing spatial option like axis.x.height option for the solution.

[NeomMob]

Thanks for you answer and all the support you provide. Actually it happens when the page containing the chart is scalled down (using a transform). Do you apply any kind of redrawn/relayout on container/browser resize?

[netil]

To determine chart main's element(chart.$.main) translate, it goes to determine the y Axis max value. Is because, y Axis will represent the max value bound.

The above function will return the current y Axis max width value. chart.internal.getAxisWidthByAxisId("y")

In my understanding, 'scaled down' using transform was done by scale(), right?

If you check the example below, applying trasnform:scale() to the bind <div> element will work basically. But always the result will differ depending the environment(css applied, bind element's size, etc.) you have.

• https://stackblitz.com/edit/daud2p?file=index.js

[NeomMob]

@netil Thanks for the time passed to investigate the issue. I forked your stackblitz in order to reproduce the issue: here is the modified version: https://stackblitz.com/edit/daud2p-xjed6k

[NeomMob]

@netil any idea from where the issue come from and how I can help you to find the root cause? Thanks

[netil]

@NeomMob, I did a short investigation on this, and figured out not getting correct axis' width value.

Before the chart is rendered, it goes evaluating Y axis width value, to determine the whole chart size. The width evaluation is done about <text> element, but it should be done with its parent element <g>.

So, the current evaluation will return small number than the expected.

getMaxTickWidth(id, withoutRecompute) {
    ...
    dummy.selectAll("text")
		.each(function() {
			// it should evaluate against 'this.parentNode'
			maxWidth = Math.max(maxWidth, this.getBoundingClientRect().width);
		});

• https://github.com/naver/billboard.js/blob/master/src/axis/Axis.js#L485

But, noticed even this updates, will not fix the issue. Need more investigation, but I'm quite busy dig into for now.

I'll be heading after my priorities works are done. Thanks!

[netil]

I looked more in this, and there's no need to be fixed from the library.

To deal with your issue, there're 2 options:

1. Update the scale right after the generation.

<style>
#areaChart {
	font-size: 40px;
}
</style>
<script>
var chart = bb.generate({ ... });

// update the scale right after
document.getElementById("areaChart").style.transform = "scale(0.4)";
</script>

2. Simply set an arbitrary padding value

  padding: {
	left: 60
  },

[NeomMob]

@netil Thanks for your time for investigating this. Unfortunately, 1. does not solve the issue (at least in the context I am using it) and I would like to avoid any harcoded padding value.

However I tried with an old version of billboard.js (1.3) and issue was solved. I then checked individually each version until it breaks again. It start to fails from version 1.8 (1.7.1 works fine). I had a quick look on commits but I am not familiar enough with Billboard to have an idea of the change that is breaking my use case.

[netil]

@NeomMob, if is caused from some changes of v1.8.0, checking possible issue can figure out the cause.

• https://github.com/naver/billboard.js/releases/tag/1.8.0

But, I did with different example with the css you used, it doesn't work even on old versions. (I did tests on 1.7 & 1.6)

.bb {
    transform: scale(0.4);
    font-size: 40px;
}

.tick tspan{
	font-size: 32px;
}

will trying to figure out the possible cause.