• Edit
  • Download
    • <!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>
    @import 'https://fonts.googleapis.com/css?family=Open+Sans';

    html,
    body {
      width: 100%;
      height: 100%;
    }

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

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

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "pie",
      plot: {
        borderColor: "#2B313B",
        borderWidth: 5,
        // slice: 90,
        valueBox: {
          placement: 'out',
          text: '%t\n%npv%',
          fontFamily: "Open Sans"
        },
        tooltip: {
          fontSize: '18',
          fontFamily: "Open Sans",
          padding: "5 10",
          text: "%npv%"
        },
        animation: {
          effect: 2,
          method: 5,
          speed: 900,
          sequence: 1,
          delay: 3000
        }
      },
      source: {
        text: 'gs.statcounter.com',
        fontColor: "#8e99a9",
        fontFamily: "Open Sans"
      },
      title: {
        fontColor: "#8e99a9",
        text: 'Global Browser Usage',
        align: "left",
        offsetX: 10,
        fontFamily: "Open Sans",
        fontSize: 25
      },
      subtitle: {
        offsetX: 10,
        offsetY: 10,
        fontColor: "#8e99a9",
        fontFamily: "Open Sans",
        fontSize: "16",
        text: 'May 2016',
        align: "left"
      },
      plotarea: {
        margin: "20 0 0 0"
      },
      series: [{
          values: [11.38],
          text: "Internet Explorer",
          backgroundColor: '#50ADF5',
        },
        {
          values: [56.94],
          text: "Chrome",
          backgroundColor: '#FF7965',
          detached: true
        },
        {
          values: [14.52],
          text: 'Firefox',
          backgroundColor: '#FFCB45',
          detached: true
        },
        {
          text: 'Safari',
          values: [9.69],
          backgroundColor: '#6877e5'
        },
        {
          text: 'Other',
          values: [7.48],
          backgroundColor: '#6FB07F'
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      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'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>
    @import 'https://fonts.googleapis.com/css?family=Open+Sans';

html,
body {
  width: 100%;
  height: 100%;
}

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

.zc-ref {
  display: none;
}
    var myConfig = {
  type: "pie",
  plot: {
    borderColor: "#2B313B",
    borderWidth: 5,
    // slice: 90,
    valueBox: {
      placement: 'out',
      text: '%t\n%npv%',
      fontFamily: "Open Sans"
    },
    tooltip: {
      fontSize: '18',
      fontFamily: "Open Sans",
      padding: "5 10",
      text: "%npv%"
    },
    animation: {
      effect: 2,
      method: 5,
      speed: 900,
      sequence: 1,
      delay: 3000
    }
  },
  source: {
    text: 'gs.statcounter.com',
    fontColor: "#8e99a9",
    fontFamily: "Open Sans"
  },
  title: {
    fontColor: "#8e99a9",
    text: 'Global Browser Usage',
    align: "left",
    offsetX: 10,
    fontFamily: "Open Sans",
    fontSize: 25
  },
  subtitle: {
    offsetX: 10,
    offsetY: 10,
    fontColor: "#8e99a9",
    fontFamily: "Open Sans",
    fontSize: "16",
    text: 'May 2016',
    align: "left"
  },
  plotarea: {
    margin: "20 0 0 0"
  },
  series: [{
      values: [11.38],
      text: "Internet Explorer",
      backgroundColor: '#50ADF5',
    },
    {
      values: [56.94],
      text: "Chrome",
      backgroundColor: '#FF7965',
      detached: true
    },
    {
      values: [14.52],
      text: 'Firefox',
      backgroundColor: '#FFCB45',
      detached: true
    },
    {
      text: 'Safari',
      values: [9.69],
      backgroundColor: '#6877e5'
    },
    {
      text: 'Other',
      values: [7.48],
      backgroundColor: '#6FB07F'
    }
  ]
};

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