Aligning label below chartist chart

Viewed 2356

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/

3 Answers
Related