highcharts - Solid Gauge: Prevent y-axis label from overlapping gauge -
as far can tell, solid gauge chart type in highcharts doesn't provide method automatically ensuring y-axis labels (the 150500500 in example) don't overlap actual chart graphics. given unpredictable data, there nothing prevent possibility of overlap, short of positioning y offset label ridiculously far away chart. suggestions?
example: http://codepen.io/cmalven/pen/58a2b0bc047c05c8c35cdaa4bb733e61/
chart opts:
$(function () { $('#container-speed').highcharts(highcharts.merge({}, { "colors": [ "#4fb04f" ], "yaxis": { "min": 0, "max": 200500500, "tickpositions": [ 0, 150500500, 200500500 ], "labels": { "y": 24, "style": { "color": "#0e4d5c" } }, "linewidth": 0, "minortickinterval": null, "tickwidth": 0, "title": { "enabled": false } }, "series": [ { "name": "speed", "data": [ 150500500 ] } ], "chart": { "type": "solidgauge", "height": 190 }, "title": { "text": "" }, "pane": { "center": [ "50%", "125%" ], "size": "240%", "startangle": -70, "endangle": 70, "background": { "backgroundcolor": "#0e4d5c", "borderwidth": 0, "innerradius": "81%", "outerradius": "92%", "shape": "arc" } }, "tooltip": { "enabled": false }, "plotoptions": { "solidgauge": { "innerradius": "88%", "radius": "85%", "datalabels": { "enabled": false } } }, "credits": { "enabled": false } })); });
there option of labels - distance - can place labels further away perimeter of plot area.
example: http://jsfiddle.net/az9hoet7/
api: http://api.highcharts.com/highcharts#yaxis.labels.distance
about collision detection between labels , graphic - there no such default feature in highcharts. request feature, please post suggestion on uservoice, or vote ones registered.

Comments
Post a Comment