<!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 {
width: 100%;
height: 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 = {
graphset: [{
type: 'mixed',
backgroundColor: '#a6c675',
height: '60%',
x: '0px',
y: '0px',
plot: {
tooltip: {
shadow: false,
},
},
plotarea: {
margin: '5px 30px 0px 30px',
},
scaleX: {
values: '1:30:1',
guide: {
visible: false,
},
item: {
visible: false,
},
itemsOverlap: true,
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleX2: {
values: '1:60:1',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
markers: [{
type: 'line',
alpha: 0.6,
lineColor: '#777',
lineStyle: 'dashed',
lineWidth: '1px',
range: [50],
}, ],
tick: {
visible: false,
},
},
scaleY2: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [{
text: 'AAPL',
fontColor: '#fff',
fontSize: '22px',
x: '20px',
y: '14px',
},
{
text: '527.68',
fontColor: '#fff',
fontSize: '22px',
x: '625px',
y: '14px',
},
{
text: 'Today 3:25',
fontColor: '#D0E0B8',
fontFamily: 'arial narrow',
fontSize: '14px',
x: '20px',
y: '40px',
},
{
text: 'PM',
fontColor: '#D0E0B8',
fontFamily: 'arial narrow',
fontSize: '10px',
x: '80px',
y: '44px',
},
{
text: '+1.05 (1.69 %)',
fontColor: '#D0E0B8',
fontFamily: 'arial narrow',
fontSize: '14px',
x: '625px',
y: '40px',
},
],
series: [{
type: 'bar',
values: [
7, 8, 4, 9, 40, 45, 6, 5, 9, 12, 9, 12, 8, 11, 10, 9, 8, 13, 14, 7,
6, 7, 11, 14, 16, 13, 7, 16, 13, 7,
],
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
},
backgroundColor: '#9DBA73',
barWidth: '10px',
borderRadiusTopRight: '3px',
borderRadiusTopLeft: '3px',
hoverState: {
visible: false,
},
scales: 'scale-x, scale-y',
},
{
type: 'line',
values: [
61, 56, 63, 54, 61, 48, 49, 46, 46, 49, 52, 51, 49, 47, 43, 40, 36,
33, 30, 35, 37, 37, 42, 31, 28, 22, 26, 23, 25, 27, 23, 23, 25, 26,
31, 35, 33, 38, 47, 46, 49, 45, 52, 53, 55, 53, 54, 56, 57, 43, 44,
43, 42, 46, 49, 52, 53, 56, 58, 61, 62, 67,
],
animation: {
effect: 'ANIMATION_SLIDE_LEFT',
},
lineColor: '#F5F8ED',
marker: {
visible: false,
},
scales: 'scale-x-2, scale-y-2',
},
],
},
{
type: 'bar',
backgroundColor: '#fff',
borderColor: '#f2f2f2',
borderWidth: '2px',
height: '40%',
x: '0px',
y: '60%',
plot: {
animation: {
effect: 'ANIMATION_SLIDE_BOTTOM',
},
barsOverlap: '100%',
barSpace: '5px',
barWidth: '20px',
},
plotarea: {
margin: '25px 25px 50px 60%',
},
scaleX: {
values: ['J', 'F', 'M', 'A', 'M', 'J', 'J'],
guide: {
visible: false,
},
item: {
fontColor: '#ADADAD',
fontSize: '12px',
},
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [{
text: '+120.23',
fontColor: '#A7C47B',
fontSize: '38px',
x: '20px',
y: '60px',
},
{
text: 'Yearly Change',
fontColor: '#ACACAC',
fontSize: '16px',
x: '65px',
y: '110px',
},
],
series: [{
values: [15, 24, 17, 24, 15, 28, 12],
tooltip: {
text: '%v',
},
backgroundColor: '#A7C67A',
borderRadiusTopLeft: '3px',
borderRadiusTopRight: '3px',
zIndex: 2,
},
{
values: [50, 50, 50, 50, 50, 50, 50],
tooltip: {
visible: false,
},
backgroundColor: '#F2F2F2',
hoverState: {
visible: false,
},
zIndex: 1,
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
graphset: [
{
type: 'mixed',
backgroundColor: '#a6c675',
height: '60%',
x: '0px',
y: '0px',
plot: {
tooltip: {
shadow: false,
},
},
plotarea: {
margin: '5px 30px 0px 30px',
},
scaleX: {
values: '1:30:1',
guide: {
visible: false,
},
item: {
visible: false,
},
itemsOverlap: true,
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleX2: {
values: '1:60:1',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
markers: [
{
type: 'line',
alpha: 0.6,
lineColor: '#777',
lineStyle: 'dashed',
lineWidth: '1px',
range: [50],
},
],
tick: {
visible: false,
},
},
scaleY2: {
values: '0:100:10',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [
{
text: 'AAPL',
fontColor: '#fff',
fontSize: '22px',
x: '20px',
y: '14px',
},
{
text: '527.68',
fontColor: '#fff',
fontSize: '22px',
x: '625px',
y: '14px',
},
{
text: 'Today 3:25',
fontColor: '#D0E0B8',
fontFamily: 'arial narrow',
fontSize: '14px',
x: '20px',
y: '40px',
},
{
text: 'PM',
fontColor: '#D0E0B8',
fontFamily: 'arial narrow',
fontSize: '10px',
x: '80px',
y: '44px',
},
{
text: '+1.05 (1.69 %)',
fontColor: '#D0E0B8',
fontFamily: 'arial narrow',
fontSize: '14px',
x: '625px',
y: '40px',
},
],
series: [
{
type: 'bar',
values: [
7, 8, 4, 9, 40, 45, 6, 5, 9, 12, 9, 12, 8, 11, 10, 9, 8, 13, 14, 7,
6, 7, 11, 14, 16, 13, 7, 16, 13, 7,
],
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
},
backgroundColor: '#9DBA73',
barWidth: '10px',
borderRadiusTopRight: '3px',
borderRadiusTopLeft: '3px',
hoverState: {
visible: false,
},
scales: 'scale-x, scale-y',
},
{
type: 'line',
values: [
61, 56, 63, 54, 61, 48, 49, 46, 46, 49, 52, 51, 49, 47, 43, 40, 36,
33, 30, 35, 37, 37, 42, 31, 28, 22, 26, 23, 25, 27, 23, 23, 25, 26,
31, 35, 33, 38, 47, 46, 49, 45, 52, 53, 55, 53, 54, 56, 57, 43, 44,
43, 42, 46, 49, 52, 53, 56, 58, 61, 62, 67,
],
animation: {
effect: 'ANIMATION_SLIDE_LEFT',
},
lineColor: '#F5F8ED',
marker: {
visible: false,
},
scales: 'scale-x-2, scale-y-2',
},
],
},
{
type: 'bar',
backgroundColor: '#fff',
borderColor: '#f2f2f2',
borderWidth: '2px',
height: '40%',
x: '0px',
y: '60%',
plot: {
animation: {
effect: 'ANIMATION_SLIDE_BOTTOM',
},
barsOverlap: '100%',
barSpace: '5px',
barWidth: '20px',
},
plotarea: {
margin: '25px 25px 50px 60%',
},
scaleX: {
values: ['J', 'F', 'M', 'A', 'M', 'J', 'J'],
guide: {
visible: false,
},
item: {
fontColor: '#ADADAD',
fontSize: '12px',
},
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [
{
text: '+120.23',
fontColor: '#A7C47B',
fontSize: '38px',
x: '20px',
y: '60px',
},
{
text: 'Yearly Change',
fontColor: '#ACACAC',
fontSize: '16px',
x: '65px',
y: '110px',
},
],
series: [
{
values: [15, 24, 17, 24, 15, 28, 12],
tooltip: {
text: '%v',
},
backgroundColor: '#A7C67A',
borderRadiusTopLeft: '3px',
borderRadiusTopRight: '3px',
zIndex: 2,
},
{
values: [50, 50, 50, 50, 50, 50, 50],
tooltip: {
visible: false,
},
backgroundColor: '#F2F2F2',
hoverState: {
visible: false,
},
zIndex: 1,
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
