<!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"]; let chartConfig = { type: 'bar', plot: { valueBox: { text: 'Scale-X Label: %kl <br> Node Value: %v <br> Meta: %data-daily-name', textAlign: 'left', }, tooltip: { text: 'Scale-X Value: %kv <br> Plot Text: %t <br> Node Value: %v', textAlign: 'left', padding: 10 } }, plotarea: { margin: 'dynamic' }, scaleX: { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], }, series: [{ values: [30, 34, 14, 15, 31], text: 'Weekly Gains', dataDailyName: ['Nick', 'Chris', 'Jeanette', 'Christie', 'Dave'] }] }; zingchart.render({ id: 'myChart', data: chartConfig, 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>
let chartConfig = { type: 'bar', plot: { valueBox: { text: 'Scale-X Label: %kl <br> Node Value: %v <br> Meta: %data-daily-name', textAlign: 'left', }, tooltip: { text: 'Scale-X Value: %kv <br> Plot Text: %t <br> Node Value: %v', textAlign: 'left', padding: 10 } }, plotarea: { margin: 'dynamic' }, scaleX: { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], }, series: [{ values: [30, 34, 14, 15, 31], text: 'Weekly Gains', dataDailyName: ['Nick', 'Chris', 'Jeanette', 'Christie', 'Dave'] }] }; zingchart.render({ id: 'myChart', data: chartConfig, height: 400, width: "100%" });