Add a way to control X axis width in rotated mode

[m-gallesio]

Description

There does not seem to be a way to control the width of the X axis when the rotated flag is set to true. This is important when using long category labels. The equivalent in non-rotated mode should be axis.x.height which does work, but has no apparent effect in rotated mode.

Steps to check or reproduce

import "billboard.js/dist/billboard.css";
import bb from "billboard.js";

bb.generate({
  data: {
    x: "x",
    columns: [
	["x", "Some long category text which will be wrapped", "Some other very long category text", "Yet another long category name", "Again, a long category name"],
	["One", 30, 200, 100, 400],
	["Two", 90, 100, 140, 200]
    ],
    type: "bar",
  },
  axis: {
    rotated: true,
    x: {
      height: 100,
      type: "category"
    }
  },
  padding: {
    left: 200,
  },
  bindto: "#categoryData"
});

[netil]

@m-gallesio as the example provided, padding=200 will behave similarly as "axis.x.width", where will make have some space.

Probably if you need to display x axis text fully without line breaks, you can use axis.x.tick.multiline=false option.

[m-gallesio]

The problem with padding is that the free space is not optimized. I added it in the sample code to show how narrow the actually allocated space is. In our actual use case the (customer-provided) labels can be even longer than those I gave as samples, so just disabling multiline would not solve all cases.

[netil]

how about setting as padding.mode='fit'? Setting as is, will make chart elements to fully occupy the container. If needs add some space, can adjust by giving padding.left value and in this case the value will be applied relative from the initial(mode='fit') state.

• https://jsfiddle.net/netil/k2eaLs7q/

[m-gallesio]

It does not really solve the underlying problem, which is an unbalancedly small space for the label Another approach I tried is using combining multiline with manual \ns instead of relying on the library to split the text, but multiline just ignores them.

[netil]

@m-gallesio, maybe there's misunderstanding on this. As the issue title "way to control X axis width in rotated mode",

if some option axis.x.width is provide, and assume setting width of x axis as below

I don't get any visual difference on giving left padding.

Can you provide a visual description? What is the usability for axis.x.width option?

[m-gallesio]

Making sure the text fills as much as the allocated space as possible:

[netil]

@m-gallesio, for that reason you can use axis.x.tick.width option.

• https://jsfiddle.net/6gbt4syx/2/

[m-gallesio]

It works, thank you for your attention and sorry for the late response.