CODEWITHSUNDEEP
javascripthighcharts
atsituab
atsituab

Reputation: 637

Display series stack label on chart

Tried searching for this and came up empty handed so apologies if this answer does exist.

Please see my fiddle https://jsfiddle.net/bautistaaa/h6fbvdyf/3/

Data snippet:

series: [{
        name: 'CSI A',
        data: [5,4,3,2,1],
        stack: 'open',
        color: Highcharts.getOptions().colors[0],
    }, {
            name: 'CSI A',
        data: [1,2,3,4,5],
        stack: 'realized',
        linkedTo: ':previous'
    }

You'll notice I have two stacks.. one for realized and one for open. How can I actually display Open and Realized below each column so the user does not have to hover over the column to see which stack it is in the tooltip. And maybe as a bonus have only have Open and Realized appear when data exists above it.

Thanks in advance

Upvotes: 1

Views: 128

Answers (1)

Tik
Tik

Reputation: 882

You could do it like this using a custom formatted for the labels. Its not 100% perfect. you can adjust the styles to make it fit better.

note: useHTML needs to be set to true for this to work

xAxis: {
        categories: ['FY17', 'FY18', 'FY19', 'FY20', 'FY21'],
        labels: {
            formatter: function(){
          console.log(this);
            return '<span style="margin-right: 15px">' + this.chart.series[0].options.stack + '</span><span>' +                             this.chart.series[1].options.stack + 
            '</span><br /><div style="text-align:center">' + this.value + '</div>'
          },    
          useHTML: true
        }    
    },

enter image description here

Upvotes: 1

Related Questions