javascript - HighCharts dynamically resize renderer label or element -
i need add extensive footnotes charts , must export svg cannot put them in surrounding html.
i have tried several strategies , can position it, wrap text, manipulate size of chart make space etc.
the intent make them responsive. problem cant find how update size of container holds text either using using events , renderer elements or using chart.labels
in fiddle (among other things): attempting create new label every redraw cannot find how address , destroy label creating onload
http://jsfiddle.net/alex_at_pew/qswnw4wz/2/
$(function () { function foo() { var width = $(this.container).width()-250; return width;} var footnote_text = 'this text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing text adjust chart resizing '; $('#container').highcharts({ chart: { events: { load: function () { var label = this.renderer.label(footnote_text, //str 10, //x 200,//y 'rect',//shape 1,//anchorx 1,//anchory 1,//usehtml 1,//baseline 'deletme'//classname ) .css({ width: foo() + 'px' }).add(); }, redraw: function () { $('.highcharts-deletme').remove(); console.log('chart'); var label = this.renderer.label(footnote_text, //str 10, //x 200,//y 'rect',//shape 1,//anchorx 1,//anchory 1,//usehtml 1,//baseline 'deletme'//classname ) .css({ width: foo() + 'px' }).add(); } } }, labels: { items: [{ html: foo()+footnote_text }], style: { left: '100px', top: '100px', color: 'red', width: foo() } },series: [{ data: [29.9, 71.5] }] }); });
another (and general) solution store generated label in variable:
var mylabel; // define label $('#container').highcharts({ chart: { events: { load: function () { mylabel = this.renderer.label( ... ).add(); }, redraw: function () { if(mylabel) { mylabel.destroy(); } mylabel = this.renderer.label( ... ).add(); } } } }); it faster, using jquery find items classes.
Comments
Post a Comment