pieTransform options (2.8.3)

<!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>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="zc"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var palette = [
      '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
      '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
    ];

    var transforms = [
      [8, '0%', 'none', 'fixed=60%;50%'],
      [8, '40%', 'none', 'fixed=60%;50%'],
      [8, '0%', 'flat', 'fixed=60%;50%'],
      [8, '40%', 'flat', 'fixed=50%;50%'],
      [8, '0%', 'fold=20', 'fixed=50%;50%'],
      [8, '40%', 'fold=20', 'fixed=35%;50%'],
      [5, '40%', 'callout=8', 'fixed=50%;50%'],
      [5, '60%', 'flow=10', 'fixed=50%;60%'],
      [5, '60%', 'flow=-99', 'fixed=50%;40%'],
      [8, '0%', 'bite=15', 'fixed=50%;50%'],
      [8, '40%', 'bite=15', 'fixed=40%;50%'],
      [4, '0%', 'droplet', 'fixed=70%;50%']
    ];

    var cdata = {
      graphset: [

      ]
    };
    for (var r = 0; r < 3; r++) {
      for (var c = 0; c < 4; c++) {
        var idx = r * 4 + c;
        if (transforms[idx]) {
          var gdata = {
            x: c * 200,
            y: r * 200,
            width: 200,
            height: 200,
            type: 'pie',
            plotarea: {
              margin: '15 5 5 5'
            },
            title: {
              fontSize: 11,
              text: 'pieTransform:' + transforms[idx][2]
            },
            plot: {
              borderWidth: 1,
              borderColor: '#fff',
              borderAlpha: 0.2,
              slice: transforms[idx][1],
              pieTransform: transforms[idx][2],
              hoverState: {
                visible: false
              },
              tooltip: {
                text: 'Pie #%plot-index'
              },
              valueBox: {
                placement: transforms[idx][3],
                fontSize: 11,
                text: '#%plot-index'
              }
            },
            series: []
          };
          for (var i = 0; i < transforms[idx][0]; i++) {
            gdata.series.push({
              values: [1],
              backgroundColor: palette[i]
            });
          }
          cdata.graphset.push(gdata);
        }
      }
    }

    zingchart.render({
      'id': 'zc',
      'width': 800,
      'height': 600,
      'output': 'svg',
      'data': cdata
    });
  </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="zc"></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

var palette = [
  '#F6842E', '#FBAC33', '#8AC340', '#46B863', '#41BC9F', '#29C2EC',
  '#387EC3', '#5253A3', '#764199', '#962871', '#C87F8A', '#F14F42'
];

var transforms = [
  [8, '0%', 'none', 'fixed=60%;50%'],
  [8, '40%', 'none', 'fixed=60%;50%'],
  [8, '0%', 'flat', 'fixed=60%;50%'],
  [8, '40%', 'flat', 'fixed=50%;50%'],
  [8, '0%', 'fold=20', 'fixed=50%;50%'],
  [8, '40%', 'fold=20', 'fixed=35%;50%'],
  [5, '40%', 'callout=8', 'fixed=50%;50%'],
  [5, '60%', 'flow=10', 'fixed=50%;60%'],
  [5, '60%', 'flow=-99', 'fixed=50%;40%'],
  [8, '0%', 'bite=15', 'fixed=50%;50%'],
  [8, '40%', 'bite=15', 'fixed=40%;50%'],
  [4, '0%', 'droplet', 'fixed=70%;50%']
];

var cdata = {
  graphset: [

  ]
};
for (var r = 0; r < 3; r++) {
  for (var c = 0; c < 4; c++) {
    var idx = r * 4 + c;
    if (transforms[idx]) {
      var gdata = {
        x: c * 200,
        y: r * 200,
        width: 200,
        height: 200,
        type: 'pie',
        plotarea: {
          margin: '15 5 5 5'
        },
        title: {
          fontSize: 11,
          text: 'pieTransform:' + transforms[idx][2]
        },
        plot: {
          borderWidth: 1,
          borderColor: '#fff',
          borderAlpha: 0.2,
          slice: transforms[idx][1],
          pieTransform: transforms[idx][2],
          hoverState: {
            visible: false
          },
          tooltip: {
            text: 'Pie #%plot-index'
          },
          valueBox: {
            placement: transforms[idx][3],
            fontSize: 11,
            text: '#%plot-index'
          }
        },
        series: []
      };
      for (var i = 0; i < transforms[idx][0]; i++) {
        gdata.series.push({
          values: [1],
          backgroundColor: palette[i]
        });
      }
      cdata.graphset.push(gdata);
    }
  }
}

zingchart.render({
  'id': 'zc',
  'width': 800,
  'height': 600,
  'output': 'svg',
  'data': cdata
});