Chartist-js: Last label not showing

[troldmand]

Good morning, beautiful chartists.

I'm missing the last label on my axisX, and can't figure out why. Data is there, but there's no sign of the last label on the front-end (so it's not just covered by something else, or lacks right-padding).

Here's the code-snippet I believe is relevant:

        new Chartist.Line('.graph-container.' + patient + '-graph', data, {
            // fullWidth: true,
            chartPadding: {
                top: 0,
                right: 60,
                bottom: 0,
                left: 0
            },
            // lineSmooth: Chartist.Interpolation.none({
            //     fillHoles: true
            // }),
            high: limits.high + 2,
            low: limits.low - 2,
            axisX: {
                type: Chartist.FixedScaleAxis,
                divisor: divisions,
                labelInterpolationFnc: function(value) {
                    console.log("Moment: " + moment(value).format('D/MM'))
                    return moment(value).format('D/MM');
                }
            },

On a somewhat related issue, I found this snippet, with:

var chart = new Chartist.Line('#chart', {
  labels: data.map((value, index) => `${index + 1}. Data Point`),
  ...

... and I wonder, why isn't it showing? And why does the writer in this example go out of his or hers way, to set a 'last label'?

I should say, that I'm very new to chartist.js.

[troldmand]

This chart from the examples page, does the exact same thing. Why isn't the last label showing?

[mlumbroso]

Made a PR to fix this behaviour :)

[gionkunz]

The momentjs example on the documentation website is simplified a lot. We're still working on a fully functional time scale axis which will arrive with Chartist 1.0. There are two issues with your example. First I believe you're looking for an option to stretch your x-axis to the full width of the chart. However, this option does currently not exist on the FixedScaleAxis. The second problem is the simplification using divisor for time-based axes within the example provided on the doc site. You'd be better off by providing exact tick values for the axis by calculating them from your data using moment date math functions. Here's a working example of how to do that:

// Requires Moment.js
var data = {
  series: [
    {
      name: 'series-1',
      data: [
        {x: new Date(143134652600), y: 53},
        {x: new Date(143234652600), y: 40},
        {x: new Date(143340052600), y: 45},
        {x: new Date(143366652600), y: 40},
        {x: new Date(143410652600), y: 20},
        {x: new Date(143508652600), y: 32},
        {x: new Date(143569652600), y: 18},
        {x: new Date(143579652600), y: 11}
      ]
    },
    { 
      name: 'series-2',
      data: [
        {x: new Date(143134652600), y: 53},
        {x: new Date(143234652600), y: 35},
        {x: new Date(143334652600), y: 30},
        {x: new Date(143384652600), y: 30},
        {x: new Date(143568652600), y: 10}
      ]
    }
  ]
};

var dates = data.series.reduce(function(dates, series) {
  Array.prototype.push.apply(dates, series.data.map(function(xyData) {
    return xyData.x;
  }));
  return dates;
}, []); 

var minDay = moment(dates.reduce(function(min, date) {
  return +date < +min ? date : min;
}, dates[0])).startOf('day');

var maxDay = moment(dates.reduce(function(max, date) {
  return +date > +max ? date : max;
}, dates[0])).startOf('day').add(2, 'day');

var dayDiff = maxDay.diff(minDay, 'day');

var dates = Array.from({length: dayDiff})
  .map(function(e, index) {
    return moment(minDay).add(index, 'day');
  });

var chart = new Chartist.Line('.ct-chart', data, {
  chartPadding: {
    right: 100
  },
  axisX: {
    type: Chartist.FixedScaleAxis,
    low: +minDay,
    high: +maxDay,
    ticks: dates,
    labelInterpolationFnc: function(value) {
      return moment(value).format('MMM D');
    }
  }
});

[iphilippenko]

@gionkunz this problem still exists in your latest npm package version.
I have high: 6, divisor: 6 and expect 0,1,2,3,4,5,6 output, but it shows only 0,1,2,3,4,5

[i-dont-wat-to-be-here]

@gionkunz this problem still exists in your latest npm package version.
I have high: 6, divisor: 6 and expect 0,1,2,3,4,5,6 output, but it shows only 0,1,2,3,4,5

I created workaround: https://jsbin.com/hanecozamu/edit?js,output Paste it somewhere at the top of your source code. Worked for me