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

[andreasba]

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;
           else
               return value;
     }

But it does not work.

Any idea how that could work? :)

Thank you
Andreas

[gionkunz]

can can always access data by referencing the chart. The interpolation function will no longer be pure but that should be an issue. chart.data.labels.lenght

[andreasba]

Thanks for your quick reply @gionkunz ! However, this does not seem to work:

                            labelInterpolationFnc: function skipLabels(value, index, chart) {
                                if(chart.data.series.length() > 60)
                                    return index % 2  === 0 ? value : null;
                                else
                                    return value;
                            }

TypeError: chart.data is undefined

Which is logically right? Since the chart object is created with the options afterwards?

Thanks
Andreas

[gionkunz]

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;
  }
}

[andreasba]

Thanks, that worked perfectly!

[tomherold]

Yes, that works great! However, it would be great if there would be a way to check the actual width of the chart as well. If I make the chart smaller or wider (depending on screen sizes) the labels have less or more space.

[tomherold]

Additional, maybe someone comes up with a formula that shows e.g. 20 dates independent from the number of dates (autoscaling).

[estomagordo]

Am I the only one who cannot get this to work? The function never gets run.

edit: I'm sorry, but I can't seem to format the code properly.

new Chartist.Bar('.ct-bar-chart', { height: 300, width: '100%', showGrid: false, labels: barLabels, series: barSeries }, { seriesBarDistance: 25, axisX: { offset: 10 }, axisY: { offset: 80, scaleMinSpace: 15 }, labelInterpolationFnc: function skipLabels(value, index, chart) { if(chart.data.series.length() > 60) return index % 2 === 0 ? value : null; else return value; }, plugins: [ Chartist.plugins.tooltip({ anchorToPoint: true, class: 'barchart-tooltip', tooltipFnc: renderFunc }) ] });

[Grovkillen]

Am I the only one who cannot get this to work? The function never gets run.

edit: I'm sorry, but I can't seem to format the code properly.

            height: 300,
            width: '100%',
            showGrid: false,
            labels: barLabels,
            series: barSeries
            }, {
            seriesBarDistance: 25,
            axisX: {
                offset: 10
            },
            axisY: {
                offset: 80,                
                scaleMinSpace: 15
            },
            labelInterpolationFnc: function skipLabels(value, index, chart) {
                                if(chart.data.series.length() > 60)
                                    return index % 2  === 0 ? value : null;
                                else
                                    return value;
                            },
            plugins: [
                Chartist.plugins.tooltip({
                    anchorToPoint: true,
                    class: 'barchart-tooltip',
                    tooltipFnc: renderFunc
                })
            ]
            });```

You need to add it to the axisX: or axisY:....

In your case it would look something like this:

        height: 300,
        width: '100%',
        showGrid: false,
        labels: barLabels,
        series: barSeries
        }, {
        seriesBarDistance: 25,
        axisX: {
            offset: 10,
            labelInterpolationFnc: function skipLabels(value, index, chart) {
                            if(chart.data.series.length() > 60)
                                return index % 2  === 0 ? value : null;
                            else
                                return value;
                        }
        },
        axisY: {
            offset: 80,                
            scaleMinSpace: 15
        },
        plugins: [
            Chartist.plugins.tooltip({
                anchorToPoint: true,
                class: 'barchart-tooltip',
                tooltipFnc: renderFunc
            })
        ]
        });

[Grovkillen]

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;
      }
    }
  }