Rotated tick labels don't save space

[dashkb]

Really impressed with Plottable so far! Just noticed as I'm setting up a horizontal stacked bar chart that rotating the labels doesn't work as I'd expect.

I started with

Figuring that the labels on the Y Axis are wasting space, I rotated them with yAxis.tickLabelAngle(-90), which resulted in -- space not saved.

Next I tried yAxis.tickLabelAngle(-90).xAlignment('left') which almost works: . I couldn't figure out how to get the plot to slide over to line up with the axis.

What's the right way to make this work?

[hellochar]

Hey @dashkb , thanks for your interest in Plottable! What you're looking for is an Inset axis. To achieve this, you'll want to create a single Plottable.Components.Group that has both the Plot and the Axis, and then set the yAlignment of the Axis to be "left":

var plotAndAxis = new Plottable.Components.Group();
plotAndAxis.append(barPlot);
plotAndAxis.append(yAxis);

var table = new Plottable.Table([
  [plotAndAxis],
  [xAxis]
]);

table.renderTo(...)

[dashkb]

@hellochar thanks for your help! That got me closer, but now the plot moved all the way to the left edge of the container and the axis is in the same place as before.

// it's not coffeescript, but @ means `this.`
const plotAndYAxis = new Plottable.Components.Group()
plotAndYAxis.append(@plot)
plotAndYAxis.append(yAxis)

yAxis.tickLabelAngle(-90).xAlignment('left')

@plotTable = new Plottable.Components.Table([
  [plotAndYAxis],
  [xAxis]
]).
  columnPadding(0).
  renderTo(@$('.chart'))

[hellochar]

You did hit a bug here - vertical category labels still calculate space as if they're horizontal. As a workaround, try a right oriented y axis?

edit: that last image in the OP is interesting, it seems as if there's some extra hidden margin. Could you provide a jsfiddle repro so I can poke around with Chrome Debugger?

[dashkb]

Fiddle: https://jsfiddle.net/dashkb/8guqdqmh/1/ :violin:

[dashkb]

Another issue: with .labelsEnabled(true) the labels show up in no man's land: