Possible to show fewer datapoints on mobile?

[elitriona]

Let’s say there is a line chart that is reading data from a JSON. The data in the JSON has 12 datapoints which are being displayed in the chart and looks great on desktop screen sizes. But on mobile showing 12 datapoints looks very crowded and hard to read. Is there a mechanism built into the chart to allow for showing a different amount of data points based on the users screen size? It would be nice to only be showing, lets say 6 datapoints on mobile, while desktop size shows the full 12. Is this possible? I looked through the docs but if there was a method to directly do something like that I was not seeing it.

[Thangaraj Raman]

@elitriona,

Showing fewer datapoints based on the screen size of the device is not available as an inbuilt feature as of now. However, you can achieve the same with a few lines of code. Please check the code snippet below.

var screenWidth = jQuery(window).width();
var dpsCount = 6;            //no. of datapoints to be displayed on phone
var dps = [];

if(screenWidth <= 768 ) {
  for(var i = 0; i < dpsCount; i++) {
     dps.push(chart.options.data[0].dataPoints[i]);
  }
  chart.options.data[0].dataPoints = dps;
  chart.render();
} 

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[elitriona]

This is outstanding, thank you so much! An excellent solution :)