search

apexcharts / apexcharts.js

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

autoScaleYaxis doesn't scale to data when setting xaxis.min #3037

Open RobertWetzler opened 2 years ago

RobertWetzler commented 2 years ago

Description

Steps to Reproduce

  1. Set autoScaleYaxis to be true
  2. Set xaxis.min such that the range of data graphed doesn't contain the maximum of the data set

Expected Behavior

The y-axis should scale to fit the data of the range specified by xaxis.min

Actual Behavior

The y-axis is scaled to fit the entire range of the dataset, not just what's within the range specified by xaxis.min. This causes the graph to be less visually descriptive

Screenshots

Upon loading the chart: image

Desired autoScaleYAxis behavior, achieved by pressing a button that calls zoomX: image

Reproduction Link

https://codesandbox.io/s/vue-basic-example-forked-c4p9vy?file=/src/components/Chart.component.vue

RobertWetzler commented 2 years ago

A workaround, wait a few milliseconds in mounted(), then call zoomX using your desired x min: async mounted() { await new Promise(r => setTimeout(r, 1)); // call to zoomX here },