<!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-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: {
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,
},
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%'],
},
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: {
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,
},
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%'],
},
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%',
});
