Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

labelInterpolationFnc - how to get length of series to skip x-axis labels sometimes?

See original GitHub issue

Hello there,

since I sometimes have charts with lots of data points. Preferable I would like to be able to only skip the label not the actual data point but as far as my research has brought through Chartist does not support this yet.

So my workaround would be to only skip values for charts where there are too many, for example if I have over 60 labels. So I though I’d do something like this:

    var data = {
       // A labels array that can contain any sort of values
       labels: jsonResponse.labels,
       // Our series array that contains series objects or in this case series data arrays
       series: [ jsonResponse.series ]
      labelInterpolationFnc: function skipLabels(value, index, data) {
           if(data.series.length > 60)
               return index % 1.5  === 0 ? value : null;
               return value;

But it does not work.

Any idea how that could work? 😃

Thank you Andreas

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9

github_iconTop GitHub Comments

gionkunzcommented, Jan 10, 2016

sorry, the labelInterpolationFnc is actually expected to accept 3 parameters (value, index, labels). So you can do:

labelInterpolationFnc: function skipLabels(value, index, labels) {
  if(labels.length > 60) {
    return index % 2  === 0 ? value : null;
  } else {
    return value;
Grovkillencommented, May 4, 2019

I did something like this to make it more dynamic in my use case:

  axisX: {
	labelInterpolationFnc: function skipLabels(value, index, labels) {
	  let labelScale = Math.round( ( labels.length + 60 ) / 30 );
	  if(labels.length > 20) {
		return index % labelScale  === 0 ? value : null;
	  } else {
		return value;
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to prevent overlapping x-axis labels in sns.countplot
Having a Series ds like this import pandas as pd import seaborn as sns import matplotlib.pyplot as plt import numpy as np; np.random.seed(136)...
Read more >
Chartist - Examples
An example of a simple line chart with three series. You can edit this example in realtime. ... Chartist does not freak out...
Read more >
Axis labels removed by the auto skip functionality are still ...
When padding the bottom of a chart to make space for xAxis labels it should only pad for rendered labels, not all labels....
Read more >
The output array will have the length of the largest nested array. ... };\n\n // Check if we should generate some labels based...
Read more >
Create Charts in React Easily with the react-chartist Library
You have 2 free member-only stories left this month. ... axisX has the labelInterpolationFnc to set how the x-axis labels are displayed.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found