Chartist-js: How to control the last axisX label style in css?

[code-tinker]

here is what i want to make :

the first label in axisX is placed at the beginning, and the last label at the end , others center~
how can i make it by pure css?
( i found if axisX and axisY grouped in different , i can use last-child to control the last label in axisX)

[gionkunz]

This is somewhat a problem since all labels are in the same group. Maybe we can add a class first and last to the vertical and horizontal labels within chartist. For the moment you can use the draw events (check the documentation and examples) to add the classes yourself.

[mtgibbs]

I found myself trying to do the same thing today. I made super crude plugin to deal with my problem with it.

https://github.com/mtgibbs/chartist-plugin-labelclasses

If that's of any use.

[kittsville]

I've found a way to achieve this, although it's a bit of a hack:

chart.on('draw', function(event) {
    // If the draw event is for labels on the x-axis
    if (event.type === 'label' && event.axis.units.pos === 'x') {
        switch (event.index) {
            // First
            case 0:
                event.element._node.childNodes[0].style.marginLeft = '0px';
            break;

            // Last
            case SERIES_LENGTH:
                event.element._node.childNodes[0].style.marginLeft = '-51px';
            break;
        }
    }
});

Where SERIES_LENGTH is the number of data points - 1. Screenshot and JS Bin:
http://jsbin.com/zegotidisi/edit?js,output

[zanechua]

@kittsville

Thanks! That came in handy because the chart wasn't displaying the last value properly.

Without your code:

With your code:

[pathtoknowhere]

@kittsville - thanks!

For anyone else, his approach is also useful if you want to style other label attributes such as font-size, etc. For example, I'm rendering multiple graphs on the same page, but I want each graph to have different label styling.

Here's my code based on the structure outlined above:

//specify more options before the chart is displayed
chart.on('draw', function(data){

    //label size
    if (data.type === 'label') { data.element._node.childNodes[0].style.fontSize = '11px' }
});

[ehdwns980416]

@kittsville Awesome!! Thanks a lot!! 😗

[duchuy]

have you tried to increase the chart padding:

chartPadding: { right: 30, bottom: 30 }