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.
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
Post a Comment