Prevent Apexcharts from scrolling to top of page on load

Question

I have an ApexChart dynamically load when a user presses a link. Once the link is pressed, there's a backend process to load the data into the chart. However once that happens the page automatically scrolls to the top for some reason. There seems to be a related bug that was closed not long ago but I'm not sure how related it is.

How do I prevent the scroll to top on load?

Here is my chart config:

export class UserChart extends React.Component {
  
  state = {
    series: this.props.data,
    options: {
      chart: {
        height: 350,
        type: "bar",
        background: '#FFF',
        zoom: {
          enabled: false
        },
        toolbar: {
          show: false,
        },
      },
      noData: {
        text: "Unavailable"
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        width: [1, 1, 4]
      },
      title: {
        text: this.props.title,
        align: 'center',
        
      },
      xaxis: {
        categories: this.props.xaxis,
        tooltip: {
          enabled: false
        }
      },       
    

      yaxis: [
        {
          axisTicks: {
            show: true,
          },
          axisBorder: {
            show: false,
            color: '#000'
          },
          labels: {
            formatter: v => valueFormat(v),
            style: {
              colors: '#007871',
            }
          },

          tooltip: {
            enabled: false
          }
        },

      ],
      tooltip: {
        fixed: {
          enabled: false,
          position: 'topLeft',
          offsetY: 30,
          offsetX: 60
        },
      },
      legend: {
        horizontalAlign: 'left',
        offsetX: 40
      }
    },


  };

  render() {
    return <Chart options={this.state.options} series={this.state.series} type={this.props.type} height={350}/>
  }
}

Answer 1

I had the exact same issue.

I obviously do not know your App's exact layout. But most probably as you render the chart, for a brief moment, you may be rendering another component (In my case it was a loader as I waited for the calls to resolve).

If there isn't enough scroll left on the page, things will jump around. I fixed it by fixing the height of the parent container of the chart and the loader.

Try wrapping your chart in a <div> that has a fixed height (350px in your case).