apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.26k stars 1.29k forks source link

Zoom with the mouse scroll button always activate when "selection" is enabled #4735

Open antoniolopezmc opened 2 hours ago

antoniolopezmc commented 2 hours ago

Description

Steps to Reproduce

  1. Create a column chart.
  2. Enable the "selection" option (options -> chart -> selection -> enabled = true).
  3. Disable the "zoom" option (options -> chart -> zoom -> enabled = false AND chart -> toolbar -> tools -> disable all tools related to the zoom).

Expected Behavior

Users should be able to select a range in the column bar, but not zooming the chart.

Actual Behavior

Users can select a range in the column bar (which is correct), but they also can zooming the chart with the mouse scroll button.

Now, I am using the version 2.52 of the library, in which the zooming with the mouse scroll button is not implemented.

Screenshots

image

image

After using the mouse scroll button inside the chart, the second image should not be zoomed.

Reproduction Link

JAVASCRIPT CODE

var options = {
    chart: {
        type: "bar",
        toolbar: {
            show: true,
            tools: {
                download: true,
                selection: true,
                zoom: false,
                zoomin: false,
                zoomout: false,
                pan: false,
                reset: false,
                customIcons: []
            }
        },
        selection: {
            enabled: true,
            type: 'x',
            xaxis: {
                min: 0,
                max: 100,
            }
        },
        zoom: {
            enabled: false
        }
    },
    series: [{
        name: "count",
        data: [
            [0, 50],
            [1, 48],
            [10, 99],
            [50, 75],
            [100, 87]
        ]
    }],
    xaxix: {
        type: 'numeric'
    },
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

CSS CODE

#chart {
  max-width: 650px;
  margin: 35px auto;
}

HTML CODE

<div id="chart">
</div>
brianlagunas commented 2 hours ago

Please provide the require reproduction codepen link. Code snippets do not count.

antoniolopezmc commented 2 hours ago

https://codepen.io/antoniolopezmc/pen/yLmYGoV

Here is the fork :)