<!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',
series: [{
values: [
[1, 22],
[1.5, 34],
[2, 55],
[2.5, 71],
[3, 42],
[3.5, 39],
[4, 50],
[4.5, 70]
],
backgroundColor: '#5C6BC0',
hoverState: {
backgroundColor: '#00BCD4 #B2EBF2'
},
},
{
values: [
[5.5, 35],
[6, 42],
[6.5, 67],
[7, 89],
[7.5, 25],
[8, 34],
[8.5, 67],
[9, 85]
],
backgroundColor: '#9FA8DA',
hoverState: {
backgroundColor: '#F44336 #FFCDD2'
}
}
]
};
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',
series: [{
values: [
[1, 22],
[1.5, 34],
[2, 55],
[2.5, 71],
[3, 42],
[3.5, 39],
[4, 50],
[4.5, 70]
],
backgroundColor: '#5C6BC0',
hoverState: {
backgroundColor: '#00BCD4 #B2EBF2'
},
},
{
values: [
[5.5, 35],
[6, 42],
[6.5, 67],
[7, 89],
[7.5, 25],
[8, 34],
[8.5, 67],
[9, 85]
],
backgroundColor: '#9FA8DA',
hoverState: {
backgroundColor: '#F44336 #FFCDD2'
}
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: "100%"
});