Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
antoniolopezmc opened this issue Sep 30, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@antoniolopezmc
Copy link

antoniolopezmc commented Sep 30, 2024

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>
@antoniolopezmc antoniolopezmc added the bug Something isn't working label Sep 30, 2024
@brianlagunas
Copy link
Member

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

@antoniolopezmc
Copy link
Author

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

Here is the fork :)

@SkyEmie
Copy link

SkyEmie commented Oct 2, 2024

Hi all, same behavior was observed on my side, I had to downgrade the version
(Thank you for taking the time to make this issue 😊)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants