HighCharts: visualize vertical stacked bars displaying the distribution of percentages within each stack

I currently have a stacked bar chart similar to the one shown in this JSFiddle demo.

My goal is to transform the stacks so that each bar represents a percentage of the total stack height. For instance, in the Apples stack we currently have values {3, 2, 5} totaling 10.

What I aim for is to display percentages like {30%, 20%, 50%}. While I could easily calculate these percentages before providing the data to HighCharts, I still want to exhibit the original numbers {3, 2, 5} as the bar labels (highlighted in red above).

javascripthighcharts

Answer №2

Implement the following snippet in your settings:

plotSettings: {
   collection: {
       grouping: 'percentage'
   }
}

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

What is the process for updating the package-lock.json file in Laravel?

GateLab's security feature has identified some known vulnerabilities in the package-lock.json file that need to be updated. The message states: Known security vulnerabilities detected Dependency object-path Version < 0.11.5 Upgrade to ~> 0.11. ...

javascriptlaravelnpm

passing JSON data using JavaScript or jQuery

I have a JSON snippet that I need to parse using JavaScript or jQuery and convert into variables: name and meetup. Can you help me with this? Below is the JSON code: { "MYID": 1, "module": [ { "name": "Manchester", ...

javascriptjqueryjson

Learn how to dynamically clear and update source data in jQuery autocomplete for enhanced functionality

Here is a snippet of my jQuery code. In this code, 'year' refers to the form input tag ID, and 'years' is an array variable containing all the year values. I have set this array as the source for autocomplete, which works fine. However, ...

javascriptjqueryhtmlautocompletejquery-ui-autocomplete

When transmitting a variable from JavaScript to PHP using Ajax, the data appears to be missing

While attempting to pass a simple string variable using an onclick event, I encountered an issue where the request was successful but the response in the console displayed as empty. Additionally, the xvar variable did not come through properly resulting in ...

javascriptphpjqueryajaxwordpress

Transform a div's style when hovering over another div using absolute positioning without repetition

I am facing an issue with multiple divs positioned absolutely on top of a primary div with relative positioning. I want one specific div to change its background-color when hovering over another div within the same parent div. Though I know about ad ...

javascriptjqueryhtmlcss

The CSS and Bundle script path may need adjustment following the creation of the index.html file by WebPack

There seems to be an issue with webpack trying to add 'client' to the href of script tags for my CSS and bundle files. This is causing a problem as it's incorrect and I'm unsure how to remove it. Prior to switching to webpack, here&apo ...

javascriptreactjswebpack

Avoiding a browser becoming frozen during an AJAX call

I'm currently working on sending a request when a user closes the page using the onbeforeunload event. This event triggers when the tab is closed or the page is refreshed. Here's my event implementation: window.onbeforeunload = function() { ...

javascriptphpjqueryajax

What is the best way to select the enclosed <a> tag within an <li> element?

Below is the JavaScript code I have attempted: $('#footer').find('.browse li').click(function(e){ $(this).find('a').click(); }); Here is the relevant HTML: <div id="footer" class="span-24"><div ...

javascriptjquery

Using regular expressions in JavaScript, we can separate a paragraph into individual sentences

Hey there! I'm currently working on a project that requires extracting sentences from a paragraph using regex in JavaScript. Unfortunately, my attempts to achieve this have resulted in syntax errors as I have tried methods used in other programming la ...

javascriptregex

AngularJS - utilizing the directive $parsing to evaluate an expression and bind it to the scope object

I have set up my isolated directive to receive a string using the @ scope configuration. My goal is to convert this string into an object on the scope, so that I can manipulate its properties and values. Here's how it looks in HTML: <div directiv ...

javascriptangularjsangularjs-directiveangularjs-scope

What is the best approach to transpiling TypeScript aliased paths to JavaScript?

I am currently facing an issue with my TypeScript project where I need to transpile it into executable JavaScript while using path aliases for my NPM package development. One specific scenario involves importing a method from the lib directory without spe ...

javascripttypescriptnpmtsctsconfig-paths

How can I utilize the context menu feature within a Material React Table row?

I am looking to implement a context menu for each row of the MUI Table, but I haven't found a suitable example. Is there native support for row-level context menus in the MUI Table, or is it possible to add this functionality per row? For reference, ...

javascriptreactjsmaterial-uimui-datatable

Guide on how to align h1 in the navigation bar

I've been attempting to center text on a nav bar but haven't been successful. What could I be overlooking? // include external modules import React, { Component } from "react"; import { Navbar } from "reactstrap"; import { Menu } from " ...

javascripthtmlcssreactjs

The then() function in Node.js is triggered before the promise is fully resolved

I'm struggling to get my Promise function working as intended. Here's what I need to accomplish: I am receiving file names from stdout, splitting them into lines, and then copying them. Once the copy operation is complete, I want to initiate oth ...

javascriptnode.jspromise

What is the reason behind the failure of the cancel test?

I've created two test cases; one for testing the functionality of the Download button and the other for the Cancel button. However, I am encountering issues with the Cancel test failing consistently. Below is the code snippet where I'm attemptin ...

javascriptnode.jsreactjstestingjestjs

`@keyup.enter event listener will only be triggered upon pressing the Enter key if the focus is on

My login button only seems to work when I press the tab button after entering my email and password. I would like it to work whenever I press the enter key while on the Login page of this VueJS application. This is the HTML template: <template> ...

javascriptvue.jsenter

Exploring the Contrast between window.location.href and top.location.href

I'm curious about the distinction between window.location.href and top.location.href. Can anyone explain this to me? Furthermore, I'd like to know when it's appropriate to use each one. Which option is more suitable for redirection after a ...

javascriptasp.net-mvc

Using node.js version 10.0.0 to tinker with gulp

I was working on a node.js api project that functioned perfectly with node.js v8.1.4 & npm v5.0.3. However, upon transitioning to node.js v10.0.0 & npm v5.6.0, I encountered the following error: [email protected] ecosystem E:\opensource& ...

javascriptnode.jsnpmgulppm2

Shifting the position of an HTML page to one direction

I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the technique used by express.js to handle ReferenceError?

// Here is a sample code snippet app.get("/test", (req, res) => { return res.status(200).send(SOME_UNDEFINED_VAR); }); If a ReferenceError occurs, express.js will automatically send a 500 error response. express.js logs the ReferenceError to std ...

javascriptnode.jsexpresserror-handling