Geek Answers Handbook

How to add text to the lower center of the legend and the lower center of the chart under the legend?

I have custom HighCharts that have totals in the legend. I need to add one line of custom text centered on the totals of the "legend". I also need to add a text center at the bottom of the chart "under the legend."

See the fiddle: http://jsfiddle.net/no1uknow/cvsTB/

[EDIT] I have done so much, but I don’t know how to get the text oriented under the legend. http://jsfiddle.net/no1uknow/cvsTB/1/

$(function () { var chart; $(document).ready(function() { var container_chartFreqAtaTailNum = new Highcharts.Chart({ chart: { renderTo: 'container_chartFreqAtaTailNum', type: 'bar', height: 795 }, title: { text: 'Frequency by Tail Number' }, subtitle: { text: 'Fact ATA (25)' }, xAxis: { categories: ['235','245','402','411','432','442','493','703','714','720','730','745','756','767','772','792'], title: { text: 'Tail Number' }, labels: { style: { width: '12000px' } } }, yAxis: { min: 0, title: { text: 'Count', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { formatter: function() { return ''+ this.series.name +': '+ this.y +' Count'; } }, plotOptions: { bar: { dataLabels: { enabled: true } }, series: { pointWidth:10, groupPadding: .05, shadow: true } }, legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', floating: false, borderWidth: 1, backgroundColor: '#FFFFFF', shadow: true, labelFormatter: function() { return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>'; } }, credits: { enabled: false }, exporting: { enabled: true }, series: [{ name: 'Heavy', total: '5421', data: [117,102,698,640,251,115,269,279,260,309,328,427,316,754,239,317] },{ name: 'Intermediate', total: '4888', data: [299,169,448,532,210,256,241,295,226,368,319,420,272,243,313,277] },{ name: 'Line', total: '659', data: [29,38,50,47,33,27,22,67,57,44,36,53,41,37,35,43] },{ name: 'Lite', total: '2172', data: [101,116,139,124,123,139,148,249,168,141,122,136,91,154,105,116] }] }); }); });
+7
highcharts
source share
1 answer

spacingBottom is what you need to add, and also you need to take care of the offset:

 chart: { events: { load: function () { var label = this.renderer.label("How do I move this center and under the legend.") .css({ width: '450px', color: '#222', fontSize: '16px' }) .attr({ 'stroke': 'silver', 'stroke-width': 2, 'r': 5, 'padding': 10 }) .add(); label.align(Highcharts.extend(label.getBBox(), { align: 'center', x: 0, // offset verticalAlign: 'bottom', y: 50 // set the right offset }), null, 'spacingBox'); } }, renderTo: 'container_chartFreqAtaTailNum', type: 'bar', height: 895, spacingBottom: 100 // The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position). }

Here is the fiddle: http://jsfiddle.net/uMBHf/1/

+7
source share

More articles:


All Articles