Highcharts - get bottom position for each stacked category

785
February 21, 2017, at 2:31 PM

my current jsfiddle

I am trying to lower each price's data label to the bottom of each stacked category.

The problem with using absolute position is that every category has different dynamic height (data comes from db).

formatter: function() {
                        return '<div style="text-align: center; position: relative; top:9px">'+ this.series.name +
                               '</div><div style="text-align: center; position: relative; left: -63px; top:-10px; border-bottom: 1px solid grey; width:70px;">$'+ this.y +'</div>';
                    },

Also i don't want to use verticalAlign:bottom because i need the inner data label to be in the middle of each column, so i have the opposite problem here (middling the inner data label).

  • ignore the fact that only the top price is visible. no idea why its not working in jsfiddle, works fine in my app.
Answer 1

You can change a bit formater function to have you $ amount inside serie div. But it's not perfectly align with box...

$(function () { 
    var chart; 
    $(document).ready(function() { 
        chart = new Highcharts.Chart({ 
            chart: { 
                renderTo: 'container', 
                type: 'column' 
            }, 
             
            xAxis: { 
            	title: null, 
                        lineWidth: 0, 
                        minorGridLineWidth: 0, 
                        gridLineColor: 'transparent', 
                        lineColor: 'transparent', 
                        labels: { 
                            enabled: false 
                        }, 
                        minorTickLength: 0, 
                        tickLength: 0 
            }, 
             
            yAxis: { 
            	title: null, 
                        lineWidth: 0, 
                        minorGridLineWidth: 0, 
                        gridLineColor: 'transparent', 
                        lineColor: 'transparent', 
                        labels: { 
                            enabled: false 
                        }, 
                        minorTickLength: 0, 
                        tickLength: 0 
            }, 
             
            legends: {enabled: false}, 
            
            plotOptions: { 
 
                series: { 
 
                    lineWidth: 15, 
 
                }, 
                column: { 
 
                    stacking: 'normal', 
                    dataLabels: { 
                        enabled: true, 
                        useHTML: true, 
                        formatter: function() { 
                            return '<div style="text-align: center; position: relative; top:9px;">' 
                            + this.series.name 
                            + '<div style="position: relative; left: -70px; border-bottom: 1px solid grey; width:70px;top:0px">$' 
                            + this.y  
                            + '</div></div>'; 
                        }, 
                    }, 
 
                    pointWidth: 50, 
                }, 
            }, 
            series: [{ 
 
                name: '+8', 
                data: [3656], 
 
            }, { 
 
                name: '5-8', 
                data: [3498], 
 
            }, { 
 
                name: '3-5', 
                data: [3116], 
 
            }, { 
 
                name: '1-3', 
                data: [4454], 
 
            }, { 
 
                name: '0', 
                data: [1465], 
 
            } 
 
            ] 
        }); 
    }); 
     
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Rent Charter Buses Company
READ ALSO
Bootstrap validation : 2 glyphicons are overlapping

Bootstrap validation : 2 glyphicons are overlapping

I have validation for 2 fields which are country code and actual mobile numberI have attached screenshot

729
Select Html row and get selected data

Select Html row and get selected data

I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!

528
Making responsive multiple divs

Making responsive multiple divs

I have page where I show 4 images - 2 by 2 on each rowI'm trying now to make them responsive when page is open on mobile device but I can't figured it out how to make this

401
document.getElementbyID returns NULL for the DIV with in iFrame

document.getElementbyID returns NULL for the DIV with in iFrame

I have a JSP page which loads a static HTML page using iFrameNow i am trying to change the alignment of one of the DIV (which is there in static HTML page) using the jQuery dynamically

839