CODEWITHSUNDEEP
javascripthighcharts
void
void

Reputation: 36703

Highcharts streamgraph Y Axis Labels

I am using Highcharts Stream graph and everything is working fine except the yaxis labels are coming wrong. Even in the example page, the Y axis is equally divided into two parts and the mid point is zero and all the other labels are relative to that.

I want the labels to render the value which is actually on the graph.

Highcharts.chart('container', {

    chart: {
        type: 'streamgraph'
    },

    legend: {
        enabled: false
    },

    // Data parsed with olympic-medals.node.js
    series: [{
        name: "Finland",
        data: [
            0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5
        ]
    }, {
        name: "Austria",
        data: [
            0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17
        ]
    }, {
        name: "Sweden",
        data: [
            0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15
        ]
    }, {
        name: "Norway",
        data: [
            0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10, 9, 5, 20, 26, 25, 25, 19, 23, 26
        ]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/streamgraph.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

Upvotes: 0

Views: 211

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

That is how streamgraph series works, please check a official example: https://www.highcharts.com/demo/streamgraph - areas are displaced around a central axis, y-axis is not relevant.

Please also check the streamStacker function in the module source code: https://code.highcharts.com/modules/streamgraph.src.js

I recommend you to use areaspline series with stacking if you want to use y-axis.

    chart: {
        type: 'areaspline'
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

Live example: http://jsfiddle.net/BlackLabel/o4drspjq/

Upvotes: 1

Related Questions