<!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: #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"]; // Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let myPalette = ['#94DBF9', '#2BBEFE', '#008ECC', '#005479'];
let chartConfig = {
type: 'area',
title: {
text: 'Stacked Area Chart with Crosshair',
align: 'left',
color: '#5D7D9A',
fontSize: '30px',
padding: '30 0 0 35',
},
subtitle: {
text: 'Based on a line chart, but with the area between the line and axis filled in.',
align: 'left',
color: '#5D7D9A',
fontSize: '15px',
fontWeight: '300px',
padding: '35 0 0 35',
},
plot: {
tooltip: {
visible: false,
},
alphaArea: 0.4,
marker: {
size: 4,
},
stacked: true,
},
plotarea: {
margin: '120 40 60 80',
},
scaleX: {
item: {
color: '#6C6C6C',
},
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
label: {
padding: '20 0 0 0',
text: 'Month',
color: '#6C6C6C',
},
lineColor: '#D8D8D8',
tick: {
lineColor: '#D8D8D8',
},
},
scaleY: {
guide: {
lineStyle: 'solid',
},
item: {
color: '#6C6C6C',
},
label: {
padding: '20 0 0 0',
text: '# of Gallons',
color: '#6C6C6C',
},
lineColor: '#D8D8D8',
maxItems: 8,
tick: {
lineColor: '#D8D8D8',
},
values: '0:150:50',
},
series: [{
values: [45, 40, 46, 40, 38, 45],
backgroundColor: '#94DBF9',
lineColor: '#94DBF9',
marker: {
backgroundColor: '#94DBF9',
borderColor: '#94DBF9',
},
},
{
values: [45, 35, 38, 25, 20, 51],
backgroundColor: '#2BBEFE',
lineColor: '#2BBEFE',
marker: {
backgroundColor: '#2BBEFE',
borderColor: '#2BBEFE',
},
},
{
values: [30, 22, 20, 20, 22, 15],
backgroundColor: '#008ECC',
lineColor: '#008ECC',
marker: {
backgroundColor: '#008ECC',
borderColor: '#008ECC',
},
},
{
values: [15, 12, 12, 10, 16, 9],
backgroundColor: '#005479',
lineColor: '#005479',
marker: {
backgroundColor: '#005479',
borderColor: '#005479',
},
},
],
crosshairX: {
plotLabel: {
backgroundColor: '#fff',
borderColor: '#EEE',
borderRadius: '5px',
fontColor: '#333',
padding: '10px',
},
scaleLabel: {
text: '%v',
alpha: 0,
fontFamily: 'Georgia',
transform: {
type: 'date',
all: '%M %d, %Y<br>%g:%i %a',
},
},
},
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let myPalette = ['#94DBF9', '#2BBEFE', '#008ECC', '#005479'];
let chartConfig = {
type: 'area',
title: {
text: 'Stacked Area Chart with Crosshair',
align: 'left',
color: '#5D7D9A',
fontSize: '30px',
padding: '30 0 0 35',
},
subtitle: {
text: 'Based on a line chart, but with the area between the line and axis filled in.',
align: 'left',
color: '#5D7D9A',
fontSize: '15px',
fontWeight: '300px',
padding: '35 0 0 35',
},
plot: {
tooltip: {
visible: false,
},
alphaArea: 0.4,
marker: {
size: 4,
},
stacked: true,
},
plotarea: {
margin: '120 40 60 80',
},
scaleX: {
item: {
color: '#6C6C6C',
},
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
label: {
padding: '20 0 0 0',
text: 'Month',
color: '#6C6C6C',
},
lineColor: '#D8D8D8',
tick: {
lineColor: '#D8D8D8',
},
},
scaleY: {
guide: {
lineStyle: 'solid',
},
item: {
color: '#6C6C6C',
},
label: {
padding: '20 0 0 0',
text: '# of Gallons',
color: '#6C6C6C',
},
lineColor: '#D8D8D8',
maxItems: 8,
tick: {
lineColor: '#D8D8D8',
},
values: '0:150:50',
},
series: [
{
values: [45, 40, 46, 40, 38, 45],
backgroundColor: '#94DBF9',
lineColor: '#94DBF9',
marker: {
backgroundColor: '#94DBF9',
borderColor: '#94DBF9',
},
},
{
values: [45, 35, 38, 25, 20, 51],
backgroundColor: '#2BBEFE',
lineColor: '#2BBEFE',
marker: {
backgroundColor: '#2BBEFE',
borderColor: '#2BBEFE',
},
},
{
values: [30, 22, 20, 20, 22, 15],
backgroundColor: '#008ECC',
lineColor: '#008ECC',
marker: {
backgroundColor: '#008ECC',
borderColor: '#008ECC',
},
},
{
values: [15, 12, 12, 10, 16, 9],
backgroundColor: '#005479',
lineColor: '#005479',
marker: {
backgroundColor: '#005479',
borderColor: '#005479',
},
},
],
crosshairX: {
plotLabel: {
backgroundColor: '#fff',
borderColor: '#EEE',
borderRadius: '5px',
fontColor: '#333',
padding: '10px',
},
scaleLabel: {
text: '%v',
alpha: 0,
fontFamily: 'Georgia',
transform: {
type: 'date',
all: '%M %d, %Y<br>%g:%i %a',
},
},
},
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
