Chartist-js: Styling labels

[klaemo]

Hey,
this is more of a question than an issue. I have a bar chart with distributeSeries: true, a lot of bars and rather wordy labels that overlap:

You can see the problem :) So, I have tried rotating the labels:

Using this pattern I'd ideally want to force the labels to be one-line only and align perfectly with the bar. How can I achieve that?
I'm also open for different ideas about positioning the labels.

Thank you very much, for this module and your help.

[klaemo]

Solved it! Here's the code

chart.on('draw', (ctx) => {
      if (ctx.type === 'label') {
        // adjust label position for rotation
        const dX = ctx.width / 2 + (100 - ctx.width)
        ctx.element.attr({ x: ctx.element.attr('x') - dX })
      }
})

and

.ct-chart-bar .ct-label.ct-horizontal.ct-end {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: rotate(-30deg);
  transform-origin: 100% 0;
  text-align: right;
  max-height: 1.5em;
  min-width: 100px;
  max-width: 100px;
}

[knoxcard]

The css is missing a comma

.ct-chart-bar .ct-label.ct-horizontal.ct-end {

should be

.ct-chart-bar, .ct-label.ct-horizontal.ct-end {

Also, this could have just been an issue with my other css files, but I had to alter the relative position as well.

  position: relative;
  left: -102px;

[knoxcard]

Everything works just fine with the CSS alone, the javascript actually caused the chart to display incorrectly for me.

Did not need this...

chart.on('draw', (ctx) => {
   if (ctx.type === 'label') {
    // adjust label position for rotation
    const dX = ctx.width / 2 + (100 - ctx.width)
    ctx.element.attr({ x: ctx.element.attr('x') - dX })
  }
})

[ArneGockeln]

this code modifies the x position of the label on both x AND y axis.

chart.on('draw', (ctx) => {
   if (ctx.type === 'label') {
    // adjust label position for rotation
    const dX = ctx.width / 2 + (100 - ctx.width)
    ctx.element.attr({ x: ctx.element.attr('x') - dX })
  }
})

I am using month names on x axis and modified the code to:

const monthLabels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

chart.on('draw', function(data){
    if(data.type === 'label'){
        // adjust position x on rotated labels on x axis
        if(_this.monthLabels.includes(data.text)){
            const dX = data.width / 2 + (100 - data.width);
            data.element.attr({ x: data.element.attr('x') - dX });
        }
    }
})

Thanks for the css rotation! Works like a charm! 👍

[eriknl1982]

I've used the CSS mentioned by klaemo, works like a charm with no additional JavaScript, but I got one problem. The labels seem to walk out of the div, so only half of them are shown:

Any idea what I could do to solve this?

[fdemmer]

@eriknl1982 add axisX: {offset: ...} to add space for labels