<!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>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let createLabel = (text, index) => {
return {
text: text,
flat: true, // no event listener
fontColor: '#FFFFFF',
fontFamily: 'arial',
fontSize: '14px',
fontWeight: 'normal',
hook: 'scale:name=scale-x;index=' + index + ';',
offsetX: '60px',
shadow: false,
textAlign: 'left',
width: '110px',
};
};
let chartConfig = {
type: 'hbar',
plot: {
tooltip: {
text: '%total Million',
},
animation: {
delay: 600,
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_NODE',
speed: 700,
},
stacked: true,
},
plotarea: {
margin: 'dynamic',
},
scaleX: {
visible: false,
},
scaleY: {
format: '%v M',
label: {
text: 'Monthly Sales (In Millions)',
},
},
labels: [
createLabel('Apple', 0),
createLabel('Microsoft', 1),
createLabel('Samsung', 2),
createLabel('Sony', 3),
createLabel('LG', 4),
createLabel('Motorola', 5),
createLabel('Nokia', 6),
createLabel('HTC', 7),
],
series: [{
values: [2, 3, 9, 2, 2, 8, 5, 5],
backgroundColor: '#E7A0A0 #FFC286',
},
{
values: [9, 3, 4, 4, 2, 7, 6, 3],
backgroundColor: '#CD80C8 #E7A0A0',
},
{
values: [8, 9, 7, 5, 5, 9, 3, 2],
backgroundColor: '#A883D7 #CD80C8',
},
{
values: [5, 8, 3, 3, 5, 1, 2, 1],
backgroundColor: '#6DAACE #A883D7',
},
{
values: [7, 4, 1, 5, 3, 2, 7, 2],
backgroundColor: '#4AC3B9 #6DAACE',
borderRadius: '0 5 5 0',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let createLabel = (text, index) => {
return {
text: text,
flat: true, // no event listener
fontColor: '#FFFFFF',
fontFamily: 'arial',
fontSize: '14px',
fontWeight: 'normal',
hook: 'scale:name=scale-x;index=' + index + ';',
offsetX: '60px',
shadow: false,
textAlign: 'left',
width: '110px',
};
};
let chartConfig = {
type: 'hbar',
plot: {
tooltip: {
text: '%total Million',
},
animation: {
delay: 600,
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_NODE',
speed: 700,
},
stacked: true,
},
plotarea: {
margin: 'dynamic',
},
scaleX: {
visible: false,
},
scaleY: {
format: '%v M',
label: {
text: 'Monthly Sales (In Millions)',
},
},
labels: [
createLabel('Apple', 0),
createLabel('Microsoft', 1),
createLabel('Samsung', 2),
createLabel('Sony', 3),
createLabel('LG', 4),
createLabel('Motorola', 5),
createLabel('Nokia', 6),
createLabel('HTC', 7),
],
series: [
{
values: [2, 3, 9, 2, 2, 8, 5, 5],
backgroundColor: '#E7A0A0 #FFC286',
},
{
values: [9, 3, 4, 4, 2, 7, 6, 3],
backgroundColor: '#CD80C8 #E7A0A0',
},
{
values: [8, 9, 7, 5, 5, 9, 3, 2],
backgroundColor: '#A883D7 #CD80C8',
},
{
values: [5, 8, 3, 3, 5, 1, 2, 1],
backgroundColor: '#6DAACE #A883D7',
},
{
values: [7, 4, 1, 5, 3, 2, 7, 2],
backgroundColor: '#4AC3B9 #6DAACE',
borderRadius: '0 5 5 0',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
