The width of the plotbands on the yAxis of a stacked bar graph is adjusting as the series are dynamically toggled,

https://ibb.co/h7tmwtr https://ibb.co/syRTyPG

For the first time, I have included 5 plot bands which looked great. However, when I added a series and toggled it on a stacked bar graph, the plot bands' width started increasing. I want to maintain the same width as in the initial setting, without altering the graph or plot band width.

Below is the code snippet I'm using:

chart.yAxis.plotBands = [];
            var compaserlen = chart.series.length - 1;
            chart.yAxis.tickInterval = 20 * compaserlen;
            var stfromval = 0;
            var sttoval = 20 * compaserlen;
            var colorstackplot = ['#D5D5D6', '#E0E1E1', '#EAEAEB', '#F5F5F6', '#F7F7F8'];
            for (var i = 0; i < 5; i++) {
                console.log("compaserlen", compaserlen);
            chart.yAxis.plotBands.push({
                    from: stfromval,
                    to: sttoval,
                    color: colorstackplot[i]
                });
                stfromval = sttoval;
                sttoval = sttoval + (20 * compaserlen);
            }

Answer №1

To resolve the issue, make sure to turn off the ignoreHiddenSeries setting:

chart: {
    ignoreHiddenSeries: false
}

See it in action: http://example.com/demo

For more details, check out the API Reference:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I retrieve a data field with a colon in its key using Cytoscape.js?

After diligently going through the official documentation and following the steps in the tutorial, I have successfully managed to access a node's data field and use it for labeling, as long as the key is a simple string. However, my data will contain ...

Believing that members possess a certain role when they actually do not

const { Discord, MessageEmbed } = require("discord.js"); module.exports = { name: "ban", description: "bans user from guild", execute(client, message, cmd, args, Discord) { const member = message.mentions.u ...

Getting hands-on with Express.js and gaining a foundational understanding of Angular

Thank you for taking the time to read my inquiry. As a developer experienced in PHP, particularly with Laravel, and possessing basic knowledge of AngularJS concepts such as routing, directives, and resource, I have been utilizing Laravel on the backend an ...

Error 400: The onCreate Trigger function for Cloud functions is experiencing issues with HTTP requests due to errors in the request

I am encountering an issue when attempting to add a trigger for Firestore OnCreate, as the deployment fails with HTTP Error: 400 stating that the request has errors. Essentially, my goal is to write to a new document if a record is created in a different ...

What is the best way to dynamically load content as it enters the viewport using JavaScript or jQuery?

I have implemented a stunning animation to the h1 element using a function, but now I want the animation to trigger only when the h1 element enters the viewport as the user scrolls down. Currently, the animation occurs as soon as the page is loaded, even ...

Tips for adjusting the speed of animations in Odometer/vue-odometer

Referencing the Odometer documentation at duration: 3000, // Adjusts the expected duration of the CSS animation in the JavaScript code Even though my code is set up like this, the duration parameter doesn't seem to be effective: <IOdometer a ...

Issues with the background color not displaying when using ng-style

Hey everyone, I'm new to AngularJS and need some help. I'm trying to figure out how to set the background color using ng-style from the controller. var app = angular.module("myApp", []).controller("myCtrl", function($scope) { $scope.color = ...

Babel had trouble transpiling due to an unexpected token while working with Bootstrap 4 and Codekit

Currently attempting to minify and transpile Bootstrap 4 using CodeKit3. However, encountering the following error: Babel: Failed to Transpile: SyntaxError: /bootstrap/carousel.js: Unexpected token (219:8) 217 | _getConfig(config) { 218 | ...

Bundle Thirdparty Dependencies with Webpack

I am looking to package a webpack bundle that includes all common third-party vendors such as Angular 1.4, jQuery, and other libraries. Currently, the following modules have been developed: Module A Vendor Module Vendor Module: Create a simple module ...

Refresh page to reload JSON file with jQuery

My current objective is the following: $.getJSON(sampleJson.json), function(data) {} I aim to read data from sampleJson.json and display it on a webpage. The displayed data can be altered through an AJAX call like so: $.ajax({type: "GET", url: "...", da ...

Definition of a class in Typescript when used as a property of an object

Currently working on a brief .d.ts for this library, but encountered an issue with the following: class Issuer { constructor(metadata) { // ... const self = this; Object.defineProperty(this, 'Client', { va ...

`How can we efficiently transfer style props to child components?`

Is there a way to pass Props in the Style so that each component has a unique background image? Take a look at this component: countries.astro --- import type { Props } from 'astro'; const { country, description } = Astro.props as Props; --- & ...

Ways to update HTML content generated by Ajax

Having some difficulties modifying the HTML content generated by AJAX. This is the code snippet from the page: @model IEnumerable<WE_SRW_PeerNissen.Models.Reservations> @{ ViewBag.Title = "List"; Layout = "~/Views/Shared/_Layout.cshtml"; } ...

Contrasting Router.push and location.assign: Exploring the variances between

One thing I've noticed in my React app is that when I use Router.push('/') from `import Router from 'next/router', the page I am navigating to doesn't fully refresh. This causes some loading spinners whose states I want to be ...

Having Difficulty Converting JavaScript Objects/JSON into PHP Arrays

This particular inquiry has no relation to the previously mentioned identical answer/question... In JavaScript, I am dealing with a substantial list of over 1,000 items displayed in this format... var plugins = [ { name: "Roundabout - Interac ...

Destructuring array in React using Javascript

I'm currently exploring ReactJS and I'm facing a dilemma in understanding the destructuring process in the code snippet below: const IngredientsList = ({ list }) => React.createElement('ul', null, list.map((ingredient, i ...

Issue with AngularJS factory $http.get request receiving HTML files as response

Could someone please explain why I keep receiving an HTML file as a return from my Angular factory? This is the route on my backend: function ensureAuthenticated(req, res, next) { if (!req.headers.authorization) { return res.status(401).send({ mess ...

Step-by-step guide for serving static JavaScript files using NextJS

I am currently exploring the process of hosting static js and css files using NextJS. My journey began with creating a react app through create-react-app, where I developed an App component before executing the npm run build command. This resulted in the ...

Tips for dynamically creating column headings and table values using JSON arrays in AngularJS

On a web page, there are two radio buttons that produce different results: The first button shows Student Details and the corresponding JSON array is as follows : [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"}, {"Name":"B", "Class":"x", "S ...

What is the process for selecting and accessing a DOM element?

Looking to utilize jQuery selector for accessing deep within the DOM. HTML <table> ...more here <tr> <td class="foo bar clickable"> <div> <div class="number">111</div> //Trying to retrieve "111" ...