I work with Angular v13 and chartjs v3, I also install chartjs-plugin-zoom, it works perfect for bar chart, but for the time bar chart, it does not work as expected, here is my problem:

When I get data from api, example 50 records in 24hours and I show it in chart, I only want to show 10 bars (user can pan left or right to see next data) but the chart always show all bar

24 hours time bar chart

I want to make it show like this one, this I get data by date, 10 date show alwasy 10 or less bars

10 days time bar chart

So how to archive the limit number of bar chart to show? Like I getting more than 10 records, how to make it only show 10, then user can pan left to see next data

There are some option I use in my chart

{
  animation: {
    duration: 0,
  },
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    y: {
      beginAtZero: true,
      grid: {
        drawBorder: false,
      },
      grace: '10%',
    },
    x: {
      grid: {
        display: false,
      },
      type: 'time',
      display: true,
      time: {
        unit: 'day',
        unitStepSize: 1,
        displayFormats: {
          day: ChartOptionConstants.DATE_FORMAT,
        },
      },
      title: {
        display: true,
        text: 'DOC',
      },
      ticks: {
        autoSkip: true,
        maxRotation: 0,
        maxTicksLimit: 8
      },
    },
  },
  interaction: {
    mode: 'index',
    intersect: false,
  },
  plugins: {
    title: {
      display: false,
      text: this.chartTitle,
    },
    legend: {
      display: true,
      labels: {
        font: {
          size: 9,
        },
        usePointStyle: true,
      },
    },
    tooltip: {
      position: 'top',
      caretSize: 0,
    },
  },
};

Zoom plugin options

{
  pan: {
    enabled: true,
    mode: 'x',
  },
  zoom: {
    wheel: {
      enabled: true,
    },
    pinch: {
      enabled: true,
    },
    mode: 'x',
  },
};

CodePudding user response：

The zoom plugin is providing the limits node in its configuration where you can set the limtis on axes.

Maybe it could help your use case: https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#limits