<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'area',
theme: 'classic',
backgroundColor: '#1D2629',
title: {
text: 'Fuel Usage',
backgroundColor: 'none',
fontFamily: 'arial',
fontSize: '20px',
fontWeight: 'normal',
textAlign: 'left',
},
legend: {
align: 'center',
backgroundColor: '#1D2629',
borderColor: '#808080',
fontFamily: 'arial',
fontSize: '10px',
item: {
fontColor: '#ffffff',
markerStyle: 'match',
},
layout: 'float',
margin: '5% auto auto auto',
toggleAction: 'remove',
},
plot: {
tooltip: {
visible: false,
},
tooltipText: '%t: %v',
activeArea: true,
animation: {
delay: 500,
effect: 'ANIMATION_EXPAND_BOTTOM',
speed: 600,
},
shadow: false,
stacked: true,
},
plotarea: {
margin: '10% 8% 14% 12%',
},
scaleX: {
values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
guide: {
lineColor: '#808080',
lineStyle: 'solid',
},
item: {
fontColor: '#808080',
fontFamily: 'arial',
fontSize: '12px',
fontWeight: 'normal',
offsetY: '5%',
},
lineColor: '#808080',
lineStyle: 'solid',
lineWidth: '1px',
tick: {
lineColor: '#808080',
lineWidth: '1px',
},
},
scaleY: {
values: '0:150:50',
format: '%v gal',
guide: {
alpha: 0.1,
lineColor: '#808080',
lineStyle: 'solid',
},
item: {
fontColor: '#808080',
fontFamily: 'arial',
fontSize: '12px',
fontWeight: 'normal',
offsetX: '-5%',
},
lineColor: '#808080',
lineWidth: '1px',
tick: {
lineColor: '#808080',
lineWidth: '1px',
},
},
crosshairX: {
lineColor: '#FFFFFF',
lineWidth: '2px',
marker: {
visible: false,
},
offsetY: '10%',
plotLabel: {
text: '<strong>%t</strong>: %v gal',
fontColor: '#000000',
fontFamily: 'arial',
},
scaleLabel: {
offsetY: '5%',
},
},
series: [{
text: 'Electricity',
values: [44, 40, 44, 37, 35, 46],
backgroundColor: '#8DD62E',
lineColor: '#8DD62E',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#8DD62E',
borderColor: '#8DD62E',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
{
text: 'Alcohol',
values: [40, 32, 37, 27, 27, 32],
backgroundColor: '#FF006F',
lineColor: '#FF006F',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#FF006F',
borderColor: '#FF006F',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
{
text: 'Gasoline',
values: [37, 24, 26, 17, 19, 17],
backgroundColor: '#00D3E6',
lineColor: '#00D3E6',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#00D3E6',
borderColor: '#00D3E6',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
{
text: 'Diesel',
values: [20, 13, 12, 8, 15, 9],
backgroundColor: '#FFD540',
lineColor: '#FFD540',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#FFD540',
borderColor: '#FFD540',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'area',
theme: 'classic',
backgroundColor: '#1D2629',
title: {
text: 'Fuel Usage',
backgroundColor: 'none',
fontFamily: 'arial',
fontSize: '20px',
fontWeight: 'normal',
textAlign: 'left',
},
legend: {
align: 'center',
backgroundColor: '#1D2629',
borderColor: '#808080',
fontFamily: 'arial',
fontSize: '10px',
item: {
fontColor: '#ffffff',
markerStyle: 'match',
},
layout: 'float',
margin: '5% auto auto auto',
toggleAction: 'remove',
},
plot: {
tooltip: {
visible: false,
},
tooltipText: '%t: %v',
activeArea: true,
animation: {
delay: 500,
effect: 'ANIMATION_EXPAND_BOTTOM',
speed: 600,
},
shadow: false,
stacked: true,
},
plotarea: {
margin: '10% 8% 14% 12%',
},
scaleX: {
values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
guide: {
lineColor: '#808080',
lineStyle: 'solid',
},
item: {
fontColor: '#808080',
fontFamily: 'arial',
fontSize: '12px',
fontWeight: 'normal',
offsetY: '5%',
},
lineColor: '#808080',
lineStyle: 'solid',
lineWidth: '1px',
tick: {
lineColor: '#808080',
lineWidth: '1px',
},
},
scaleY: {
values: '0:150:50',
format: '%v gal',
guide: {
alpha: 0.1,
lineColor: '#808080',
lineStyle: 'solid',
},
item: {
fontColor: '#808080',
fontFamily: 'arial',
fontSize: '12px',
fontWeight: 'normal',
offsetX: '-5%',
},
lineColor: '#808080',
lineWidth: '1px',
tick: {
lineColor: '#808080',
lineWidth: '1px',
},
},
crosshairX: {
lineColor: '#FFFFFF',
lineWidth: '2px',
marker: {
visible: false,
},
offsetY: '10%',
plotLabel: {
text: '<strong>%t</strong>: %v gal',
fontColor: '#000000',
fontFamily: 'arial',
},
scaleLabel: {
offsetY: '5%',
},
},
series: [
{
text: 'Electricity',
values: [44, 40, 44, 37, 35, 46],
backgroundColor: '#8DD62E',
lineColor: '#8DD62E',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#8DD62E',
borderColor: '#8DD62E',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
{
text: 'Alcohol',
values: [40, 32, 37, 27, 27, 32],
backgroundColor: '#FF006F',
lineColor: '#FF006F',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#FF006F',
borderColor: '#FF006F',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
{
text: 'Gasoline',
values: [37, 24, 26, 17, 19, 17],
backgroundColor: '#00D3E6',
lineColor: '#00D3E6',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#00D3E6',
borderColor: '#00D3E6',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
{
text: 'Diesel',
values: [20, 13, 12, 8, 15, 9],
backgroundColor: '#FFD540',
lineColor: '#FFD540',
lineWidth: '2px',
marker: {
type: 'circle',
backgroundColor: '#FFD540',
borderColor: '#FFD540',
borderWidth: '0px',
shadow: false,
size: '4px',
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
