Text alignment in labels and legends

[hxu]

I'm trying to recreate the grouped bar chart example here, but am experiencing some positioning issues with the labels in certain parts of the chart:

• Legend labels appear offset above the legend keys:
  . The width of the label text is also not being taken into account when placing the next legend item.
• x and y axis labels are too close to the axis:
  and
  

This looks like a styling issue, because when I remove Bootstrap's CSS styles, the chart renders fine. However, I can't pinpoint which styles is affecting the placement of the text. I've tried overriding the line spacing and text size, but that didn't seem to work. The SVG is rendered in a variable width div, but the SVG itself has fixed width.

Can you shed some light on what assumptions dimple is using the calculate the positioning of the labels?

[johnkiernander]

Hi, are you using the latest version of dimple (v1.1.2)? This looks like a problem caused by Chrome v30 which was fixed in an earlier release.

[hxu]

I'm using 1.1.3. The error also appears in IE10.

In Firefox, there appears to be a bigger bug. The x-axis will render, but nothing else, and I get the exception NS_ERROR_FAILURE. Console shows it to be line 1361 in dimple.v1.1.3.js, which is a call to getBBox(). Seems like this method is not supported by Firefox in certain cases (see Bugzilla report). The documentation demo doesn't run into this bug, but my page does, for some reason.

[johnkiernander]

I see, that looks like a bug then. In answer to your original question the positioning of the titles is done once the axes have drawn, the text is measured and the title is positioned based on the widest axis label to avoid overlap. From the look of you images this seems to have gone wrong. I'll take a look when I'm able. If there's any way you can recreate this in a fiddle it would be incredibly helpful, it isn't a behaviour I have seen before.

[hxu]

I did a bit more testing and realized that it's not actually an interaction with Bootstrap. The problem is that I am drawing the chart in an element that is hidden at the time of drawing. This seems to throw off the positioning calculations.

See this Plunker for an example.

I'll see if I can think of a way to solve this issue -- maybe there is a way for the chart to detect whether it is visible, then delay drawing until it becomes visible?

[hxu]

It seems like there isn't a way in JavaScript to listen to when an element becomes visible, so we cannot attach an event listener to the chart. This may need to be handled by the application that is using dimple (i.e. the application needs to have a callback that renders charts after it makes the chart containing element visible).

@johnkiernander what do you think? It is probably at least worth mentioning this issue in the docs, though.

[johnkiernander]

That's a very interesting one, I hadn't even considered the problems with measuring on a hidden element. Thank you for such a good and clear example, that helps immeasurably. I agree that if we can't solve it we should add a comment into the documentation, however I'm not ready to admit defeat yet!

[hxu]

Happy to help! I'll leave this ticket open then, and will also try to think of some possible solutions.

[twaggs]

As a workaround you can use visibility:hidden instead of display:none, if that works for your scenario.

[johnkiernander]

Good thinking, that seems to work

[johnkiernander]

I've tried to think of any ways we could guard against this in Dimple but I think the best thing is using @twaggs suggestion, or alternatively drawing to a visible div and immediately moving the chart in the DOM.

[16745266]

Hello,
Have been dealing with this problem myself when populating charts into a bootstrap carousel. Active carousel element displays everything properly, all other slides in slideshow have shifted axis and legend labels. Playing with display properties before/after rendering didn't help.

An easy workaround I have found is to move the text after rendering with the standard d3 library.

// define the legend
var lgd = Chartl4.addLegend(100, 20, 50, 400, "left");
//draw the chart
Chartl4.draw(2000);
// move legend text down 8px
lgd.shapes.selectAll("text").attr("dy", "8");

note: you can use "dx" to move x position as well

[falconair]

I ran into this issue as well. I had to set my project aside for a few weeks because I couldn't make head or tails of the situation. Luckily I just found the following comment by @johnkiernander on SO, which brought me here:
http://stackoverflow.com/a/22322570/46799

Looks like my problem is also caused by drawing to a non-visible div. In my case, I'm using bootstrap tabs. Chrome and Safari render my page just fine, Firefox shows an "NS_FAILURE_ERROR" in dimple.v2.1.0.js's line 1911. As mentioned by @hxu, this line contains 'this.getBBox()' method!

I can't use @twaggs solution, since I don't control BS tabs. If I come up with a solution, I'll post it here.

Update:
I ended up over-riding bootstrap tabs' display display attribute. Basically the solution offered by @twaggs . My specific code solution came from:
http://stackoverflow.com/a/23267110/46799