<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='//fonts.googleapis.com/css?family=Passion+One:700,400' rel='stylesheet' type='text/css'>
<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: 'bar',
theme: 'classic',
backgroundColor: '#898d95 #4f4f4f',
borderRadiusTopRight: '13px',
borderRadiusTopLeft: '13px',
borderRadiusBottomRight: '10px',
borderRadiusBottomLeft: '10px',
title: {
text: 'PRODUCTION REPORT',
align: 'right',
backgroundColor: '#f7f7f7 #e3e3e9',
borderRadiusTopLeft: '10px',
borderRadiusTopRight: '10px',
fontColor: '#4f4f4f',
fontFamily: 'Passion One',
fontSize: '24px',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#fff',
},
layout: 'h',
marker: {
type: 'circle',
size: '6px',
},
shadow: false,
toggleAction: 'remove',
y: '46px',
},
plot: {
tooltip: {
borderRadius: '6px',
},
valueBox: {
fontAngle: -90,
fontColor: '#fff',
fontSize: '10px',
fontWeight: 'normal',
offsetY: '20px',
placement: 'in',
visible: true,
},
borderRadiusTopLeft: '10px',
borderRadiusTopRight: '10px',
},
plotarea: {
backgroundColor: '#6c6e72',
margin: '80px 60px 60px 80px',
},
scaleX: {
values: ['2010', '2011', '2012', '2013', '2014<br>(PROJECTED)'],
guide: {
alpha: 0.2,
lineColor: '#fff',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
},
lineColor: '#fff',
lineWidth: '1px',
markers: [{
type: 'area',
alpha: 0.3,
backgroundColor: 'fff',
range: [3.5, 5],
}, ],
tick: {
visible: false,
},
},
scaleY: {
guide: {
alpha: 0.2,
lineColor: '#fff',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
},
label: {
text: 'UNITS',
fontColor: '#fff',
offsetX: '-10px',
},
lineColor: '#fff',
lineWidth: '1px',
multiplier: true,
tick: {
visible: false,
},
},
series: [{
text: 'MODEL A10',
values: [28761, 26340, 19291, 13856, 13124],
backgroundColor: '#38353c',
backgroundFit: 'xy',
backgroundImage: '//www.zingchart.com/assets/chart-images/black40.png',
},
{
text: 'MODEL A20',
values: [8124, 14298, 24346, 32282, 35934],
backgroundColor: '#a50617',
backgroundFit: 'xy',
backgroundImage: '//www.zingchart.com/assets/chart-images/red40.png',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar',
theme: 'classic',
backgroundColor: '#898d95 #4f4f4f',
borderRadiusTopRight: '13px',
borderRadiusTopLeft: '13px',
borderRadiusBottomRight: '10px',
borderRadiusBottomLeft: '10px',
title: {
text: 'PRODUCTION REPORT',
align: 'right',
backgroundColor: '#f7f7f7 #e3e3e9',
borderRadiusTopLeft: '10px',
borderRadiusTopRight: '10px',
fontColor: '#4f4f4f',
fontFamily: 'Passion One',
fontSize: '24px',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#fff',
},
layout: 'h',
marker: {
type: 'circle',
size: '6px',
},
shadow: false,
toggleAction: 'remove',
y: '46px',
},
plot: {
tooltip: {
borderRadius: '6px',
},
valueBox: {
fontAngle: -90,
fontColor: '#fff',
fontSize: '10px',
fontWeight: 'normal',
offsetY: '20px',
placement: 'in',
visible: true,
},
borderRadiusTopLeft: '10px',
borderRadiusTopRight: '10px',
},
plotarea: {
backgroundColor: '#6c6e72',
margin: '80px 60px 60px 80px',
},
scaleX: {
values: ['2010', '2011', '2012', '2013', '2014<br>(PROJECTED)'],
guide: {
alpha: 0.2,
lineColor: '#fff',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
},
lineColor: '#fff',
lineWidth: '1px',
markers: [
{
type: 'area',
alpha: 0.3,
backgroundColor: 'fff',
range: [3.5, 5],
},
],
tick: {
visible: false,
},
},
scaleY: {
guide: {
alpha: 0.2,
lineColor: '#fff',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
},
label: {
text: 'UNITS',
fontColor: '#fff',
offsetX: '-10px',
},
lineColor: '#fff',
lineWidth: '1px',
multiplier: true,
tick: {
visible: false,
},
},
series: [
{
text: 'MODEL A10',
values: [28761, 26340, 19291, 13856, 13124],
backgroundColor: '#38353c',
backgroundFit: 'xy',
backgroundImage: '//www.zingchart.com/assets/chart-images/black40.png',
},
{
text: 'MODEL A20',
values: [8124, 14298, 24346, 32282, 35934],
backgroundColor: '#a50617',
backgroundFit: 'xy',
backgroundImage: '//www.zingchart.com/assets/chart-images/red40.png',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
