<!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>
.zc-body {
background-color: #363b42;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.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 = {
theme: 'classic',
graphset: [{
type: 'hbar',
backgroundColor: '#363b42',
borderColor: '#111a21',
borderWidth: '2px',
height: '50%',
title: {
text: 'Company Performance',
marginTop: '10px',
marginLeft: '20px',
backgroundColor: 'none',
fontSize: '18px',
shadow: false,
textAlign: 'left',
},
plot: {
barsOverlap: '100%',
barWidth: '17px',
thousandsSeparator: ',',
animation: {
effect: 'ANIMATION_SLIDE_BOTTOM',
},
},
plotarea: {
margin: '50px 25px 20px 25px',
},
scaleX: {
values: ['Puma', 'Converse', 'Adidas', 'Nike'],
guide: {
visible: false,
},
item: {
color: '#fff',
offsetX: '210px',
textAlign: 'left',
width: '200px',
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
series: [{
values: [103902, 112352, 121823, 154092],
tooltip: {
shadow: false,
},
hoverState: {
visible: false,
},
styles: [{
backgroundColor: '#009016',
},
{
backgroundColor: '#017790',
},
{
backgroundColor: '#ee5b18',
},
{
backgroundColor: '#c94742',
},
],
tooltipText: '$%node-value',
zIndex: 2,
},
{
values: [300000, 300000, 300000, 300000],
valueBox: {
text: '$%data-rvalues',
fontColor: '#fff',
fontSize: '10px',
offsetX: '3px',
offsetY: '-1px',
placement: 'top-in',
textAlign: 'right',
visible: true,
},
backgroundColor: '#000',
dataRvalues: [103902, 112352, 121823, 154092],
maxTrackers: 0,
zIndex: 1,
},
],
},
{
type: 'line',
backgroundColor: '#363b42',
borderColor: '#111a21',
borderWidth: '2px',
height: '50%',
y: '50%',
legend: {
margin: 'auto auto 10px auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
padding: '3px',
fontColor: '#eee',
fontSize: '12px',
},
layout: 'float',
marker: {
lineWidth: '2px',
showLine: 'true',
size: '4px',
},
shadow: false,
width: '75%',
x: '25%',
},
plot: {
tooltip: {
visible: false,
},
animation: {
effect: 'ANIMATION_SLIDE_BOTTOM',
},
tooltipText: 'Items Sold: %v',
},
plotarea: {
margin: '20 30 75 55',
},
scaleX: {
values: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
guide: {
visible: false,
},
item: {
paddingTop: '5px',
fontColor: '#FFFFFF',
fontSize: '10px',
},
lineColor: '#fff',
lineWidth: '1px',
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
},
scaleY: {
values: '0:100:25',
guide: {
lineColor: '#7d8285',
lineStyle: 'solid',
lineWidth: '2px',
},
item: {
paddingRight: '5px',
fontColor: '#fff',
fontSize: '10px',
},
lineColor: 'none',
tick: {
visible: false,
},
},
crosshairX: {
scaleLabel: {
fontColor: '#000000',
},
},
series: [{
text: 'Nike',
values: [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
legendMarker: {
type: 'circle',
borderColor: '#c94742',
size: '5px',
},
lineColor: '#c94742',
lineWidth: '2px',
marker: {
backgroundColor: '#c94742',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 3,
shadow: false,
},
{
text: 'Adidas',
values: [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
legendMarker: {
type: 'circle',
borderColor: '#ee5b18',
size: '5px',
},
lineColor: '#ee5b18',
lineWidth: '2px',
marker: {
backgroundColor: '#ee5b18',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 2,
shadow: false,
visible: true,
},
{
text: 'Converse',
values: [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
legendMarker: {
type: 'circle',
borderColor: '#017790',
size: '5px',
},
lineColor: '#017790',
lineWidth: '2px',
marker: {
backgroundColor: '#017790',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 1,
shadow: false,
visible: true,
},
{
text: 'Puma',
values: [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
legendMarker: {
type: 'circle',
borderColor: '#009016',
size: '5px',
},
lineColor: '#009016',
lineWidth: '2px',
marker: {
backgroundColor: '#009016',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 0,
shadow: false,
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
theme: 'classic',
graphset: [
{
type: 'hbar',
backgroundColor: '#363b42',
borderColor: '#111a21',
borderWidth: '2px',
height: '50%',
title: {
text: 'Company Performance',
marginTop: '10px',
marginLeft: '20px',
backgroundColor: 'none',
fontSize: '18px',
shadow: false,
textAlign: 'left',
},
plot: {
barsOverlap: '100%',
barWidth: '17px',
thousandsSeparator: ',',
animation: {
effect: 'ANIMATION_SLIDE_BOTTOM',
},
},
plotarea: {
margin: '50px 25px 20px 25px',
},
scaleX: {
values: ['Puma', 'Converse', 'Adidas', 'Nike'],
guide: {
visible: false,
},
item: {
color: '#fff',
offsetX: '210px',
textAlign: 'left',
width: '200px',
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
series: [
{
values: [103902, 112352, 121823, 154092],
tooltip: {
shadow: false,
},
hoverState: {
visible: false,
},
styles: [
{
backgroundColor: '#009016',
},
{
backgroundColor: '#017790',
},
{
backgroundColor: '#ee5b18',
},
{
backgroundColor: '#c94742',
},
],
tooltipText: '$%node-value',
zIndex: 2,
},
{
values: [300000, 300000, 300000, 300000],
valueBox: {
text: '$%data-rvalues',
fontColor: '#fff',
fontSize: '10px',
offsetX: '3px',
offsetY: '-1px',
placement: 'top-in',
textAlign: 'right',
visible: true,
},
backgroundColor: '#000',
dataRvalues: [103902, 112352, 121823, 154092],
maxTrackers: 0,
zIndex: 1,
},
],
},
{
type: 'line',
backgroundColor: '#363b42',
borderColor: '#111a21',
borderWidth: '2px',
height: '50%',
y: '50%',
legend: {
margin: 'auto auto 10px auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
padding: '3px',
fontColor: '#eee',
fontSize: '12px',
},
layout: 'float',
marker: {
lineWidth: '2px',
showLine: 'true',
size: '4px',
},
shadow: false,
width: '75%',
x: '25%',
},
plot: {
tooltip: {
visible: false,
},
animation: {
effect: 'ANIMATION_SLIDE_BOTTOM',
},
tooltipText: 'Items Sold: %v',
},
plotarea: {
margin: '20 30 75 55',
},
scaleX: {
values: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
guide: {
visible: false,
},
item: {
paddingTop: '5px',
fontColor: '#FFFFFF',
fontSize: '10px',
},
lineColor: '#fff',
lineWidth: '1px',
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
},
scaleY: {
values: '0:100:25',
guide: {
lineColor: '#7d8285',
lineStyle: 'solid',
lineWidth: '2px',
},
item: {
paddingRight: '5px',
fontColor: '#fff',
fontSize: '10px',
},
lineColor: 'none',
tick: {
visible: false,
},
},
crosshairX: {
scaleLabel: {
fontColor: '#000000',
},
},
series: [
{
text: 'Nike',
values: [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
legendMarker: {
type: 'circle',
borderColor: '#c94742',
size: '5px',
},
lineColor: '#c94742',
lineWidth: '2px',
marker: {
backgroundColor: '#c94742',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 3,
shadow: false,
},
{
text: 'Adidas',
values: [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
legendMarker: {
type: 'circle',
borderColor: '#ee5b18',
size: '5px',
},
lineColor: '#ee5b18',
lineWidth: '2px',
marker: {
backgroundColor: '#ee5b18',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 2,
shadow: false,
visible: true,
},
{
text: 'Converse',
values: [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
legendMarker: {
type: 'circle',
borderColor: '#017790',
size: '5px',
},
lineColor: '#017790',
lineWidth: '2px',
marker: {
backgroundColor: '#017790',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 1,
shadow: false,
visible: true,
},
{
text: 'Puma',
values: [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
legendMarker: {
type: 'circle',
borderColor: '#009016',
size: '5px',
},
lineColor: '#009016',
lineWidth: '2px',
marker: {
backgroundColor: '#009016',
borderWidth: '0px',
shadow: false,
size: '3px',
},
palette: 0,
shadow: false,
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
