[Solved]-Background color for multiple Highchart panes, in Vue app-Highcharts

A hackish way to do it would be to inject a rect into the svg.

document.getElementsByClassName("highcharts-root")[0].innerHTML += '<rect width="100%" x="0" y="40" height="150" fill="#ff0000"></rect>';
document.getElementsByClassName("highcharts-root")[0].innerHTML += '<rect width="100%" x="0" y="200" height="150" fill="#ff0000"></rect>';

For what I see you'll need to do styling by css Docs page, there is a live example here

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-plot-background {
	fill: #efffff;
}
.highcharts-plot-border {
	stroke-width: 2px;
	stroke: #7cb5ec;
}

Edit: I found a workaorund on this topic, you can change the background color for a specific range pane using plotBands:

e.g. yAxis : {[ ... plotBands : {color : '#f7d724', from : -50, to : 50}, ... ]}

In your case you should set the values for the first and last ones.

You can use the chart.plotBackgroundColor property to achieve your requirements.

Demo: https://codesandbox.io/s/vue-template-pt9jp

And because your chart is rendered dynamically, I encourage to disable animation:

chart: {
  type: "spline",
  title: "Hassaan",
  animation: false
},

API: https://api.highcharts.com/highcharts/chart.plotBackgroundColor