CODEWITHSUNDEEP
highcharts
cmal
cmal

Reputation: 1791

Solid Gauge: Prevent y-axis label from overlapping gauge

As far as I can tell, the solid gauge chart type in Highcharts doesn't provide any method for automatically ensuring that y-axis labels (the 150500500 in this example) don't overlap the actual chart graphics. Given unpredictable data, there is basically nothing I could do to prevent any possibility of this overlap, short of positioning the y offset for the label ridiculously far away from the chart. Any Suggestions?

enter image description here

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
    }
  }));

  });

Upvotes: 0

Views: 1447

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

There is an option of labels - distance - that can place labels further away from the perimeter of the plot area.

Example: http://jsfiddle.net/az9hoet7/

API: http://api.highcharts.com/highcharts#yAxis.labels.distance

About collision detection between labels and graphic - there is no such default feature in Highcharts. To request a feature, please post a suggestion on UserVoice, or vote for the ones that are already registered.

Upvotes: 1

Related Questions