Background color for multiple Highchart panes, in Vue app

Question

I am using Highcharts in a Vue app by using highcharts-vue

I am setting my template like so

and then I set the options of the chart in the Vue

            yAxis:[],
        series:[],     
        background:[],
        options: {              
          chart: {
            borderWidth: 1,
            marginLeft: 40,
            marginRight: 2,
            type:'line',
            zoomType: 'x',
            title: {
                text: ''
            },
            panning:true
            /*backgroundColor:'lightgrey'*/
          },
          title: {
            text: ''
          },
          pane:{
            background:[]
          },
          time:{
            useUTC:true
          },  
          credits:{
            enabled:false
          },
          tooltip: {
            shared: true
          },
          title:{
            text:null
          },
          rangeSelector: {
            inputEnabled: false
          },
          xAxis:{
            type:'datetime',
            title:
            {
              align:'high'
            }, 
            labels: {
              padding: 50,
              format: '{value:%e %b %Y}',
              style: {
                fontSize: '10px'
              }
            },
            crosshair: {
                enabled: true,
                width: 2,
                color: '#000'
            },
          },
          yAxis: [],   
          plotOptions: {
            series: {
              animation: false
            }
          },
          ,series: []
        }

and then, when I have data to add, I push data to yAxis, series and background arrays accordingly

                this.data.titles.forEach(title => {
              this.yAxis.push(
                  {
                    title: {
                      text: title.title,
                      margin:20,
                      fontSize:"15px"
                    },
                    labels: {
                      enabled:true,
                      align: 'left',
                      padding:15
                    },
                    alignTicks:'left', 
                    textAlign:'left',
                    align:'middle',
                    height: chartHeight+'%',
                    top:topStep+'%',
                    opposite:false, 
                    offset:0
                  }
              );
              this.background.push({backgroundColor: "red"});
              topStep = topStep + chartHeight + 5; 
              this.series.push({
                    yAxis:counter,
                    name:title.title,
                    data:[]
              });
              counter++;
            });//foreach 
            this.options.yAxis = this.yAxis;
            this.options.series = this.series;
            this.options.pane = this.background;

I tried to import highcharts-more by doing

    import highchartsmore from './highcharts-more.js'

but it does not work, the page comes back white. I also tried to import it by going to index.html of Vue and adding

There is no error in the page, but still the panes have no color.

*If this is not possible, can I at least add a line between the panes somehow?

Thanks

EDIT

The red areas are the "panes" . Thanks

user_10522842 · Answer

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

user_12938545 · Answer

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.

user_10456519 · Answer

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

document.getElementsByClassName("highcharts-root")[0].innerHTML += '';
document.getElementsByClassName("highcharts-root")[0].innerHTML += '';

Background color for multiple Highchart panes, in Vue app

3 Answers