Open MaxCarritt opened 1 month ago
Hi, is it possible to use the mouse wheel to zoom in a chart like this example:https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/
I tried this config and couldnt get it working:
{ "chart": { "dropShadow": { "blur": 10, "color": "#000", "enabled": false, "left": 7, "opacity": 0.2, "top": 18 }, "height": 350, "toolbar": { "show": true }, "type": "area", "events": { "animationEnd": false, "beforeMount": false, "mounted": false, "updated": false, "mouseMove": false, "mouseLeave": false, "click": false, "legendClick": false, "markerClick": false, "xAxisLabelClick": false, "selection": false, "dataPointSelection": false, "dataPointMouseEnter": false, "dataPointMouseLeave": false, "beforeZoom": true, "beforeResetZoom": true, "zoomed": true, "scrolled": false, "brushScrolled": false } }, "colors": [ "purple" ], "dataLabels": { "enabled": false }, "grid": { "borderColor": "#e7e7e7", "row": { "colors": [ "#f3f3f3", "transparent" ], "opacity": 0.5 } }, "legend": { "floating": true, "horizontalAlign": "right", "offsetX": -5, "offsetY": -25, "position": "top" }, "markers": { "size": 0 }, "stroke": { "curve": "smooth", "width": 1 }, "title": { "align": "left", "text": "Active Sessions" }, "xaxis": { "title": { "text": "" }, "type": "datetime" }, "yaxis": { "title": { "text": "" } }, "fill": { "gradient": { "opacityFrom": 0.8, "opacityTo": 0, "type": "vertical", "shade": "dark" }, "type": "gradient" }, "tooltip": { "x": { "format": "MMM dd HH:mm" } }, "zoom": { "type": "x", "enabled": true, "autoScaleYaxis": true, "allowMouseWheelZoom": true }, "toolbar": { "autoSelected": "zoom" } }
Hi, is it possible to use the mouse wheel to zoom in a chart like this example:https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/
I tried this config and couldnt get it working:
{ "chart": { "dropShadow": { "blur": 10, "color": "#000", "enabled": false, "left": 7, "opacity": 0.2, "top": 18 }, "height": 350, "toolbar": { "show": true }, "type": "area", "events": { "animationEnd": false, "beforeMount": false, "mounted": false, "updated": false, "mouseMove": false, "mouseLeave": false, "click": false, "legendClick": false, "markerClick": false, "xAxisLabelClick": false, "selection": false, "dataPointSelection": false, "dataPointMouseEnter": false, "dataPointMouseLeave": false, "beforeZoom": true, "beforeResetZoom": true, "zoomed": true, "scrolled": false, "brushScrolled": false } }, "colors": [ "purple" ], "dataLabels": { "enabled": false }, "grid": { "borderColor": "#e7e7e7", "row": { "colors": [ "#f3f3f3", "transparent" ], "opacity": 0.5 } }, "legend": { "floating": true, "horizontalAlign": "right", "offsetX": -5, "offsetY": -25, "position": "top" }, "markers": { "size": 0 }, "stroke": { "curve": "smooth", "width": 1 }, "title": { "align": "left", "text": "Active Sessions" }, "xaxis": { "title": { "text": "" }, "type": "datetime" }, "yaxis": { "title": { "text": "" } }, "fill": { "gradient": { "opacityFrom": 0.8, "opacityTo": 0, "type": "vertical", "shade": "dark" }, "type": "gradient" }, "tooltip": { "x": { "format": "MMM dd HH:mm" } }, "zoom": { "type": "x", "enabled": true, "autoScaleYaxis": true, "allowMouseWheelZoom": true }, "toolbar": { "autoSelected": "zoom" } }