Skip to content

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

@antoniolopezmc

Description

@antoniolopezmc

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions