Half-Circle Gauge formatting

Ignition
1

Two question about the Gauge component.

  1. The rightmost number of the scale is getting clipped. If I adjust the width the topmost number gets clipped. How do I prevent the clipping?
  2. I am using the same ranges on the inner and out axis. Is there a way to disable the numbers showing up on the inner axis since the values are duplicated and it looks messy to have the extra numbers crowded in?
    Thanks
2

`Welcome to the forum.
Please right-click on the component in the Project Browser, Copy, and paste the component's JSON here. Then format it as shown in Wiki - how to post code on this forum. That way we can reproduce the problem and find a fix.

3 
[
  {
    "type": "ia.chart.gauge",
    "version": 0,
    "props": {
      "value": 50,
      "secondaryValue": 100,
      "outerAxis": {
        "maxValue": 120,
        "width": 1,
        "ranges": [
          {
            "start": 0,
            "end": 80,
            "width": 8,
            "color": "#77B6D8"
          },
          {
            "color": "#6E94D7",
            "end": 105,
            "start": 80,
            "width": 12
          },
          {
            "color": "#7A6BD5",
            "end": 120,
            "start": 105,
            "width": 16
          }
        ],
        "data": "value",
        "percentRadius": 100,
        "show": true
      },
      "innerAxis": {
        "maxValue": 120,
        "width": 0,
        "data": "secondaryValue",
        "percentRadius": 85,
        "show": true
      },
      "animate": true,
      "backgroundColor": ""
    },
    "meta": {
      "name": "Gauge"
    },
    "position": {
      "x": 15,
      "height": 137,
      "width": 224
    },
    "custom": {}
  }
]
4

It looks like the clipping of the text is determined by the clip mask in the SVG component. I can't see a way to change it. Regular HTML clipping could be overwritten by adding style.overflow : visible but that doesn't work in this case.

A "fix" is to reduce the font size. style.fontSize : 8px works but you may find it a bit small or that it doesn't match your other components.

5

I was able to fiddle with sizing and get 12pt font to not clip, so in lieu of a 'true' solution that will help.
Thanks.