<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <!--ZingChart Mobile--> <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-mobile.min.js"></script> <link rel="stylesheet" href="https://cdn.zingchart.com/modules/zingchart-mobile.min.css"> <!--ZingChart Mobile End--> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style> @import 'https://fonts.googleapis.com/css?family=PT+Sans'; #container { display: flex; justify-content: center; margin: 0; } #myChart { margin: 0; height: 667px; width: 250px; border-radius: 5px; } </style> </head> <body> <div id="container"> <div id='myChart'></div> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; var myConfig = { type: 'pie', backgroundColor: '#EEEEEE', globals: { fontFamily: 'PT Sans' }, options: { contextMenu: { button: { open: { lineColor: '#2196F3', } }, }, mobile: true, indicator: { title: { fontSize: 34, fontFamily: 'PT Sans' }, npv: { decimals: 1, fontSize: 18, fontFamily: 'PT Sans' }, value: { visible: false } } }, series: [{ 'values': [54], backgroundColor: '#F44336', text: 'Snapchat' }, { 'values': [27], backgroundColor: '#E91E63', text: 'Instagram' }, { 'values': [67], backgroundColor: '#673AB7', text: 'Twitter' }, { 'values': [69], backgroundColor: '#2196F3', text: 'Facebook' } ] }; zingchart.render({ id: 'myChart', data: myConfig, }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <!--ZingChart Mobile--> <script src="https://cdn.zingchart.com/modules/zingchart-mobile.min.js"></script> <link rel="stylesheet" href="https://cdn.zingchart.com/modules/zingchart-mobile.min.css"> <!--ZingChart Mobile End--> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <div id="container"> <div id='myChart'></div> </div> </body> </html>
@import 'https://fonts.googleapis.com/css?family=PT+Sans'; #container { display: flex; justify-content: center; margin: 0; } #myChart { margin: 0; height: 667px; width: 250px; border-radius: 5px; }
var myConfig = { type: 'pie', backgroundColor: '#EEEEEE', globals: { fontFamily: 'PT Sans' }, options: { contextMenu: { button: { open: { lineColor: '#2196F3', } }, }, mobile: true, indicator: { title: { fontSize: 34, fontFamily: 'PT Sans' }, npv: { decimals: 1, fontSize: 18, fontFamily: 'PT Sans' }, value: { visible: false } } }, series: [{ 'values': [54], backgroundColor: '#F44336', text: 'Snapchat' }, { 'values': [27], backgroundColor: '#E91E63', text: 'Instagram' }, { 'values': [67], backgroundColor: '#673AB7', text: 'Twitter' }, { 'values': [69], backgroundColor: '#2196F3', text: 'Facebook' } ] }; zingchart.render({ id: 'myChart', data: myConfig, });