Infographic Pie Chart

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/OA3P4THR

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 650px;
    }

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


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Javascript code to execute after DOM content

    // full ZingChart schema can be found here:
    // https://www.zingchart.com/docs/api/json-configuration/
    let chartConfig = {
      type: 'pie',
      plot: {
        borderColor: '#fff',
        borderWidth: 0,
        detach: false,
        pieTransform: 'bite=10',
        slice: '25%',
        hoverState: {
          visible: false,
        },
        animation: {
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_LINEAR',
          sequence: 'ANIMATION_NO_SEQUENCE',
          speed: 200,
        },
      },
      plotarea: {
        margin: 0,
      },
      scaleR: {
        aperture: 360,
        refAngle: 225,
      },
      resources: [{
        type: 'css',
        url: 'https://fonts.googleapis.com/css?family=Exo+2',
      }, ],
      series: [{
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '01',
          valueBox: [{
              text: '%data-no',
              borderRadius: '23px',
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              fontSize: '27px',
              height: '40px',
              placement: 'fixed=95%;5',
              shadow: false,
              width: '40px',
            },
            {
              text: ' ',
              backgroundColor: 'none',
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeZJREFUeNpi/P//P8NAAiaGAQbDzgFRQLwFiF8BMShu7wHxIiA2Q1MnCsSZYBYoDQCxJRDrQtnkYFEgPvwfP+iCqg0E4ldA7AROf1DBaUC8C4iZybCcDYgv/ScOPITSB2D6GaG54DwQGwDxDiAOBeIvJAR7PhBPIDGqsqDRcBPmi3tIrrwBDSZiQ+Dkf/JAI3IUHMOiAGRwCDSI8TngJ7mWIzugHY/it0A8E4j9gJgfiwO+kWj5H2T9sDSgAsRXgZiNiPg7AsT7oPQFID4JxIokxP9TIJaB85Bck/+fPuAwcgggF0QTgbiVDoXfO2QOC5TeApWwoYMDHmFzwGUgrqBT8X8TmQNLhPzQxKROBwcYQhMvigNAQAuIj0EdQyvwApoD/mKrDa8BsTmUphVYiWw5ejaEYU4gnk+D7AcqgNTR7WNBc6ETECfQKDesRE+AuEIgnMzyHR/4DMTS2OoSXBWMMbRWpBZIxlWZ4avlOKG11nMKLZ+ArzYlpr63pMDypYRaWYQsB1XBH2jhc2y5QAVaCBlAS8QQEqtZGHgNxLnQVE8YAF1hD20kUgOsg7aQiW7UInNsgHg1mUG+EZpWSG7SM2LpGzIDsSsUm0HrCCEk+e/Q4voUUuvoBbmlE+No53SgHQAQYABi53bBk19gcAAAAABJRU5ErkJggg==',
              backgroundRepeat: 'no-repeat',
              height: '32px',
              placement: 'fixed=10%;50%',
              shadow: false,
              width: '32px',
            },
            {
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
              align: 'left',
              backgroundColor: 'none',
              fontSize: '10px',
              placement: 'fixed=60%;50%',
              shadow: false,
            },
          ],
          backgroundColor: '#F6842E',
          gradientColors: '#F6842E #F6842E #eee #eee #F6842E #F6842E',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '02',
          valueBox: [{
              text: '%data-no',
              borderRadius: '23px',
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              fontSize: '27px',
              height: '40px',
              placement: 'fixed=95%;5',
              shadow: false,
              width: '40px',
            },
            {
              text: ' ',
              backgroundColor: 'none',
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAftJREFUeNrEl89LQkEQx/eVCIGgePIqdA2EQDACIejUKQj6D4KgP0AwOkjQv9E1BKOTUBBCV7sEHYIgiAeCYCR2MYxt1mZjWnefu7ovB764zv6Yj09nnGWcc6aoDLoChdyfhXhmWY2nBq/w+K1iAhB0o38AEDE2dQB3ngMxjaS1pC8YU/zYOyjN/Fmg8clgfVBmvIgAcObXogB+55fYgm3hAIkYz+ZxPYEPUA20gR8ggeMazjliTqZIlIn0yRtSjOFcyyVNXQAaEYFVNXwD9EApTaAk6BRrfYjjJK7tzQqgA6oaPmkaA5ZATVx7hnNVQ2W0BhgSX8Hy0ddBXRwXlPo/F0DSEmCNAKRtnkBUGr6R8YplUj2BznH8Rfx9lzog/5BeiS9vCSCCHuN4lfif8TVlAyBpb4lvxwHgU7PnhhSxqYVIvi8RX9eQhialcI+00iw/QqE28dcdAOpkX9vQlFgBFJVsuLYoxU2yfohnzAwgdKCk0wB0ohxcRN9AWXsY0ZZZAwgdOTasI9zDfAEw7GQfLII/0q53GoCuJwwi0mwZtAvax9qwjv570AvoAnSpFCFToxKYmtJMVOWa00QhGpiaUhl0K8Y2bXuiIGkuJuI7zDrkvK2yePafi4npaiaaiz1QzkPgHJ4VTruaLfxyql7POx6DdkzX828BBgC1EO0f4E9h/QAAAABJRU5ErkJggg==',
              backgroundRepeat: 'no-repeat',
              height: '32px',
              placement: 'fixed=10%;50%',
              shadow: false,
              width: '32px',
            },
            {
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
              align: 'left',
              backgroundColor: 'none',
              fontSize: '10px',
              placement: 'fixed=60%;50%',
              shadow: false,
            },
          ],
          backgroundColor: '#FBAC33',
          gradientColors: '#FBAC33 #FBAC33 #eee #eee #FBAC33 #FBAC33',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '03',
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#8AC340',
          gradientColors: '#8AC340 #8AC340 #eee #eee #8AC340 #8AC340',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '04',
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVdJREFUeNpi/P//P8NAAiaGAQaUOuA/FNPFASCLPiDxE6D0Asq8AEwDRGIYgPEfQvlySGJCULG3xJpLbAisgNIRSGJnobQxkthGKO1P7SjYAcRfgNgGiJmhYqFAvBiIVwNxLFRsLlRdOJI6qkWBLjR49yKJiULFXhFQR3EUgAAnlOZBEvsLpZF9+wtKS9MiEX5DE0uDis9EEnsOFZMgxlxGCktCmGZGcg1gobAgYqS0JGTB4ht6AcZhUReMOmDUAVR1wEc62vsFmwPu09EBd7A5YBMdHQC3C7kuEALi21CaluAdEKtCaZQQeAdt8fyloeUgs6NhluOqjs2A+NJ/6oNLULNR7MNVT7MBcREQHwDizxRY+hlqRhHUTAZiHYCOt2BpARPTfNtOrQYJqD/AT0acg5pn7NQoCY+TmegOUqtNKA3Eq4H4J5Fx/xOqXprWbcKhXxkBBBgAsb4Y2yiT2McAAAAASUVORK5CYII=',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#46B863',
          gradientColors: '#46B863 #46B863 #eee #eee #46B863 #46B863',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '05',
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#41BC9F',
          gradientColors: '#41BC9F #41BC9F #eee #eee #41BC9F #41BC9F',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '06',
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#29C2EC',
          gradientColors: '#29C2EC #29C2EC #eee #eee #29C2EC #29C2EC',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '07',
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc9JREFUeNrslzFLA0EQhS8GBMEqkCoQCAQCQuAgVSSVNoIiBAJW/gDBKq0gCLZWVlZCbAJ2YmEZSJVKSKVYRQKCEDiIWCnrG5jAOuxebk/JFjrwNbc3M293Z+duM0qpwKctBZ7tTwjogJJtMLOAGhiBLNgEj762oAD6IPRZA3nQA/VvT2kLmK6Kt7b2riQLjkGk5tsUbMx89QBJ7Mwi4FK52TvY1gUEDs6HIvm+SmdjKWCa0PED1Nmn4uCnWzSLoQtoJ9zDCciBZXCfIjn512QNxLEKWuCVAxzw83ND8BdQFv76pChGqI8nETCjCDpcsLuW2e0Z/CJN3JocdxGgC5kYkl9b3icBI1Ayjbsmp9n3DclpafMWHzolBVtMVwEnlqVvzVmx4DcENPgISuvyeNniR8t/y8WcWkCeA0kb8ZGscF0ULQLIBqZtSpKczuyDpSFRT18BQ37WM+y3LvxJipSNaOLQUE7Z78KxEdFxrJoEuCQfcCfMOfrp3bAhBUQJnaei4GopRYzTrAB9RpuWOnERQZPYkgKOLJWuV3wtplhDS7Ga4lR/0opd0Sc1lKdgkf+Ed2AdPPv4Kb0CO+DNx72gCW7Ap6+Lyf/dMNa+BBgANQljAQT+NQgAAAAASUVORK5CYII=',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#387EC3',
          gradientColors: '#387EC3 #387EC3 #eee #eee #387EC3 #387EC3',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '08',
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYlJREFUeNrsVsFqwkAQNVoCAUvBa8E/EPyJQn6i10JBEDwJvXrth/TuBwR6EixCerF3Cz1G9JJeprMwgWHJZmdiQhD64LFhM/N2MrthXwAAvS7Rr5ETImfIBJkTE5oL1WqmAwreI3fgxo5ixJqaxUNkCn6kFCvS1WzBE3IiiJtQrAjBNR1Cc9hAyLyNDmhbFUiCbpoW1EJTQCsd6Pc6Rudb4OrAilq+srZAwyot719wQg6RZ+TthWegTMtbAJQI1S0AqrbRtQVH6/Yz+FUsfqZxWDInKuCHPY9p/FAU8GnlGnxrCvhizzGNb4oCitgHh6bXDzxa1+ugxnU8sOKfNX7gDpmx5BkzJKln8cKQzNl8RpoqQ7JkAjkyZsbEiCfs/TvNFUYkppwCyzqOyIhtrS98RUYVORHFcGyrciQe8GAJ7pEL5JTFTWlub8UefB5R4tvGyA3osaHcRkypaeGLdTBdyCg2atoVG47oj1iXLLymdyON5iWmFJq4rjs3JFfliKCNLfn3hH8CDABg4XbpmFgBpAAAAABJRU5ErkJggg==',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#5253A3',
          gradientColors: '#5253A3 #5253A3 #eee #eee #5253A3 #5253A3',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: '09',
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNpi/P//PwOVgToQpwGxPRAbQMUuAPFBIJ4FxDdRVIMcQEVcBMTf/uMG36Bq4HqoZTEbEG//TzzYDtVDNQdM+E866KWWA3SB+A+a4RuB2AmIRaHYCSqGDEB6tGjh+0V41M5HDwVGKuSCG9CUDwOSQPwCh1oJIH6OxL9GDQf8BGI2JD4jAfXIFn6khgPQDSDFAQxMDAMMRh0w6gBaOECUFDkmaB5uAeIn0CxCKkYHr6BmtaCVDyDwGppNERhYDrT/px1oJ1SUgwqiVwSCjRIA8rEYoTRAjOVPgTgCiGWgOAIqRkl6gLeICIEbQCyEJfhAYleJ0I83CohxQAgeAwIpdQDjf8K1kQCo1sIhxwPEnwnoZxzyBZETHjlXil1ARBxepWUiJCYNwLKhDJoYqLSTJkIv3jRArAOwGUSuPrIToTQONt1qwznQVq0ElE0VMCjqgrk0zOYLiMmGbNB+2nMqVsPPoWayEcqGAAEGAHnNnEOZpvtRAAAAAElFTkSuQmCC',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#764199',
          gradientColors: '#764199 #764199 #eee #eee #764199 #764199',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: 10,
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXVJREFUeNpi/P//P8NAAiaGAQa0doA9EG8E4idQvBEqhgCgKKARrviPG1TA1NHKcnsg/oPHASA5G1o64PB/wuAASC0jjXLBByDmJ6DmIxAL0CIRugIxJxHqmEEEC5UsVQTiBCBOBmJpIvWcpTQX8ANxGpHxTdVE6AHES4H4Gw7D3wLxZCDuJScbgrLPRiB+AsUboWLqQNwOxM/x+AikNhCI2bCY9xyKYeYxYHNABRlBeQmIi4BYlNyoJLbgQAavoMGrS40yg5SC4wMQ+wExMzULLVhBRHTBMZC1ISctq+PLRKhlA+Ib0AKHmWouICMRgsA9aCHERq1ESCgbroMmQnQAKitygJiTGg4gVHCAit5qHA55hcMhuAo2BkoaJDCHvMXhEFDBxEOPFhEP1LJXOOoDurWIOKHB/4TEYvwAtZtkbNCccY9IB3ygVZMMVEa8JaJk/QLEvLRokv0lsmA7S8t+wYA3ywe8Y0J0i4hW/YKh0zsGCDAAVxkSh4Kf2goAAAAASUVORK5CYII=',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#962871',
          gradientColors: '#962871 #962871 #eee #eee #962871 #962871',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: 11,
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARJJREFUeNpi/P//P8NAAiaGAQakOIANiIuAeDIQ62KR14XKFUHVEgdAUUAk7vqPAB+AWAhJTggqBgPtxJpLrOUqQPzzPyowQ5I3Q5P7CdVDNQdsQbPgNhAzI8kzQ8WQwRZqOcD7PybwpkAdSQ5gI9Fn2EKKjRIHFJEYtyC5P2h6ioh1gDQQb8RiADXBH6gd0tgcsOs//cABmL2MSEXxZyDmoVMB+AuI2dFLwuN0LIGPYysJ5YB4Ox2CfzvULowoGDSV0StQwNAIvyLGAR9p6OGPow4g1wHOUEypOIbZLEQ6YB8OH5EqPpoGRh0w+BxAbC7wwGEgqeIYZmOrjMyA+CSNQsAciE+NpgFCUTCyescAAQYAyd4rc65oVvYAAAAASUVORK5CYII=',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#C87F8A',
          gradientColors: '#C87F8A #C87F8A #eee #eee #C87F8A #C87F8A',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
        {
          values: [1],
          tooltipText: 'Lorem ipsum',
          dataNo: 12,
          valueBox: [{
              width: '40px',
              height: '40px',
              placement: 'fixed=95%;5',
              borderRadius: '23px',
              fontSize: '27px',
              shadow: false,
              color: '#000',
              decimals: 0,
              fontFamily: '"Exo2"',
              text: '%data-no',
            },
            {
              width: '32px',
              height: '32px',
              placement: 'fixed=10%;50%',
              backgroundColor: 'none',
              shadow: false,
              backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrsl19EQ1Ecx7eaMXqNGGNExBLR0+g1xp562lOvJcaInmLpdcSIsV6iRJQoS9F7RE9LRCylFIlYRjl9D9/Dr+u62+4fe2g/Pu45596z872/37m/81tYKRXqpQ2Eemx9AX4LqIElEO94ht6EPmLsG1TASLs5XhdMgiPRz4EDCtD2CWaDEBADq6DJhaz3p8Gt8EjeTwEZcKf+mrl3BUpgjCJLIiRZrwKMu+3Muge0ZwocW+bYB4i7EWB1t5OAGVAGLY7XQBTssV/pVoCdu50EGCbBI+/pMIxSlA5FwknAPHhV3ZuZ3wDbYBikxKLjYIfPrjgJaCp3Zt0Dz3zTsvBCju0zJwHKo4A0uORYlX1tdW5ixdAEJiBE1yuGIyq+ANNuyeeDOIx+RDvK66BoB3oYJcAm2xcgxfaDOKDe5ISI5Qe+QMyDgAavL2AN5Nk/B1Ns3zh5YBG8exDwBHbBBBgCCwzJFsgIz3R8HOv8fe8iEaVEItrgF2ByQtJNKi52mIrTXNC3VCzR6fTYxWFUELVB3I/j2C4s5t61OI71m6+L4iTrd0FSbFOQ1IMqSOzCYvpzYN9SkmWDrAmditKqXcytRHzOhKfgBBwyJ7S1cP+/4b8X8CvAALFdoXAXsoG7AAAAAElFTkSuQmCC',
              backgroundRepeat: 'no-repeat',
              text: ' ',
            },
            {
              align: 'left',
              placement: 'fixed=60%;50%',
              backgroundColor: 'none',
              shadow: false,
              fontSize: '10px',
              text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
            },
          ],
          backgroundColor: '#F14F42',
          gradientColors: '#F14F42 #F14F42 #eee #eee #F14F42 #F14F42',
          gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
        },
      ],
    };

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

</html>

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>

  </body>
</html>

// Javascript code to execute after DOM content

// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
  type: 'pie',
  plot: {
    borderColor: '#fff',
    borderWidth: 0,
    detach: false,
    pieTransform: 'bite=10',
    slice: '25%',
    hoverState: {
      visible: false,
    },
    animation: {
      effect: 'ANIMATION_EXPAND_VERTICAL',
      method: 'ANIMATION_LINEAR',
      sequence: 'ANIMATION_NO_SEQUENCE',
      speed: 200,
    },
  },
  plotarea: {
    margin: 0,
  },
  scaleR: {
    aperture: 360,
    refAngle: 225,
  },
  resources: [
    {
      type: 'css',
      url: 'https://fonts.googleapis.com/css?family=Exo+2',
    },
  ],
  series: [
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '01',
      valueBox: [
        {
          text: '%data-no',
          borderRadius: '23px',
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          fontSize: '27px',
          height: '40px',
          placement: 'fixed=95%;5',
          shadow: false,
          width: '40px',
        },
        {
          text: ' ',
          backgroundColor: 'none',
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeZJREFUeNpi/P//P8NAAiaGAQbDzgFRQLwFiF8BMShu7wHxIiA2Q1MnCsSZYBYoDQCxJRDrQtnkYFEgPvwfP+iCqg0E4ldA7AROf1DBaUC8C4iZybCcDYgv/ScOPITSB2D6GaG54DwQGwDxDiAOBeIvJAR7PhBPIDGqsqDRcBPmi3tIrrwBDSZiQ+Dkf/JAI3IUHMOiAGRwCDSI8TngJ7mWIzugHY/it0A8E4j9gJgfiwO+kWj5H2T9sDSgAsRXgZiNiPg7AsT7oPQFID4JxIokxP9TIJaB85Bck/+fPuAwcgggF0QTgbiVDoXfO2QOC5TeApWwoYMDHmFzwGUgrqBT8X8TmQNLhPzQxKROBwcYQhMvigNAQAuIj0EdQyvwApoD/mKrDa8BsTmUphVYiWw5ejaEYU4gnk+D7AcqgNTR7WNBc6ETECfQKDesRE+AuEIgnMzyHR/4DMTS2OoSXBWMMbRWpBZIxlWZ4avlOKG11nMKLZ+ArzYlpr63pMDypYRaWYQsB1XBH2jhc2y5QAVaCBlAS8QQEqtZGHgNxLnQVE8YAF1hD20kUgOsg7aQiW7UInNsgHg1mUG+EZpWSG7SM2LpGzIDsSsUm0HrCCEk+e/Q4voUUuvoBbmlE+No53SgHQAQYABi53bBk19gcAAAAABJRU5ErkJggg==',
          backgroundRepeat: 'no-repeat',
          height: '32px',
          placement: 'fixed=10%;50%',
          shadow: false,
          width: '32px',
        },
        {
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
          align: 'left',
          backgroundColor: 'none',
          fontSize: '10px',
          placement: 'fixed=60%;50%',
          shadow: false,
        },
      ],
      backgroundColor: '#F6842E',
      gradientColors: '#F6842E #F6842E #eee #eee #F6842E #F6842E',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '02',
      valueBox: [
        {
          text: '%data-no',
          borderRadius: '23px',
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          fontSize: '27px',
          height: '40px',
          placement: 'fixed=95%;5',
          shadow: false,
          width: '40px',
        },
        {
          text: ' ',
          backgroundColor: 'none',
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAftJREFUeNrEl89LQkEQx/eVCIGgePIqdA2EQDACIejUKQj6D4KgP0AwOkjQv9E1BKOTUBBCV7sEHYIgiAeCYCR2MYxt1mZjWnefu7ovB764zv6Yj09nnGWcc6aoDLoChdyfhXhmWY2nBq/w+K1iAhB0o38AEDE2dQB3ngMxjaS1pC8YU/zYOyjN/Fmg8clgfVBmvIgAcObXogB+55fYgm3hAIkYz+ZxPYEPUA20gR8ggeMazjliTqZIlIn0yRtSjOFcyyVNXQAaEYFVNXwD9EApTaAk6BRrfYjjJK7tzQqgA6oaPmkaA5ZATVx7hnNVQ2W0BhgSX8Hy0ddBXRwXlPo/F0DSEmCNAKRtnkBUGr6R8YplUj2BznH8Rfx9lzog/5BeiS9vCSCCHuN4lfif8TVlAyBpb4lvxwHgU7PnhhSxqYVIvi8RX9eQhialcI+00iw/QqE28dcdAOpkX9vQlFgBFJVsuLYoxU2yfohnzAwgdKCk0wB0ohxcRN9AWXsY0ZZZAwgdOTasI9zDfAEw7GQfLII/0q53GoCuJwwi0mwZtAvax9qwjv570AvoAnSpFCFToxKYmtJMVOWa00QhGpiaUhl0K8Y2bXuiIGkuJuI7zDrkvK2yePafi4npaiaaiz1QzkPgHJ4VTruaLfxyql7POx6DdkzX828BBgC1EO0f4E9h/QAAAABJRU5ErkJggg==',
          backgroundRepeat: 'no-repeat',
          height: '32px',
          placement: 'fixed=10%;50%',
          shadow: false,
          width: '32px',
        },
        {
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
          align: 'left',
          backgroundColor: 'none',
          fontSize: '10px',
          placement: 'fixed=60%;50%',
          shadow: false,
        },
      ],
      backgroundColor: '#FBAC33',
      gradientColors: '#FBAC33 #FBAC33 #eee #eee #FBAC33 #FBAC33',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '03',
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcNJREFUeNrsl79KA0EQxnMqASurVAFBEAKBVIKFCKkUu5R5AMHKB0hho28hWMuBIFxhlUaxEAQrq0AgECJCQiQBQQTD+S18gWXd29vdHLnGgR/h5l8muzN7myCO40KesuIZVwcRGJCIOncRK+BIK06Wlms+k7EMQjAgx6AOfgwFCNs+fedxIXM5FVABYyW5SPwYp8s9fWURuaouBdxoEhfBxKKACX1VudV9V1ITHizQ2KugaJvTZQp2wKuF3wuoLTqGbY2uCc7AzJBvRp+mZU6nJvwGNYsxrNFXbcKK7xi+E3mcxDhGki2iLi3uD0HeR/Ga8rwJjthwW6AM9sA62CUlsA02pGYTzTkFXTACz+QLXIEOn9vUJfbAWLOvVcv5150HVU0vGM+BjmaVxCr0PFa3x1hZRmlj2NUkEtvS9yigz1hZ3nwLyGoF+mkF9DLegtxXwLmApCb07QHnLfgAFxltgVrAA3iyfRecK/MrjtNTMLSY/yF9Q0l3yTuC07tAl7jEi0WSCNuJptCCz7tAZwgMtrndFJfZtTz3/wX/BSylgAa4A5/8bFjmdIrzvRGZpmApW3DIXzfliXdNnbPkfif8FWAAK308Gia1hSIAAAAASUVORK5CYII=',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#8AC340',
      gradientColors: '#8AC340 #8AC340 #eee #eee #8AC340 #8AC340',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '04',
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVdJREFUeNpi/P//P8NAAiaGAQaUOuA/FNPFASCLPiDxE6D0Asq8AEwDRGIYgPEfQvlySGJCULG3xJpLbAisgNIRSGJnobQxkthGKO1P7SjYAcRfgNgGiJmhYqFAvBiIVwNxLFRsLlRdOJI6qkWBLjR49yKJiULFXhFQR3EUgAAnlOZBEvsLpZF9+wtKS9MiEX5DE0uDis9EEnsOFZMgxlxGCktCmGZGcg1gobAgYqS0JGTB4ht6AcZhUReMOmDUAVR1wEc62vsFmwPu09EBd7A5YBMdHQC3C7kuEALi21CaluAdEKtCaZQQeAdt8fyloeUgs6NhluOqjs2A+NJ/6oNLULNR7MNVT7MBcREQHwDizxRY+hlqRhHUTAZiHYCOt2BpARPTfNtOrQYJqD/AT0acg5pn7NQoCY+TmegOUqtNKA3Eq4H4J5Fx/xOqXprWbcKhXxkBBBgAsb4Y2yiT2McAAAAASUVORK5CYII=',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#46B863',
      gradientColors: '#46B863 #46B863 #eee #eee #46B863 #46B863',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '05',
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVpJREFUeNpi/P//PwMZAJcmRlINYoLSdUiG/icC43MYMXr/Q+1kYISGwH8kH5AVJCQAZDsYYSHQxEB/0IQcAgMGWEhMZNQIfqyJcNCFAKnZiuwQG/QhQPMUOuAhQI4DBIDYFohnUcUFoHIAC0YGf4C4F4iNoXxkdeH/SQMYdhFyAMhyezRxdLUrcBmOxTwMOUJR0AHEBwmomU5ERYQ7n+MoimGCSkB8H00cvWzgAeLP5JaEhBzADsS/iMyWjERkZ5KLYmksliBjJSLbAmRnwygK5SnOht+A2BKHGjOoPK4UTpVsCMuKXUBsAJUzgPL//CcdYNhFKBGO3PYA40A6gB6NRMZBHQWM9HQAKSHgjVSybcEivwVJ3pvSgggdswHxbWhe/gnEKljUqEDl/kPVshFjNrEOqEYqTFrwqGtBUldNLQeQ4jNiQopkB2xB8pU3Eeq9kdRvIaQeIMAADRicX6Vy96oAAAAASUVORK5CYII=',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#41BC9F',
      gradientColors: '#41BC9F #41BC9F #eee #eee #41BC9F #41BC9F',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '06',
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAY1JREFUeNpi/P//P8NAAiYktj0QnwTi/zTGJ6F2gQEjUgg8B2IJOnn8BRBLojuA3nHBiB4FA54GRh2AC2wC4gU0cwEoEUIxLmADxPz/8QMnJHPwYSckPWAxFgJZ5QiU/g7EHUCsCMQ2QCyNppaNSP+yERsCk4GYB4cvOIH453/KAc4QOA7EuVA2DxDnA7EcEL8G4rNALEqCjwkCbA5Yj8QuBeK6gcwFO6A+JwScoSUbIexMjANCgJgZKTpAZbY/NDv+JTpxUZgItwOxOpYEKAHEq/9TB4DNJFQOHADiBLQcwQzEJ+nlABh4ixYiRdRyALF1gRAQGyDxv1MrEWLLhmuA+Bq0xOMH4ptAfAEqDgMetEyENgTK8zRqJkJsIeANdSnI50+hYqBsGQvEUUDsStVmERFNMlsgvgzEHwaqSaaOlgApKRWJSoToYA6JPmMjRW60VYzugINQTC8+RhTAEslepARFKz4jeiJcBsT7oOx90LxPK/5ibCEASqG/oGwnJI204MPtYhzo7jlAgAEAS1s0yEiExxYAAAAASUVORK5CYII=',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#29C2EC',
      gradientColors: '#29C2EC #29C2EC #eee #eee #29C2EC #29C2EC',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '07',
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc9JREFUeNrslzFLA0EQhS8GBMEqkCoQCAQCQuAgVSSVNoIiBAJW/gDBKq0gCLZWVlZCbAJ2YmEZSJVKSKVYRQKCEDiIWCnrG5jAOuxebk/JFjrwNbc3M293Z+duM0qpwKctBZ7tTwjogJJtMLOAGhiBLNgEj762oAD6IPRZA3nQA/VvT2kLmK6Kt7b2riQLjkGk5tsUbMx89QBJ7Mwi4FK52TvY1gUEDs6HIvm+SmdjKWCa0PED1Nmn4uCnWzSLoQtoJ9zDCciBZXCfIjn512QNxLEKWuCVAxzw83ND8BdQFv76pChGqI8nETCjCDpcsLuW2e0Z/CJN3JocdxGgC5kYkl9b3icBI1Ayjbsmp9n3DclpafMWHzolBVtMVwEnlqVvzVmx4DcENPgISuvyeNniR8t/y8WcWkCeA0kb8ZGscF0ULQLIBqZtSpKczuyDpSFRT18BQ37WM+y3LvxJipSNaOLQUE7Z78KxEdFxrJoEuCQfcCfMOfrp3bAhBUQJnaei4GopRYzTrAB9RpuWOnERQZPYkgKOLJWuV3wtplhDS7Ga4lR/0opd0Sc1lKdgkf+Ed2AdPPv4Kb0CO+DNx72gCW7Ap6+Lyf/dMNa+BBgANQljAQT+NQgAAAAASUVORK5CYII=',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#387EC3',
      gradientColors: '#387EC3 #387EC3 #eee #eee #387EC3 #387EC3',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '08',
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYlJREFUeNrsVsFqwkAQNVoCAUvBa8E/EPyJQn6i10JBEDwJvXrth/TuBwR6EixCerF3Cz1G9JJeprMwgWHJZmdiQhD64LFhM/N2MrthXwAAvS7Rr5ETImfIBJkTE5oL1WqmAwreI3fgxo5ixJqaxUNkCn6kFCvS1WzBE3IiiJtQrAjBNR1Cc9hAyLyNDmhbFUiCbpoW1EJTQCsd6Pc6Rudb4OrAilq+srZAwyot719wQg6RZ+TthWegTMtbAJQI1S0AqrbRtQVH6/Yz+FUsfqZxWDInKuCHPY9p/FAU8GnlGnxrCvhizzGNb4oCitgHh6bXDzxa1+ugxnU8sOKfNX7gDpmx5BkzJKln8cKQzNl8RpoqQ7JkAjkyZsbEiCfs/TvNFUYkppwCyzqOyIhtrS98RUYVORHFcGyrciQe8GAJ7pEL5JTFTWlub8UefB5R4tvGyA3osaHcRkypaeGLdTBdyCg2atoVG47oj1iXLLymdyON5iWmFJq4rjs3JFfliKCNLfn3hH8CDABg4XbpmFgBpAAAAABJRU5ErkJggg==',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#5253A3',
      gradientColors: '#5253A3 #5253A3 #eee #eee #5253A3 #5253A3',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: '09',
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXBJREFUeNpi/P//PwOVgToQpwGxPRAbQMUuAPFBIJ4FxDdRVIMcQEVcBMTf/uMG36Bq4HqoZTEbEG//TzzYDtVDNQdM+E866KWWA3SB+A+a4RuB2AmIRaHYCSqGDEB6tGjh+0V41M5HDwVGKuSCG9CUDwOSQPwCh1oJIH6OxL9GDQf8BGI2JD4jAfXIFn6khgPQDSDFAQxMDAMMRh0w6gBaOECUFDkmaB5uAeIn0CxCKkYHr6BmtaCVDyDwGppNERhYDrT/px1oJ1SUgwqiVwSCjRIA8rEYoTRAjOVPgTgCiGWgOAIqRkl6gLeICIEbQCyEJfhAYleJ0I83CohxQAgeAwIpdQDjf8K1kQCo1sIhxwPEnwnoZxzyBZETHjlXil1ARBxepWUiJCYNwLKhDJoYqLSTJkIv3jRArAOwGUSuPrIToTQONt1qwznQVq0ElE0VMCjqgrk0zOYLiMmGbNB+2nMqVsPPoWayEcqGAAEGAHnNnEOZpvtRAAAAAElFTkSuQmCC',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#764199',
      gradientColors: '#764199 #764199 #eee #eee #764199 #764199',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: 10,
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXVJREFUeNpi/P//P8NAAiaGAQa0doA9EG8E4idQvBEqhgCgKKARrviPG1TA1NHKcnsg/oPHASA5G1o64PB/wuAASC0jjXLBByDmJ6DmIxAL0CIRugIxJxHqmEEEC5UsVQTiBCBOBmJpIvWcpTQX8ANxGpHxTdVE6AHES4H4Gw7D3wLxZCDuJScbgrLPRiB+AsUboWLqQNwOxM/x+AikNhCI2bCY9xyKYeYxYHNABRlBeQmIi4BYlNyoJLbgQAavoMGrS40yg5SC4wMQ+wExMzULLVhBRHTBMZC1ISctq+PLRKhlA+Ib0AKHmWouICMRgsA9aCHERq1ESCgbroMmQnQAKitygJiTGg4gVHCAit5qHA55hcMhuAo2BkoaJDCHvMXhEFDBxEOPFhEP1LJXOOoDurWIOKHB/4TEYvwAtZtkbNCccY9IB3ygVZMMVEa8JaJk/QLEvLRokv0lsmA7S8t+wYA3ywe8Y0J0i4hW/YKh0zsGCDAAVxkSh4Kf2goAAAAASUVORK5CYII=',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#962871',
      gradientColors: '#962871 #962871 #eee #eee #962871 #962871',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: 11,
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARJJREFUeNpi/P//P8NAAiaGAQakOIANiIuAeDIQ62KR14XKFUHVEgdAUUAk7vqPAB+AWAhJTggqBgPtxJpLrOUqQPzzPyowQ5I3Q5P7CdVDNQdsQbPgNhAzI8kzQ8WQwRZqOcD7PybwpkAdSQ5gI9Fn2EKKjRIHFJEYtyC5P2h6ioh1gDQQb8RiADXBH6gd0tgcsOs//cABmL2MSEXxZyDmoVMB+AuI2dFLwuN0LIGPYysJ5YB4Ox2CfzvULowoGDSV0StQwNAIvyLGAR9p6OGPow4g1wHOUEypOIbZLEQ6YB8OH5EqPpoGRh0w+BxAbC7wwGEgqeIYZmOrjMyA+CSNQsAciE+NpgFCUTCyescAAQYAyd4rc65oVvYAAAAASUVORK5CYII=',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#C87F8A',
      gradientColors: '#C87F8A #C87F8A #eee #eee #C87F8A #C87F8A',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
    {
      values: [1],
      tooltipText: 'Lorem ipsum',
      dataNo: 12,
      valueBox: [
        {
          width: '40px',
          height: '40px',
          placement: 'fixed=95%;5',
          borderRadius: '23px',
          fontSize: '27px',
          shadow: false,
          color: '#000',
          decimals: 0,
          fontFamily: '"Exo2"',
          text: '%data-no',
        },
        {
          width: '32px',
          height: '32px',
          placement: 'fixed=10%;50%',
          backgroundColor: 'none',
          shadow: false,
          backgroundImage:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrsl19EQ1Ecx7eaMXqNGGNExBLR0+g1xp562lOvJcaInmLpdcSIsV6iRJQoS9F7RE9LRCylFIlYRjl9D9/Dr+u62+4fe2g/Pu45596z872/37m/81tYKRXqpQ2Eemx9AX4LqIElEO94ht6EPmLsG1TASLs5XhdMgiPRz4EDCtD2CWaDEBADq6DJhaz3p8Gt8EjeTwEZcKf+mrl3BUpgjCJLIiRZrwKMu+3Muge0ZwocW+bYB4i7EWB1t5OAGVAGLY7XQBTssV/pVoCdu50EGCbBI+/pMIxSlA5FwknAPHhV3ZuZ3wDbYBikxKLjYIfPrjgJaCp3Zt0Dz3zTsvBCju0zJwHKo4A0uORYlX1tdW5ixdAEJiBE1yuGIyq+ANNuyeeDOIx+RDvK66BoB3oYJcAm2xcgxfaDOKDe5ISI5Qe+QMyDgAavL2AN5Nk/B1Ns3zh5YBG8exDwBHbBBBgCCwzJFsgIz3R8HOv8fe8iEaVEItrgF2ByQtJNKi52mIrTXNC3VCzR6fTYxWFUELVB3I/j2C4s5t61OI71m6+L4iTrd0FSbFOQ1IMqSOzCYvpzYN9SkmWDrAmditKqXcytRHzOhKfgBBwyJ7S1cP+/4b8X8CvAALFdoXAXsoG7AAAAAElFTkSuQmCC',
          backgroundRepeat: 'no-repeat',
          text: ' ',
        },
        {
          align: 'left',
          placement: 'fixed=60%;50%',
          backgroundColor: 'none',
          shadow: false,
          fontSize: '10px',
          text: 'Lorem ipsum<br>dolor sit amet,<br>consectetur<br>adipiscing elit.',
        },
      ],
      backgroundColor: '#F14F42',
      gradientColors: '#F14F42 #F14F42 #eee #eee #F14F42 #F14F42',
      gradientStops: '0.001 0.4 0.41 0.45 0.46 0.99',
    },
  ],
};

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

.zc-body { background:#fff; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 650px;
}

.zc-ref {
  display: none;
}

Average Temperature Heat Map Chart 67/281 Germany Map Dashboard

Infographic Pie Chart

Related Documentation: