<!DOCTYPE html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<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 {
margin: auto;
width: 750px;
height: 100%;
background: #E1DDD3;
}
.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',
globals: {
fontFamily: 'raleway'
},
backgroundColor: '#E1DDD3',
title: {
text: 'TRAVELING WITH YOSHI',
fontColor: '#424242',
fontSize: '30px',
marginTop: '10%'
},
plot: {
tooltip: {
visible: false
}
},
labels: [{
text: 'HOURS<br>IN CAR',
bold: true,
fontColor: '#B38DD3',
textAlign: 'left',
x: '5%',
y: '48%'
},
{
text: 'EXOTIC<br>GET AWAY',
bold: true,
fontColor: '#8DC7A8',
textAlign: 'right',
x: '85%',
y: '48%'
},
{
text: 'ANYWHERE WITHIN 3 HOURS',
bold: true,
fontColor: '#47469D',
x: '39%',
y: '86%'
}
],
shapes: [{
type: 'circle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '2px',
size: '4px',
x: '27%',
y: '50%'
},
{
type: 'circle',
backgroundColor: '#333',
borderColor: '#333',
borderWidth: '2px',
size: '1px',
x: '12%',
y: '50%'
},
{
type: 'line',
lineColor: '#333',
lineStyle: 'dotted',
lineWidth: '2px',
points: [
[97, 240],
[195, 240]
]
},
{
type: 'circle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '2px',
size: '4px',
x: '72%',
y: '50%'
},
{
type: 'circle',
backgroundColor: '#333',
borderColor: '#333',
borderWidth: '2px',
size: '1px',
x: '85%',
y: '50%'
},
{
type: 'line',
lineColor: '#333',
lineStyle: 'dotted',
lineWidth: '2px',
points: [
[550, 240],
[635, 240]
]
},
{
type: 'circle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '2px',
size: '4px',
x: '50%',
y: '50%'
},
{
type: 'circle',
backgroundColor: '#333',
borderColor: '#333',
borderWidth: '2px',
size: '1px',
x: '50%',
y: '85%'
},
{
type: 'line',
lineColor: '#333',
lineStyle: 'dotted',
lineWidth: '2px',
points: [
[375, 260],
[375, 405]
]
}
],
series: [{
values: [505],
alpha: 0.7,
backgroundColor: '#9A61D3',
join: [84]
},
{
values: [505],
alpha: 0.7,
backgroundColor: '#6BDD92',
join: [84]
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '480px',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'venn',
globals: {
fontFamily: 'raleway'
},
backgroundColor: '#E1DDD3',
title: {
text: 'TRAVELING WITH YOSHI',
fontColor: '#424242',
fontSize: '30px',
marginTop: '10%'
},
plot: {
tooltip: {
visible: false
}
},
labels: [
{
text: 'HOURS<br>IN CAR',
bold: true,
fontColor: '#B38DD3',
textAlign: 'left',
x: '5%',
y: '48%'
},
{
text: 'EXOTIC<br>GET AWAY',
bold: true,
fontColor: '#8DC7A8',
textAlign: 'right',
x: '85%',
y: '48%'
},
{
text: 'ANYWHERE WITHIN 3 HOURS',
bold: true,
fontColor: '#47469D',
x: '39%',
y: '86%'
}
],
shapes: [
{
type: 'circle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '2px',
size: '4px',
x: '27%',
y: '50%'
},
{
type: 'circle',
backgroundColor: '#333',
borderColor: '#333',
borderWidth: '2px',
size: '1px',
x: '12%',
y: '50%'
},
{
type: 'line',
lineColor: '#333',
lineStyle: 'dotted',
lineWidth: '2px',
points: [[97, 240], [195, 240]]
},
{
type: 'circle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '2px',
size: '4px',
x: '72%',
y: '50%'
},
{
type: 'circle',
backgroundColor: '#333',
borderColor: '#333',
borderWidth: '2px',
size: '1px',
x: '85%',
y: '50%'
},
{
type: 'line',
lineColor: '#333',
lineStyle: 'dotted',
lineWidth: '2px',
points: [[550, 240], [635, 240]]
},
{
type: 'circle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '2px',
size: '4px',
x: '50%',
y: '50%'
},
{
type: 'circle',
backgroundColor: '#333',
borderColor: '#333',
borderWidth: '2px',
size: '1px',
x: '50%',
y: '85%'
},
{
type: 'line',
lineColor: '#333',
lineStyle: 'dotted',
lineWidth: '2px',
points: [[375, 260], [375, 405]]
}
],
series: [
{
values: [505],
alpha: 0.7,
backgroundColor: '#9A61D3',
join: [84]
},
{
values: [505],
alpha: 0.7,
backgroundColor: '#6BDD92',
join: [84]
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '480px',
width: '100%',
});
