Morris.js distance instead of years

Question

I'm kind of new to morris.js and finally got some things work except I don't get how to change values. On the bottom of the charts are years, but I'd like to do distances (let's say KM's / or Miles) and left side minutes.

Example:

Does anyone know how to get this working?

I'm using the following code:

<script>

    Morris.Area({
      element: 'pace',
      data: [
        { distance: '1km', value: 4.30 },
        { distance: '2km', value: 4.35 },
        { distance: '3km', value: 4.21 },
        { distance: '4km', value: 4.30 },
        { distance: '5km', value: 4.35 },
        { distance: '6km', value: 4.35 },
        { distance: '7km', value: 4.30 },
        { distance: '8km', value: 4.40 },
        { distance: '9km', value: 4.34 },
        { distance: '10km', value: 4.32 },
        { distance: '11km', value: 4.20 },
        { distance: '12km', value: 4.19 }       

      ],
      xkey: 'distance',
      // A list of names of data record attributes that contain y-values.
      ykeys: ['value'],
      labels: ['Value'],
      lineColors: ['#c20101'],
      fillOpacity: 0.1,  
      pointFillColors: ['#9e0206']
    });


</script>

Answer 1

According to https://morrisjs.github.io/morris.js/lines.html, it should work if you set your config like this:

parseTime: false,
xLabelFormat: function(x) { return x.label + ' km' }

Hope it helps