Chartist-js: Center line chart labels at grid line

[hansmaad]

If we google for images of "line chart" we quickly see that almost all chart implementations center the axes labels at tick marks or grid line. Chartist does not. Lables are left aligned which can be confusing for longer labels. It's not clear if the label belongs to the left grid line, the right or the space between them. We should have an option to define the alignment or center labels by default.

[amsul]

+1

Just came across the need for this as well. Seems like there's no easy way about this with just CSS — unless if you have a fixed number of columns and the graph is not responsive.

[gionkunz]

Yeah, we need to be careful in changing the defaults in minor releases but in general I agree.

The current best approach for this is to use the draw event to offset all labels -50% (in pixel of course) and then center the text with CSS.

[JosefWN]

Is there any CSS3-only solution, or do we have to use JavaScript for this regardless of browser?

I have solved it with an ugly hack for now:

this.chartist.on('draw', function(event) {
  if(event.type === 'label') {
    if(!options.horizontalBars && event.axis.units.pos === 'y') {
      event.element.attr({ y: event.y + event.height / 6.5 });
    } else if((options.horizontalBars == null || options.horizontalBars) && event.axis.units.pos === 'x') {
      event.element.attr({ x: event.x - event.width / 2 });
    }
  }
});

.ct-chart .ct-label.ct-horizontal {
  line-height: 1 !important;
  text-align: center !important;
  display: inline-block !important;
}

The y-axis offset is hard to determine however, it is certainly not event.height / 2.

[JosefWN]

Another issue is that the last label is not as wide as the others, even if I make room for the text using padding to the right, the auto-width of the label is wrong with this approach:

[mattcdavis1]

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
    display: inline-block;
    width: auto !important;
    transform: translateX(-50%);
}

[gionkunz]

We need to reconsider label placement, probably in #809