Labels align with ticks rather than bars about dimple

[johnkiernander]

Hi,

The issue here is that the font size is being set after the drawing logic has taken place. The fact they line up with the ticks is just a coincidence. Unfortunately there isn't a really good way of setting this in-line, I think we need to start exposing font properties through dimple but in the meantime you can work around this by adding some css to set the font size with the !Important modifier. This will override Dimple's in-line sizing and because it is applied before the drawing, Dimple should still manage positioning correctly.

In your example just add some css at the top:

<style>
    text {
        font-size: 12 !Important;
    }
</style>

and remove the following from your script:

svg.selectAll("text")
  .style("font-size", "12px");

I've just tried it and it's rendering correctly. Your approach makes perfect sense and is actually how I originally imagined people setting this kind of property, but it doesn't quite work with fonts due to dimple's reliance on them for positioning. Leave this issue open because I still think this needs to be addressed in the codebase.

Thanks

John

[lornajane]

That looks much better, thankyou!

[johnkiernander]

Font size properties added v2.0.0