javascript - x Axis Labels are cut off from Highcharts Column Chart -
i attempting full label displayed in x axis, highcharts keeps on cutting off. tried using crop, overflow, , margin options discussed in other posts no avail. option worked make div height of chart absurd size.
$('#da-expulsions').highcharts({ chart: { type: 'column', renderto: 'da-expulsions', }, data: { googlespreadsheetkey: '1nx8zcii0ulxytlmra0a9n11-llzjcdvh2-7sbk_k5-u', startcolumn: 0, startrow: 0, googlespreadsheetworksheet: 19, }, title: { text: 'expulsion rates @ campuses highest expulsion rates on time' }, yaxis: { min: 0, max: 30, breaks: [{ from: 12, to: 24, breaksize: 1 }], tickinterval: 3, title: { text: 'expulsions rate (%)' }, labels: { formatter: function() { return this.value + '%'; } } }, tooltip: { valuesuffix: '%' }, xaxis: { type: 'category', title: { text: 'school' }, }, });
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/data.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js"> </script> </head> <body> <div id="da-expulsions"></div> </body>
the "make div height of chart absurd size" why truncated view added. if hover on xaxis labels full text shown. if want increase available size xaxis labels can. recommendation use 'bar' format xaxis vertical , adjust font sizing of xaxis label although not 100% accurate. wrong ellipsis?
labels: { usehtml: true, style: { fontsize: '8px', width: '300px' } }
Comments
Post a Comment