Aligning label below chartist chart

Question

I have a page with a chart that is generated using chartist (https://gionkunz.github.io/chartist-js/)

Below the chart, there are some labels. Because of the length of the labels, I need to rotate the labels.

I've been able to do this with some css:

.ct-chart .ct-label.ct-horizontal.ct-end {
  transform: translate(-15px, 15px) rotate(315deg);
  white-space: nowrap;
}

I now however face a issue: when the labels are too long, a part of them gets "chopped off".

I've created a jsfiddle to demonstrate the issue: https://jsfiddle.net/Ls5k2pr0/

Answer 1

The labels are hidden because the overflow the svg element, also they are moved from the original point. Update your css like this:

.ct-chart-bar {
  overflow: visible;
  margin : 0 0 30px 0;
}

.ct-chart .ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  white-space:nowrap;
}

Here is updated JSFiddle https://jsfiddle.net/Ls5k2pr0/1/

Answer 2

fiddle you can add and ellipsis and padding to the svg parent, even though if the label is to long you can also add ellipsis like in the example

.ct-chart .ct-label.ct-horizontal.ct-end {
  transform: translate(-15px, 15px) rotate(315deg);
  white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    width: 50px !important;
}

Answer 3

I complete @xxxmatko answer's by adding the margin margin : 0 0 30px 0; to the .ct-chart-bar css class.

The whole solution is:

.ct-chart-bar {
  overflow: visible;
  margin : 0 0 30px 0;
}

.ct-chart .ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  white-space:nowrap;
 }

Best regards!