How to add axis title in Chartist

Question

I'm using Chartist for browser visualization.

The requirement here is that I need to add title to the X and Y axis, so that viewers know what does each axis represent. However I went through the online document of Chartist and found no documentation about this. Did I miss something, or this feature is not supported in Chartist? If it's not supported, is there any way to work this out?

Answer 1

You can download and use the Axis Title Plugin developed by Alex Stanbury. This is the code you must add to your existing chart options.

plugins: [
 Chartist.plugins.ctAxisTitle({
    axisX: {
       axisTitle: 'X title',
       axisClass: 'ct-axis-title',
       offset: {
          x: 0,
          y: 50
       },
       textAnchor: 'middle'
    },
    axisY: {
       axisTitle: 'Y title',
       axisClass: 'ct-axis-title',
       offset: {
          x: 0,
          y: 0
       },
       textAnchor: 'middle',
       flipTitle: false
     }
   })
 ]

Answer 2

I used css for this, try if this help you.

HTML: <div id="chartist" class="chartist" data-x-axis="X axis label" data-y-axis="Y axis label"></div>

CSS:

[data-x-axis]::before {
    content: attr(data-x-axis);
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    font-size: 11px;
    color: #777;
}

[data-y-axis]::after {
    content: attr(data-y-axis);
    position: absolute;
    top: 50%;
    left: -20px;
    font-size: 11px;
    color: #777;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}