<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'line',
scaleX: {
item: {
fontSize: 10
}
},
scaleY: {
values: '50:350:50',
guide: {
lineStyle: 'dotted'
},
item: {
fontSize: 10
},
markers: [{
type: 'line',
range: [100],
valueRange: true,
lineColor: 'red',
lineWidth: 2,
lineStyle: 'solid',
alpha: 1,
label: {
text: 'Line Marker',
alpha: 1,
angle: 0,
backgroundColor: '#ffe6e6',
borderColor: 'red',
borderRadius: '3px',
borderWidth: 1,
fontColor: 'red',
fontFamily: 'Courier',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'normal',
lineStyle: 'solid',
padding: 5,
textAlign: 'left',
textAlpha: 1,
width: '100%',
offsetY: 40,
offsetX: 20,
callout: true,
calloutHeight: 10,
calloutPosition: 'top',
calloutWidth: 0,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
offsetY: 35,
size: 5,
}
}
},
{
type: 'area',
range: [150, 300],
valueRange: true,
backgroundColor: 'red',
label: {
text: 'Area Marker',
alpha: 1,
angle: 0,
backgroundColor: '#ffe6e6',
borderColor: 'red',
borderRadius: '3px',
borderWidth: 1,
fontColor: 'red',
fontFamily: 'Courier',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'normal',
lineStyle: 'solid',
padding: 5,
textAlign: 'left',
textAlpha: 1,
width: '100%',
offsetY: -30,
callout: true,
calloutHeight: 15,
calloutPosition: 'bottom',
calloutWidth: 0,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
offsetY: -25,
size: 5,
},
}
}
]
},
plot: {
lineWidth: 2,
lineColor: '#3399ff',
marker: {
size: 3,
backgroundColor: '#ccccff #00ff00',
borderWidth: 1,
borderColor: '#3399ff'
},
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
text: '%v'
},
scaleLabel: {
visible: false
}
},
crosshairY: {
type: 'multiple',
scaleLabel: {
visible: false
}
},
series: [{
values: [
138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
234.2
]
}]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%'
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
let chartConfig = {
type: 'line',
scaleX: {
item: {
fontSize: 10
}
},
scaleY: {
values: '50:350:50',
guide: {
lineStyle: 'dotted'
},
item: {
fontSize: 10
},
markers: [{
type: 'line',
range: [100],
valueRange: true,
lineColor: 'red',
lineWidth: 2,
lineStyle: 'solid',
alpha: 1,
label: {
text: 'Line Marker',
alpha: 1,
angle: 0,
backgroundColor: '#ffe6e6',
borderColor: 'red',
borderRadius: '3px',
borderWidth: 1,
fontColor: 'red',
fontFamily: 'Courier',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'normal',
lineStyle: 'solid',
padding: 5,
textAlign: 'left',
textAlpha: 1,
width: '100%',
offsetY: 40,
offsetX: 20,
callout: true,
calloutHeight: 10,
calloutPosition: 'top',
calloutWidth: 0,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
offsetY: 35,
size: 5,
}
}
},
{
type: 'area',
range: [150, 300],
valueRange: true,
backgroundColor: 'red',
label: {
text: 'Area Marker',
alpha: 1,
angle: 0,
backgroundColor: '#ffe6e6',
borderColor: 'red',
borderRadius: '3px',
borderWidth: 1,
fontColor: 'red',
fontFamily: 'Courier',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'normal',
lineStyle: 'solid',
padding: 5,
textAlign: 'left',
textAlpha: 1,
width: '100%',
offsetY: -30,
callout: true,
calloutHeight: 15,
calloutPosition: 'bottom',
calloutWidth: 0,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
offsetY: -25,
size: 5,
},
}
}
]
},
plot: {
lineWidth: 2,
lineColor: '#3399ff',
marker: {
size: 3,
backgroundColor: '#ccccff #00ff00',
borderWidth: 1,
borderColor: '#3399ff'
},
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
text: '%v'
},
scaleLabel: {
visible: false
}
},
crosshairY: {
type: 'multiple',
scaleLabel: {
visible: false
}
},
series: [{
values: [
138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
234.2
]
}]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 400,
width: '100%'
});