FAQ Ring dasbhoard with rules and valuebox center

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      layout: "1x3",
      theme: 'dark',
      "graphset": [{
          type: "pie",
          scale: {
            sizeFactor: "60%"
          },
          plot: {
            slice: "75%",
            valueBox: {
              visible: false,
              rules: [{
                rule: '%p === 0',
                visible: true,
                placement: 'center',
                fontSize: 20,
                text: '<span style="color:%color">%v%</span>'
              }]
            },
          },
          "scale-r": {
            "ref-angle": 270
          },
          series: [{
              values: [23],
              backgroundColor: "#F44336",
              rules: [{
                  rule: "%v < 25",
                  backgroundColor: "#F44336" // Red
                },
                {
                  rule: "%v > 25 && < %v 75",
                  backgroundColor: "#FFEB3B" // Yellow
                },
                {
                  rule: "%v > 75",
                  backgroundColor: "#4CAF50" // Green
                }
              ]
            },
            {
              values: [77],
              backgroundColor: "#BDBDBD" // Grey
            }
          ]
        },
        {
          type: "pie",
          plot: {
            slice: "75%",
            valueBox: {
              visible: false,
              rules: [{
                rule: '%p === 0',
                visible: true,
                placement: 'center',
                fontSize: 24,
                text: '<span style="color:%color">%v%</span>'
              }]
            }
          },
          "scale-r": {
            "ref-angle": 270
          },
          scale: {
            sizeFactor: "60%"
          },
          series: [{
              values: [45],
              backgroundColor: "#FFEB3B",
              rules: [{
                  rule: "%v < 25",
                  backgroundColor: "#F44336" // Red
                },
                {
                  rule: "%v > 25 && < %v 75",
                  backgroundColor: "#FFEB3B" // Yellow
                },
                {
                  rule: "%v > 75",
                  backgroundColor: "#4CAF50" // Green
                }
              ]
            },
            {
              values: [55],
              backgroundColor: "#BDBDBD" // Grey
            }
          ]
        },
        {
          type: "pie",
          plot: {
            slice: "75%",
            valueBox: {
              visible: false,
              rules: [{
                rule: '%p === 0',
                visible: true,
                placement: 'center',
                fontSize: 24,
                text: '<span style="color:%color">%v%</span>'
              }]
            }
          },
          scale: {
            sizeFactor: "60%"
          },
          "scale-r": {
            "ref-angle": 270
          },
          series: [{
              values: [85],
              backgroundColor: "#4CAF50",
              rules: [{
                  rule: "%v < 25",
                  backgroundColor: "#F44336" // Red
                },
                {
                  rule: "%v > 25 && < %v 75",
                  backgroundColor: "#FFEB3B" // Yellow
                },
                {
                  rule: "%v > 75",
                  backgroundColor: "#4CAF50" // Green
                }
              ]
            },
            {
              values: [15],
              backgroundColor: "#BDBDBD" // Grey
            }
          ]
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

var myConfig = {
  layout: "1x3",
  theme: 'dark',
  "graphset": [{
      type: "pie",
      scale: {
        sizeFactor: "60%"
      },
      plot: {
        slice: "75%",
        valueBox: {
          visible: false,
          rules: [{
            rule: '%p === 0',
            visible: true,
            placement: 'center',
            fontSize: 20,
            text: '<span style="color:%color">%v%</span>'
          }]
        },
      },
      "scale-r": {
        "ref-angle": 270
      },
      series: [{
          values: [23],
          backgroundColor: "#F44336",
          rules: [{
              rule: "%v < 25",
              backgroundColor: "#F44336" // Red
            },
            {
              rule: "%v > 25 && < %v 75",
              backgroundColor: "#FFEB3B" // Yellow
            },
            {
              rule: "%v > 75",
              backgroundColor: "#4CAF50" // Green
            }
          ]
        },
        {
          values: [77],
          backgroundColor: "#BDBDBD" // Grey
        }
      ]
    },
    {
      type: "pie",
      plot: {
        slice: "75%",
        valueBox: {
          visible: false,
          rules: [{
            rule: '%p === 0',
            visible: true,
            placement: 'center',
            fontSize: 24,
            text: '<span style="color:%color">%v%</span>'
          }]
        }
      },
      "scale-r": {
        "ref-angle": 270
      },
      scale: {
        sizeFactor: "60%"
      },
      series: [{
          values: [45],
          backgroundColor: "#FFEB3B",
          rules: [{
              rule: "%v < 25",
              backgroundColor: "#F44336" // Red
            },
            {
              rule: "%v > 25 && < %v 75",
              backgroundColor: "#FFEB3B" // Yellow
            },
            {
              rule: "%v > 75",
              backgroundColor: "#4CAF50" // Green
            }
          ]
        },
        {
          values: [55],
          backgroundColor: "#BDBDBD" // Grey
        }
      ]
    },
    {
      type: "pie",
      plot: {
        slice: "75%",
        valueBox: {
          visible: false,
          rules: [{
            rule: '%p === 0',
            visible: true,
            placement: 'center',
            fontSize: 24,
            text: '<span style="color:%color">%v%</span>'
          }]
        }
      },
      scale: {
        sizeFactor: "60%"
      },
      "scale-r": {
        "ref-angle": 270
      },
      series: [{
          values: [85],
          backgroundColor: "#4CAF50",
          rules: [{
              rule: "%v < 25",
              backgroundColor: "#F44336" // Red
            },
            {
              rule: "%v > 25 && < %v 75",
              backgroundColor: "#FFEB3B" // Yellow
            },
            {
              rule: "%v > 75",
              backgroundColor: "#4CAF50" // Green
            }
          ]
        },
        {
          values: [15],
          backgroundColor: "#BDBDBD" // Grey
        }
      ]
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: '100%'
});