Chartist-js: Reduce number of labels shown for bar and line charts

Created on 2 Dec 2014  路  4Comments  路  Source: gionkunz/chartist-js

On the bar and line charts, I would like to reduce the number of labels shown for building a date histogram charts. For instance, if I have many data points (days) on the x-axis, there will be a cluttered mess of labels that are unreadable.
I'd rather only display every nth label. Is the labelInterpolationFnc of the axisX option a good place to determine whether a label is printed or not?
I have not found a built-in option to "skip" labels.

Most helpful comment

Hi there. Yes labelInterpolationFnc can be used to do interpolation but also to replace and / or skip labels. In order to skip a label just return a falsey value (except the number 0, this will count as valid). Something like this:

{
  axisX: {
    labelInterpolationFnc: function skipLabels(value, index) {
      return index % 5  === 0 ? value : null;
    }
  }
}

All 4 comments

Hi there. Yes labelInterpolationFnc can be used to do interpolation but also to replace and / or skip labels. In order to skip a label just return a falsey value (except the number 0, this will count as valid). Something like this:

{
  axisX: {
    labelInterpolationFnc: function skipLabels(value, index) {
      return index % 5  === 0 ? value : null;
    }
  }
}

Also be aware that currently skipping a label will also skip the grid line.

Thank you! I wasn't aware that index was available as an argument. This works nicely for me.

But I have forgot to include this into the question: Now when I do not show all labels below the axis, I would like to include the x-axis label (i.e. a date) on the data point. If I use the tooltips line chart from your examples, I'd like to somehow be able to let the tooltip know the xAxis label for the point it belongs to, and thus be able to display the label inside the tooltip.

The tooltip's text could then read:
2014-12-02: 1841 Units

I am not aware of a way to hand over the x-axis label's text value to the point and therefore its tooltip. Any ideas?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pathtoknowhere picture pathtoknowhere  路  4Comments

SimonTernoir picture SimonTernoir  路  5Comments

FabienPapet picture FabienPapet  路  4Comments

joshiashish23 picture joshiashish23  路  3Comments

adilbenmoussa picture adilbenmoussa  路  4Comments