How to set min-max for zoom with time scales?

[simarlab]

Hi everyone, i'm trying to set min-max zoom for a time scale axis in order to avoid to zoom out from the period that i need to represent on charts but I can't implement this behaviour. If i set min and max to the min date and max date used in the charts, the zoom is not working but remain fixed. How can be implemented this aspect?

[kurkle]

What kind of values did you provide? Chart.js version, plugin version?

If you want to limit the chart to the original data range, then you can use min: 'original', max: 'original' assuming you are using up to date version of the plugin.

[simarlab]

@kurkle Since the dataset is dynamic I first create the chart instance with the following values for scales ed plugins inside options:

 options: {
          scales: {
            x: {
              type: "time",
              time: {
                tooltipFormat: "YYYY-MM-DD HH:mm",
                displayFormats: {
                  day: "d-M HH:mm",
                  millisecond: "HH:mm:ss.SSS",
                  second: "HH:mm:ss",
                  minute: "HH:mm",
                  hour: "HH:mm",
                },
                unit: "hour",
              },
            },
            y:{
               ticks: {
                stepSize: 0.5
            }

            },
          },
          plugins: {
            zoom: {
              pan: {
                  enabled: true,
                  modifierKey: "alt",
                },
              limits:{
                  x:{},
                  y:{}
              },
              zoom: {
                wheel: {
                  enabled: true,
                },
                pinch: {
                  enabled: true,
                },
                mode: "xy",
              },
            },
          }
 }

Then when the data are receveid from a get request i set dataset and then I set also the options values in this way;

       _this.myChart.options.scales.x.time.unit = options.unit;
      _this.myChart.options.scales.x.min = options.limits.x.min;
      _this.myChart.options.scales.x.max = options.limits.x.max;     
      _this.myChart.options.scales.x.time.displayFormats = options.formats;
      _this.myChart.options.plugins.zoom.limits.x.max = options.limits.x.min;
      _this.myChart.options.plugins.zoom.limits.x.max = options.limits.x.max

options is a variable that contain all the settings from the server response. options.limits.x.min and options.limits.x.max are both in the YYYY-MM-DD HH:mm format using moment.js as adapter for the plugin.

[kurkle]

I'd think the issue is probably that you need to define the limits in millis (new Date('2022-04-15 16:00').valueOf()).

[simarlab]

I'd think the issue is probably that you need to define the limits in millis (new Date('2022-04-15 16:00').valueOf()).

Yes, it seems to work. Thank you, you saved my day.

[achilovbakhrom]

Hi, I have situation very close to this issue. I have live data and I have to update chart once I got new data. X axis type is time like, options={ ... scales: { ... x: { ... type: 'time' } } }

Each time when I get the new data I update chart and also move limits to show the new data (accordingly, minX=newData[0].timestamp, maxX=newData[newData.length-1].timestamp), This works fine when chart is not zoomed, but if it is zoomed chart ignores zooming itself(itself zoomLevel getting to be equal to 1). What I'm doing wrong? Please help