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

Ways to update a component from another in React

My React code includes an Employees page that renders both a Table component and a Filter component. The Filter component manipulates some data stored in the Employees page, updates the Filter's state through useEffect, and passes the data as a prop t ...

javascriptreactjs

Tips for moving between multiple router outlets on a page?

My search has lasted for half a day, but I am still unable to find a solution that works. Here are the routes I currently have: app-routing.module.ts const routes: Routes = [ { path: '', redirectTo: 'feature2', pathMatch ...

angularrouter-outletangular12

One limitation is that you cannot use JQuery to make multiple rows editable simultaneously

I have a unique challenge with implementing an edit button on each row of a dynamic Bootstrap table. I am attempting to toggle the button's icons and, depending on its current state, enable the corresponding row for editing. <td><button typ ...

javascriptjquerytwitter-bootstrapjquery-events

Mastering the art of manipulating arrays with jquery

Trying to implement a dynamic search bar feature using jQuery. Here is the code snippet: Fiddle : https://jsfiddle.net/fpLf1to4/ var inputSearch = $('.searchInput').hide(); var searchArray = ['s','e','a',& ...

javascriptjqueryarrays

Determining in Angular 8 whether a value has been altered by a user or by a method call

Within my select element, the value is currently being assigned through an ngOnInit call. Here is an example of the HTML code: <select name="duration" [(ngModel)]="exercisePlan.duration" (ngModelChange)="onChange($event)"> <option *ngFor="l ...

htmlangulartypescript

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

javascriptcssangularjspopup

Executing MySQL queries synchronously in Node.js

When working with NodeJS and mysql2 to save data in a database, there are times when I need to perform database saves synchronously. An example of this is below: if(rent.client.id === 0){ //Save client connection.query('INSERT INTO clients (n ...

javascriptnode.jsmysql2

Error message: The Slick Carousal encountered an unexpected problem - TypeError:undefined is not a function

I'm having an issue with a script for a Slick Carousel inside of some Ajax Tabs. I keep encountering the Uncaught TypeError: undefined is not a function error, but I'm unsure what exactly it's pointing to. $(document).ready(function(){ ...

javascriptjqueryajaxcarouseltypeerror

Utilizing JQuery and Jade to extract and display information from a Node.js server

I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...

javascriptjquerynode.jsexpresspug

New issue with installing npm cra

Recently updated to npm version 6.14.4 and encountered an issue while trying to create a new app with cra-template. How can I resolve this problem? npx create-react-app sphinx.ui.react Error Log 50 timing stage:runTopLevelLifecycles Completed in 5234ms ...

javascriptnode.jsjsonnpm

PersistJS callback function is malfunctioning

I stumbled upon a great library for managing client storage. You can find the latest version here: https://github.com/jeremydurham/persist-js However, I encountered an issue with the callback function. var result = store.get('saved_data', func ...

javascripthtmlpersistjs

Achieving different results by modifying an array within a forEach loop

I am currently working on a forEach() function that increments an array by one for each iteration. The problem I am facing is that whenever I try to display the value of the number variable in the browser's console, it only shows me the final state i ...

javascript

The module 'iap_verifier' could not be located

Setting up a new server using the following repository - https://github.com/surespot/web-server. I have successfully installed node.js, npm, CoffeScript, and all required dependencies. apt-get install nodejs npm npm install -g <a href="/cdn-cgi/l/email ...

javascriptnode.jscoffeescriptnpm

Interactive web page with dynamic JQuery functionality and navigable page links

I am working on the project/index.html page <html> <head> <title>Index</title> <scripts...> </head> <body> Hello <div id="content"></div> <button id="page1" value="page1"/> <but ...

javascriptphpjquerydynamicindexing

Having trouble connecting to the API due to the error "No Access-Control-Allow-Origin" in Angular 2

I am new to working with Angular2 and I'm currently facing a challenge in implementing authentication for an app using username and password login credentials. Unfortunately, I keep encountering the error message "No Access-Control-Allow-Origin". htt ...

angular

What is the method for placing one object within another object?

This is a sample of my data collection: [ { "column1":"data1", "column2":"data2", "column3":[ { "column31":"data31", "column32& ...

javascriptnode.jsmongodbexpressmongodb-query

Custom AngularJS directive for ensuring the selection of a required HTML element

Today brings another question as I continue working on my web application. I've encountered an issue with the 'required' attribute not being widely supported in major browsers. The attribute only works if the first option value is empty, whi ...

javascriptjqueryhtmlangularjs

Error handling proves futile as Ajax upload continues to fail

Utilizing a frontend jQuery AJAX script, I am able to successfully transfer images onto a PHP backend script hosted by a Slim framework app. However, there is one specific image (attached) that is causing an issue. When the backend attempts to send back a ...

javascriptphpjqueryajaxslim

Encountering an issue in next js where attempting to access properties of an undefined variable is resulting in an error with the

"next": "13.0.7" pages version An error occurred in production mode, displaying the following message in the console: TypeError: Cannot read properties of undefined (reading 'push') Additionally, an application error popped ...

javascriptreactjsnext.jsrouter

Customized Grafana dashboard with scripted elements

I'm running into an issue while using grafana with graphite data. When I attempt to parse the data, I encounter an error due to the server not providing a JSON response. I am experimenting with scripted dashboards and utilizing the script found here: ...

javascriptjsongraphitegrafana