Apex Charts- Limiting Zoom out

Question

I'm using apexcharts v3.19.3 and I would like to know how to limit my zoom out option to the available x-axis range. Currently, I can zoom out indefinitely.

The example code in apexcharts docs will be enough to recreate the issue. Keep zooming out to recreate my problem

Answer 1

Well, after some digging around I solved the problem. Leaving the solution here. So, Apex gives us access to several events. BeforeZoom fires before zoom and gives us access to the new max and min positions. I just compared to see whether my original range was smaller than the new range. If so I returned my original range, which disables the zoom out.

    charts : { 
    events : {
                beforeZoom : (e, {xaxis}) => {
                    let maindifference = (new Date(props.data[0].date)).valueOf() - new Date(props.data[props.data.length-1].date).valueOf();
                    let zoomdifference =   xaxis.max - xaxis.min ;
                    if( zoomdifference > maindifference )
                    return  {
                        // dont zoom out any further
                        xaxis: {
                            min: props.data[0].date,
                            max: props.data[props.data.length-1].date
                        }
                    }; 
                    else {
                        return {
                            // keep on zooming
                            xaxis: {
                                min: xaxis.min,
                                max: xaxis.max
                            }
                        }
                    }
                }
            }
            }