<!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-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.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"];
let chartConfig = {
type: 'venn',
backgroundColor: '#F4F4F4',
title: {
text: 'Social Networks',
backgroundColor: '#424242',
fontColor: '#fff',
fontSize: '18px',
fontWeight: 'none',
height: '40px',
y: 0
},
plotarea: {
margin: '25px 0 0 0'
},
series: [{
text: 'Stalking',
values: [100],
tooltip: {
text: '<i>Stalk</i><br>1. pursue or approach stealthily.<br>2. stride somewhere in a proud, stiff, or angry manner.',
borderRadius: '3px',
shadow: false
},
valueBox: {
text: 'Stalking',
bold: true,
fontColor: '#000000',
fontFamily: 'arial',
fontSize: '18px',
joined: {
text: 'Tumblr',
fontSize: '14px',
offsetY: '40px'
}
},
alpha: 0.75,
backgroundColor: '#673ab7',
borderColor: '#000000',
borderWidth: '2px',
join: [33],
shadow: false
},
{
text: 'Distraction',
values: [100],
tooltip: {
text: '<i>Distraction</i><br>1. a thing that prevents someone from giving full attention to something else.<br>2. extreme agitation of the mind or emotions.',
borderRadius: '3px',
shadow: false
},
valueBox: {
text: 'Distraction',
bold: true,
fontColor: '#000000',
fontFamily: 'arial',
fontSize: '18px',
joined: {
text: 'Facebook',
fontSize: '14px',
offsetX: '30px',
offsetY: '-20px'
},
offsetX: '5%'
},
alpha: 0.75,
backgroundColor: '#009688',
borderColor: '#000000',
borderWidth: '2px',
join: [33],
shadow: false
},
{
text: 'Vanity',
values: [100],
tooltip: {
text: '<i>Vanity</i><br>1. excessive pride in or admiration of one\'s own appearance or achievements.<br>2. the quality of being worthless or futile.',
borderRadius: '3px',
shadow: false
},
valueBox: {
text: 'Vanity',
bold: true,
fontColor: '#000000',
fontFamily: 'arial',
fontSize: '18px',
joined: {
text: 'LinkedIn',
fontSize: '14px',
offsetX: '-30px',
offsetY: '-20px'
},
shared: {
text: 'Twitter',
fontSize: '14px'
}
},
alpha: 0.75,
backgroundColor: '#03a9f4',
borderColor: '#000000',
borderWidth: '2px',
join: [33],
shadow: false
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'venn',
backgroundColor: '#F4F4F4',
title: {
text: 'Social Networks',
backgroundColor: '#424242',
fontColor: '#fff',
fontSize: '18px',
fontWeight: 'none',
height: '40px',
y: 0
},
plotarea: {
margin: '25px 0 0 0'
},
series: [
{
text: 'Stalking',
values: [100],
tooltip: {
text: '<i>Stalk</i><br>1. pursue or approach stealthily.<br>2. stride somewhere in a proud, stiff, or angry manner.',
borderRadius: '3px',
shadow: false
},
valueBox: {
text: 'Stalking',
bold: true,
fontColor: '#000000',
fontFamily: 'arial',
fontSize: '18px',
joined: {
text: 'Tumblr',
fontSize: '14px',
offsetY: '40px'
}
},
alpha: 0.75,
backgroundColor: '#673ab7',
borderColor: '#000000',
borderWidth: '2px',
join: [33],
shadow: false
},
{
text: 'Distraction',
values: [100],
tooltip: {
text: '<i>Distraction</i><br>1. a thing that prevents someone from giving full attention to something else.<br>2. extreme agitation of the mind or emotions.',
borderRadius: '3px',
shadow: false
},
valueBox: {
text: 'Distraction',
bold: true,
fontColor: '#000000',
fontFamily: 'arial',
fontSize: '18px',
joined: {
text: 'Facebook',
fontSize: '14px',
offsetX: '30px',
offsetY: '-20px'
},
offsetX: '5%'
},
alpha: 0.75,
backgroundColor: '#009688',
borderColor: '#000000',
borderWidth: '2px',
join: [33],
shadow: false
},
{
text: 'Vanity',
values: [100],
tooltip: {
text: '<i>Vanity</i><br>1. excessive pride in or admiration of one\'s own appearance or achievements.<br>2. the quality of being worthless or futile.',
borderRadius: '3px',
shadow: false
},
valueBox: {
text: 'Vanity',
bold: true,
fontColor: '#000000',
fontFamily: 'arial',
fontSize: '18px',
joined: {
text: 'LinkedIn',
fontSize: '14px',
offsetX: '-30px',
offsetY: '-20px'
},
shared: {
text: 'Twitter',
fontSize: '14px'
}
},
alpha: 0.75,
backgroundColor: '#03a9f4',
borderColor: '#000000',
borderWidth: '2px',
join: [33],
shadow: false
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
