Pie Chart Component Question

Ignition
1

Hello! I'm working on some dashboards and currently using the Pie Chart component. I have one question: Is there any way to configure the component, or another method, to display the percentage inside the chart, like this?
image

Thanks

2

60 percent

You could use the Simple Gauge component to do it as shown.

I doubt the usefulness of using a chart as you have shown. It causes a cognitive dissonance. Which side is 60%? (It's the left on your sketch whereas most users would probably expect it to start at 12 o'clock and run clockwise.) What do the colors mean?

Compare that with the unambiguous gauge:
60 percent gauge

3

Yes, I understand the points you mentioned, but there is additional visual aid on the dashboard to help clarify which side we are referring to, the meaning of colors, etc. However, the requirements specify that one side should be shown inside the chart. I haven't used the Simple Gauge Component before; could you kindly explain how you configured the component to display it as shown in the image?
Thank you so much

4
Simple Gauge 
[
  {
    "type": "ia.chart.simple-gauge",
    "version": 0,
    "props": {
      "value": 60,
      "startAngle": -90,
      "endAngle": 270,
      "arc": {
        "width": 30,
        "color": "#152C73",
        "cornerRadius": 12
      },
      "arcBackground": {
        "color": "#A38F8F",
        "opacity": 1
      },
      "label": {
        "offsetY": 15,
        "units": "%"
      }
    },
    "meta": {
      "name": "SimpleGauge_0"
    },
    "position": {
      "x": 697,
      "y": 531,
      "height": 231,
      "width": 300
    },
    "custom": {}
  }
]

Copy and paste the code above into your view.
To get rid of the radiused corner set,
PROPS.arc.cornerRadius : 0

1 Like