Chartist.js label styling - primarily padding/margin

Question

I need to able to add some extra styling to x-axis labels - primarily to give them a little more vertical separation from the chart area. CSS doesn't seem to work for this particular use case.

Anyone know how this can be achieved?

Here's a screenshot of the current issue: https://puu.sh/BuMUE/91183fcbdf.png

Answer 1

Yes of course you can add some space to those x-axis via JavaScript or CSS, I assume you mean to separate them from the dotted lines right? In that case you can use the offset property in the options when you are creating a new instance of your chart:

var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],  
  series: [
    [5, 2, 4, 2, 0]
  ]
};

var options = {
    classNames: {
        chart: 'ct-chart',
        series: 'ct-series',
        label: 'ct-label'
    },    
    axisX: {
        offset: 70 //Insert here your axisX offset and play with the values
    },
    axisY: {
        offset: 55 //Insert here your axisY offset and play with the values
    }
};

var barChart = new Chartist.Bar('#someBarGraphID', data, options);

<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css">
<div id="someBarGraphID"></div>
<script src="bower_components/chartist/dist/chartist.min.js">

Then if you want a CSS solution, you can always tackle that by selecting the classes of the chart when is created, just try something like:

#someBarGraphID .ct-label .ct-horizontal {
    //Apply CSS to xAxis
}

#someBarGraphID .ct-label .ct-vertical{
    //Apply CSS to yAxis
}