Combine the remaining bars by stacking the highest one on top in Highchart

Making use of stacking to display the highest value as the longest column/bar, with smaller values being merged within the highest one, can create a more visually appealing stack chart. For example, when looking at Arsenal with values of 14 and 3, ideally the stack chart would show a maximum value of 14 as the largest bar, with the smaller value of 3 stacked within it. This ensures that the y-axis does not exceed the highest bar value no matter what. Similarly, for Liverpool with values of 6, 8, and 1, the desired outcome is to have the y-axis display a maximum value of 8 without summing all the values together. Is there a way to achieve this effect?

[https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked]

The y-axis should reflect the maximum number in the series rather than the total of all stacked columns.https://i.stack.imgur.com/xsHz2.png Update:

[https://jsfiddle.net/vkcg9mfo/]

In the provided fiddle, I was able to successfully implement this feature for Manchester. However, the issue arises with Arsenal and other teams as the lower value stacks are hidden. The goal is to ensure all three colors are visible for each stack in the bars. Expected: https://i.stack.imgur.com/zK3dG.png

UPDATED ANSWER: [https://jsfiddle.net/BlackLabel/9n1cqe2x/]

javascriptangulartypescripthighcharts

Answer №1

Regrettably, Highcharts do not offer charts of this type. This is not stacking in the conventional sense of the term.

To achieve overlapping series, you can utilize the pointPlacement property and ensure proper sorting to display smaller columns without being obscured by larger ones:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    series: [{
        data: [14, 8, 8, 13],
        pointPlacement: 0.2
    }, {
        data: [3, 5, 6, 12],
        pointPlacement: 0
    }, {
        data: [0, 2, 1, 3],
        pointPlacement: -0.2
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

Live Demo: https://jsfiddle.net/BlackLabel/zqvma6wb/
API Reference: https://api.highcharts.com/highcharts/series.column.pointPlacement

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

"Trouble with Typescript's 'keyof' not recognizing 'any' as a constraint

These are the current definitions I have on hand: interface Action<T extends string, P> { type: T; payload: P; } type ActionDefinitions = { setNumber: number; setString: string; } type ActionCreator<A extends keyof ActionDefinitions> ...

typescript

Having trouble with React button conditional rendering not functioning properly

Currently, I am working on a cart application and facing an issue. The problem is that the button is not getting disabled when the quantity reaches zero. Instead, it continues to show the 'add to cart' button even when no items are left in stock. ...

javascriptreactjs

Obtain the total number of requests submitted by the user within a 24-hour period

I have a POST request point in my API where I need to track and store all work journals made by a worker. export const registerPoint = async (req: Request, res: Response) => { const user = res.locals.decoded; const {id} = user; const point = new Point ...

node.jstypescriptsequelize.jsbackend

Adding a line break in a Buefy tooltip

I am trying to show a tooltip with multiple lines of text, but using \r\n or is not working. <b-tooltip label="Item 1 \r\n Item 2 \r\n Item 3" size="is-small" type="is-light" position="is-top" animated multilined> ...

javascripthtmlvue.jsvuejs2buefy

A notification appears when the record is being inserted after clicking the button

Just venturing into the PHP and MYSQL realm, so please excuse any beginner questions. Before I submit data from a form to my SQL table, I'd like to display a confirmation POP UP message asking "Are you sure you want to insert this data?" ...

javascript

Error Encountered: Unable to resolve parameters for the AppErrorHandler class in Angular 8

My Angular 8 app is encountering an error during runtime, leading to a failure in rendering the page. localhost/:12 GET http://localhost:4200/lib/images/logo.png 404 (Not Found) compiler.js:2175 Uncaught Error: Can't resolve all parameters for AppErr ...

angular

Encountering an issue when bundling an application using electron-forge: "Unable to find solution for './→' "

Having trouble packaging my Electron application using electron-forge. It seems like the issue lies with native modules such as 'sqlite3'. Upon running the command npm run package, I encounter this error: Module not found: Error: Can't reso ...

javascriptnode.jswebpackelectronelectron-forge

React and Typescript Multimap Approach

I'm a beginner in TypeScript and I am struggling to understand how to create a multimap. The code I have is shown below. My goal is to loop through the itemArray and organize the items based on their date values. I want to use the date as the key for ...

reactjstypescriptmultimap

Developing a Typescript npm package

In my project, there is a directory called models (named my-models) which houses several important typescript classes for my application. While I have been able to use these classes within the app without any issues, I now wish to turn it into an npm pack ...

node.jsreactjstypescriptnpm

What is the best way to incorporate a loading icon onto a webpage that exclusively runs JavaScript functions?

I frequently use Ajax load icons to indicate progress during ajax requests. Is there a way to achieve the same result using regular JavaScript? For instance: $('button').on('click', function(){ showLoadingIcon(); lengthyProces ...

javascriptjqueryajaxbrowserloading

Using Javascript function with ASP.NET MVC ActionLink

I need help with loading a partial view in a modal popup when clicking on action links. Links: @model IEnumerable<string> <ul> @foreach (var item in Model) { <li> @Html.ActionLink(item, "MyAction", null, new ...

javascriptjqueryasp.net-mvc-4

generate a fresh array with matching keys

Here is an example array: subjectWithTopics = [ {subjectName:"maths", topicName : "topic1 of maths " }, {subjectName:"maths", topicName : "topic2 of maths " }, {subjectName:"English", topicName : &quo ...

arraysangulartypescriptangular8ngfor

Updating the value of a radio button prior to triggering the click event

I am facing an issue with click events on my radio buttons. The validators are being set or cleared before the value actually changes. When the Yes radio button is clicked, I want to toggle the validators for the additional field that it reveals. If the N ...

angular

What is the most effective method for defining 2 routes that point to the same component?

Although it may seem straightforward, I'm struggling to find the most efficient method for this particular scenario in Vue.js. I am using Vue Cli 3 and I need to have multiple routes leading to the same Home page within the application. The idea is ...

javascriptvue.jsroutesvue-routervue-cli-3

I am encountering an issue with my code where the function this.ProductDataService.getAllProducts is not recognized when

Encountering an issue while running unit test cases with jasmine-karma in Angular 7. The error received is: ProjectManagementComponent should use the ProjectList from the service TypeError: this.ProjectManagementService.getProject is not a function If I ...

angulartypescriptjasminekarma-jasmine

What could be the reason for Angular showing the raw HTML code instead of

I'm currently diving into Angular and encountering an issue where my HTML isn't properly displaying the values I've set. It appears to only show the raw HTML. Here's a snippet from my HTML page: <p>to-do-items works!</p> < ...

javascriptangular

Tips for assigning an external variable using Angular RxJS map function?

I am currently working on making code more reactive and declarative by using the async pipe to update the template. I'm facing a challenge with changing a variable that was previously set in the subscribe() method. Updating this variable from the map ...

angularrxjsrxjs-observables

Steps for implementing a single proxy in JavaScript AJAX with SOAP, mirroring the functionality of the WCF Test Client

I am working with a WCF web Service and a javascript client that connects to this service via AJAX using SOAP 1.2. My goal is to pass a parameter to instruct the AJAX SOAP call to use only one proxy, similar to how it is done in the WCF Test Client by unch ...

javascriptajaxwcfsoapproxy

Tips for storing an unmatched result in an array with a Regexp

Is it possible to extract the unmatched results from a Regexp and store them in an array (essentially reversing the match)? The following code partially addresses this issue using the replace method: str = 'Lorem ipsum dolor is amet <a id="2" css ...

javascriptarraysregextypescriptregex-negation

inject custom styles into a Material-UI styled component

Although I have come across similar questions, none seem to directly address my current situation. I am in the process of transitioning from MUI v4 to MUI v5 and have encountered various scenarios where a specific style is applied externally. For instance ...

javascriptreactjsmaterial-ui