CODEWITHSUNDEEP
javascriptangulartypescripthighcharts
Sahil Vig
Sahil Vig

Reputation: 11

Highchart stacking highest bar to combine the rest

I want to use the stacking so that it takes the highest value as the longest column/bar and the smaller ones are merged in the highest bar. In the example : Arsenal has 2 values : 14 and 3. in the stack chart it shows 17 and shows the 2 bars on top of each other. what i want is these stacks to merge and show maximum 14 number as the large bar and 3 number is stacked within 14 so that y axis should not cross the highest bar value in any case. Similarly for liverpool values are 6,8 and 1. so it should should have maximum of y axis value as 8(i dont need the sum of the values) Is there a possibility for this?

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

Y axis to show the value of maximum number in the series and not the sum of all the stacked columns.enter image description here Update:

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

In this fiddle you will see i was able to achieve this for manchester but it is not correct for arsenal and others as it hides the lower value stacks. All 3 colors should be visible for all the stacks in the bars. Expected: enter image description here

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

Upvotes: 0

Views: 74

Answers (1)

Michał
Michał

Reputation: 1469

Unfortunately, Highcharts do not have this type of charts. This is not staking, at least not in the traditional sense of the word.

You can use the pointPlacement property on series to make them overlap, but then you need to sort them appropriately so that the highest values are in one series and the series are sorted in descending order so that smaller columns are not hidden under 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>

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

Upvotes: 0

Related Questions