chartjs / chartjs-plugin-zoom

Zoom and pan plugin for Chart.js
MIT License
598 stars 327 forks source link

Feature Request: add ability to limit upper and lower bounds of min an max scale values independently #768

Open 10man opened 1 year ago

10man commented 1 year ago

Hello,

First off, thanks for the plugin, super awesome. :tophat: I'm using the latest (as of 06-11-23) from cdn.jsdelivr for both chart.js and the plugin.

The idea here is to fix (or limit) an axis value and have the zoom affect the data scale in a separately controllable fashion. For example; say we have a dataset that extends away from 0 and we want to zoom keeping 0 in view.

Currently we have:

limits: {
    y: {
        min: 'original'|value,
        max: 'original'|value',
        minRange: value
    }
}

I purpose the following:

limits: {
    y: {
        min: 'original'|value,
        max: 'original'|value,
        minRange: value,
        maxMin: 'original'|value,
        minMax: 'original'|value
    }
}

Where: minMax sets the maximum value that the min scale could take under zoom. maxMin sets the minimum value that the max scale could take under zoom. Setting to original would have the standard implications. Now, if both min and minMax were set to original, that would disable changes to that scale value under zoom.

10man commented 1 year ago

I wouldn't mind doing the work if someone can point me in the right direction. That is, if anyone but me thinks it would be useful...

I took a brief look but I don't know this codebase so I wasn't sure where the bast place to start was. I would offer to do the maxRange https://github.com/chartjs/chartjs-plugin-zoom/issues/756 update as well if that would help. Seems like that would be in the same area...

estanglerbm commented 8 months ago

Could you show an example? (I can keep 0 in view by doing a drag zoom, and I can't imagine other examples.)

kurkle commented 4 hours ago

To me, the proposal (below) seems a bit confusing due to the names.

limits: {
    y: {
        min: 'original'|value,
        max: 'original'|value,
        minRange: value,
        maxMin: 'original'|value,
        minMax: 'original'|value
    }
}

How about this instead (with some extensions):

limits: {
    y: {
        min: 'original' | 'locked' | value | { min: value, max: value },
        max: 'original' | 'locked' | value | { min: value, max: value },
        minRange: value,
        maxRange: value,
    }
}