Total valued figures often overlapping with bars in Highcharts Barchart

Question

I have a bar chart, often the total value overlaps on it as shown below. I tried to reduce area of graph, width and height, this problem gets resolved but for some other values arises again, is there any permanent solution to avoid overlapping?

Please find code below

 $('#' + divid).highcharts({
                        chart: {
                            type: chart_type == 'bar_simple' || chart_type == 'bar' ? 'bar' : 'column',
                            margin: 75,
                            marginBottom: $('.hidSelectedOA').val() == '0' ? '110' : '60',
                            marginLeft: marginLeftOfGraph,
                            marginTop: marginTopOfGraph
                        },
                        title: {
                            text: graphName
                        },
                        xAxis: {
                            categories: category_name,
                            labels: {
                                formatter: function () {
                                    var text = this.value,
                                        formatted = text.length > 20 ? text.substring(0, 20) + '...' : text;

                                    return '<div>' + formatted + '</div>';
                                },
                                style: {
                                    width: '150px'
                                },
                                useHTML: true
                            }

                        },
                        yAxis: {

                            title: {
                                text: '',
                            },

                            stackLabels: {
                                enabled: true,
                                style: {
                                    fontWeight: 'bold',
                                    color: 'gray'
                                },

                            }
                        },
                        legend: {
                            verticalAlign: 'bottom',
                            itemStyle: {
                                font: '12px Trebuchet MS, Verdana, sans-serif',
                                color: '#A0A0A0',

                            },
                            enabled: true,
                            //backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                            //borderColor: '#CCC',
                            itemMarginTop: 15
                            //borderWidth: 1,
                            //shadow: false
                        }, credits: {
                            enabled: false
                        },
                        exporting: { enabled: divid == 'myModalInnerHtml' ? true : false },
                        colors: colors
                        ,
                        tooltip: {
                            headerFormat: '<b>{point.x}</b><br/>',
                            pointFormat: '{series.name}: ' + cur + '{point.y:,' + format + '}'

                        },
                        plotOptions: {
                            column: {
                                stacking: chart_type == 'bar_simple_column' ? '' : 'normal',
                                dataLabels: {
                                    enabled: true,
                                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
                                    format: '{point.y:,' + format + '}'

                                }
                            },
                            series: {
                                stacking: chart_type == 'bar_simple_column' ? '' : 'normal',
                            },

                            line: {
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.y:,.2f}'
                                },

                                enableMouseTracking: false
                            }
                        },
                        series: JSON.parse(data.d),

                    });

Answer 1

Assuming that you are referring to the dataLabel position, what you are seeing is the label being moved inside the column when there is not enough space allotted outside of the column.

This is affected by the axis extremes, the axis maxPadding, and various data label properties.

To make sure that they always show outside of the column, you can add the crop, overflow, and inside settings to your data label options:

   plotOptions: {
     column: {
       dataLabels: {
         enabled: true,
         inside: false,
         crop: false,
         overflow: 'none'
       }
     }
   }

Keep in mind that this might then cause problems with the label being cut off by, or overlapping, the chart title or other elements at the top of the chart.

You'll need to make sure you allow enough space between the title and the chart, in case the label gets pushed up above the plot area.

Fiddle:

• http://jsfiddle.net/jlbriggs/7n5w5as0/

Reference:

• http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.inside

• http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop

• http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow