<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background-color: #f3eeee;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
.acc .br {
margin-top: 15px;
margin-bottom: 15px;
background-color: #82DBD6;
display: block;
width: 100%;
height: 2px;
}
.custom-tooltip {
padding: 10px;
text-align: center;
z-index: 1000;
}
.acc .custom-tooltip span {
margin-top: 7px;
display: block;
font-size: 16px;
text-align: center;
}
.acc .custom-tooltip span:nth-child(1) {
font-size: 24px;
}
</style>
</head>
<body class="zc-body">
<div class="acc">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</dvi>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'area',
globals: {
fontFamily: 'Roboto'
},
backgroundColor: 'none',
title: {
text: 'Lead Quality Composition',
align: 'left'
},
legend: {
adjustLayout: true,
backgroundColor: '#FFF',
borderRadius: '10px',
borderWidth: '0px',
item: {
cursor: 'pointer',
fontSize: '16px'
},
marker: {
type: 'square',
borderRadius: '5px',
cursor: 'pointer',
size: '8px'
},
toggleAction: 'remove'
},
plot: {
activeArea: true,
alphaArea: 1,
animation: {
delay: 450,
effect: 'ANIMATION_SLIDE_LEFT',
sequence: 'ANIMATION_BY_PLOT',
speed: 580
},
hoverMarker: {
type: 'circle',
size: '10px',
visible: true
},
lineWidth: '0px',
marker: {
borderWidth: '2px',
visible: false
},
stacked: true,
stackType: '100%'
},
plotarea: {
maskTolerance: [20, 20] // marker can now flow outside of plotarea
},
scaleX: {
labels: ['Feb 20', 'Mar 20', 'Apr 20', 'May 20', 'Jun 20', 'Jul 20', 'Aug 20', 'Sep 20', 'Oct 20', 'Nov 20']
},
scaleY: {
values: '0:100:50',
labels: ['0%', '50%', '100%']
},
tooltip: {
text: '<div class="custom-tooltip"><span>%pper %</span> <span class="br"> </span> <span>Week Of %kt, 2018</span> <span> %t</span></div>',
backgroundColor: '#373B5C',
borderRadius: '5px',
borderWidth: '0px',
decimals: 2,
htmlMode: true
},
series: [{
text: 'Spam Leads',
values: [1, 2.14, 2, 3.05, 3, 3.05, 4, 3.71, 5, 3.16],
backgroundColor: '#AB7AC0',
legendItem: {
order: 4
},
marker: {
backgroundColor: '#AB7AC0'
}
},
{
text: 'Low Quality Leads',
values: [3.16, 5, 3.71, 4, 3.05, 3, 3.05, 2, 2.14, 1],
backgroundColor: '#82DBD6',
legendItem: {
order: 3
},
marker: {
backgroundColor: '#82DBD6'
}
},
{
text: 'High Quality Leads',
values: [8.1, 5, 7.3, 4, 4.47, 3, 3.11, 2, 2.68, 1],
backgroundColor: '#FD9C83',
marker: {
backgroundColor: '#FD9C83'
}
},
{
text: 'Avg Quality Leads',
values: [20.3, 5, 18.3, 4, 12.3, 3, 9.27, 2, 8.12, 1],
backgroundColor: '#95C9FD',
legendItem: {
order: 1
},
marker: {
backgroundColor: '#95C9FD'
}
}
]
}
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'area',
globals: {
fontFamily: 'Roboto'
},
backgroundColor: 'none',
title: {
text: 'Lead Quality Composition',
align: 'left'
},
legend: {
adjustLayout: true,
backgroundColor: '#FFF',
borderRadius: '10px',
borderWidth: '0px',
item: {
cursor: 'pointer',
fontSize: '16px'
},
marker: {
type: 'square',
borderRadius: '5px',
cursor: 'pointer',
size: '8px'
},
toggleAction: 'remove'
},
plot: {
activeArea: true,
alphaArea: 1,
animation: {
delay: 450,
effect: 'ANIMATION_SLIDE_LEFT',
sequence: 'ANIMATION_BY_PLOT',
speed: 580
},
hoverMarker: {
type: 'circle',
size: '10px',
visible: true
},
lineWidth: '0px',
marker: {
borderWidth: '2px',
visible: false
},
stacked: true,
stackType: '100%'
},
plotarea: {
maskTolerance: [20, 20] // marker can now flow outside of plotarea
},
scaleX: {
labels: ['Feb 20', 'Mar 20', 'Apr 20', 'May 20', 'Jun 20', 'Jul 20', 'Aug 20', 'Sep 20', 'Oct 20', 'Nov 20']
},
scaleY: {
values: '0:100:50',
labels: ['0%', '50%', '100%']
},
tooltip: {
text: '<div class="custom-tooltip"><span>%pper %</span> <span class="br"> </span> <span>Week Of %kt, 2018</span> <span> %t</span></div>',
backgroundColor: '#373B5C',
borderRadius: '5px',
borderWidth: '0px',
decimals: 2,
htmlMode: true
},
series: [
{
text: 'Spam Leads',
values: [1, 2.14, 2, 3.05, 3, 3.05, 4, 3.71, 5, 3.16],
backgroundColor: '#AB7AC0',
legendItem: {
order: 4
},
marker: {
backgroundColor: '#AB7AC0'
}
},
{
text: 'Low Quality Leads',
values: [3.16, 5, 3.71, 4, 3.05, 3, 3.05, 2, 2.14, 1],
backgroundColor: '#82DBD6',
legendItem: {
order: 3
},
marker: {
backgroundColor: '#82DBD6'
}
},
{
text: 'High Quality Leads',
values: [8.1, 5, 7.3, 4, 4.47, 3, 3.11, 2, 2.68, 1],
backgroundColor: '#FD9C83',
marker: {
backgroundColor: '#FD9C83'
}
},
{
text: 'Avg Quality Leads',
values: [20.3, 5, 18.3, 4, 12.3, 3, 9.27, 2, 8.12, 1],
backgroundColor: '#95C9FD',
legendItem: {
order: 1
},
marker: {
backgroundColor: '#95C9FD'
}
}
]
}
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
