[Chartjs]-Chart.js LineChart how to show only part of dataset and support horizontal scrolling

by

0👍

I think for your question depends on the value or label you are showing on your chart. For number or string, you can set the min and max on ticks.min and ticks.max and it is working for me in chart.js 2.8. Not sure if chart.js 2.5 will work though since I saw some posts about how this feature is enhance in chart.js 2.6 release.

If your x-axis label is showing DateTime object, and you are using type: ‘time’ in your options.scales.xAxes. Then you can include your time.min and time.max inside xAxes.

options: {
  scales: {
    xAxes: [
      {
        type: 'time',
        time: {
          displayFormats: {
            week: 'D MMM YY'
          },
          unit: 'day',
          tooltipFormat: 'll',
          min: moment('2019-06-30'),
          max: moment('2019-09-01')
        },
        display: true,
        ticks: {
          padding: 20,
          // set this min max if you are using number or string as your axis label
          // min: 10,
          // max: 30
        }
      }
    ],
    yAxes: [
      {
        display: true,
        ticks: {
          beginAtZero: true,
          maxTicksLimit: 8
        }
      }
    ]
  }
};

This is working for me and hopefully it helps you for your use case as well. Let me know how it goes. Cheers 🙂

Leave a comment