highcharts - Data label is getting shown inside of the bar in sometimes -


sometimes data label getting shown inside of bar. example in given jsfiddle bar 'asia' data label showing inside bar itself. there way display data labels outside of bar.

http://jsfiddle.net/n3me6r8k/

highcharts.chart('container', {     chart: {         type: 'bar'     },     title: {         text: 'historic world population region'     },     subtitle: {         text: 'source: <a href="https://en.wikipedia.org/wiki/world_population">wikipedia.org</a>'     },     xaxis: {         categories: ['africa', 'america', 'asia', 'europe', 'oceania'],         title: {             text: null         }     },     yaxis: {         min: 0,         title: {             text: 'population (millions)',             align: 'high'         },         labels: {             overflow: 'justify'         }     },     tooltip: {         valuesuffix: ' millions'     },     plotoptions: {         bar: {             datalabels: {                 enabled: true             }         }     },     credits: {         enabled: false     },     series: [{         name: 'year 2012',         data: [1052, 954, 4250, 740, 38]     }] }); 

yes, done setting 2 params more in datalabels configuration, namely:

datalabels: {         enabled: true,         crop: false,         overflow: "none" } 

normally, highcharts move label inside bar when cropped frame of div. configuration above, allows set labels not cropped, out of chart container.

jsfiddle: http://jsfiddle.net/daniel_s/8m1b4arv/

api reference: http://api.highcharts.com/highcharts/series%3cbar%3e.datalabels.crop


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -