Inline axis text

Description

For a line-chart I’d like to be able to set Y-axis tick text inline on narrow screens: The tick text would show inside the line-chart as described in this article: “Inset y-axis labels on small viewports”

On narrow screens this would free up some horizontal space in the left margin of the chart. I cannot find any config setting for this.

I could set something like:

chart.config( `axis.y.tick.text.position.x`, 20); // 20 is arbitrary :(

… but the value (20) depends on the width of the value, and this could be anything…

Q: Is there a way to set the Y-axis text ‘inline’?

[netil]

@davidhund, I fixed axis inner style to be updated via .config() (checkout the screenshot from #802)

[davidhund]

@netil - I’ve added a codepen: https://codepen.io/davidhund/pen/jJmLjJ

The issue is with dynamically setting the inner with chart.config

If you look at the JS pane, line 29 I can set inner to true directly and it works

// ..
axis: {
  y: {
    inner: true // THIS WORKS
  }
}
// ..

However: I am using chart.config after initializing the Chart (see line 68):

if(window.matchMedia(`(max-width: 55em)`).matches) {
  // ...
  chart.config(`axis.y.inner`, true); // THIS DOES NOT WORK
}

Maybe that is because I found I needed to re-draw the Chart with chart.show() after creation to have the config changes be picked up. See lines 73 - 75

// Config changes
// .. chart.config(xyz);

// RE-render (!?)
// https://github.com/naver/billboard.js/issues/500#issuecomment-406487456
chart.show();