Skip to content

Timeperiod not consistent whilst panning #824

Open
@jhgeluk

Description

@jhgeluk

When using pan to move left/right on the x-axis of my chart I noticed that the time period does not stay consistent. This does not feel/look like normal behaviour.

I don't see this "stretching" behaviour, when using the official demo here: https://www.chartjs.org/chartjs-plugin-zoom/samples/pan-region.html

I'm using Chart.js version: 4.4.1

`zoom: {
limits: {
x: {
min: CHART_ZOOM_MIN.getTime(),
minRange: 60 * 60 * 24 * 1000, // 1 day
},
},
pan: {
enabled: true,
threshold: 0,
mode: 'x',
onPanStart({ chart, point }) {
const area = chart.chartArea;
const w25 = area.width * 0.25;
const h25 = area.height * 0.25;
if (
point.x < area.left + w25 ||
point.x > area.right - w25 ||
point.y < area.top + h25 ||
point.y > area.bottom - h25
) {
return false; // abort
}
},
onPanComplete: ({ chart }) => {
const { min, max } = chart.scales.x;

    console.log(
      'Pan: ',
      format(new Date(min), 'dd-MM-yyyy HH:mm'),
      format(new Date(max), 'dd-MM-yyyy HH:mm'),
    );
    console.log(
      'Days between: ',
      (max - min) / (1000 * 60 * 60 * 24),
    );
  },
}`
image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions