<!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"];
var myConfig = {
type: 'area',
scaleX: {
visible: false
},
scaleY: {
item: {
"text": "",
"width": 25,
"height": 18,
"background-repeat": "no-repeat",
"vertical-align": "middle",
rules: [{
rule: '%v >= 0 && %v < 20',
"background-image": "//i.imgur.com/90r4p6E.png",
},
{
rule: '%v >= 20 && %v < 40',
"background-image": "//i.imgur.com/zV4s8EI.png",
},
{
rule: '%v >= 40 && %v < 60',
"background-image": "//i.imgur.com/hUaXlRz.png",
},
{
rule: '%v >= 60 && %v < 80',
"background-image": "//i.imgur.com/SxSuYS0.png",
},
{
rule: '%v >= 80 && %v < 100',
"background-image": "//i.imgur.com/NU4TS0o.png",
},
{
rule: '%v >= 100',
"background-image": "//i.imgur.com/NU4TS0o.png",
},
]
},
tick: {
lineWidth: 2,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
}
]
},
guide: {
visible: true,
lineStyle: 'solid',
lineWidth: 1,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
},
]
},
minorTicks: 2,
minorTick: {
lineWidth: 1,
size: 5,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
}
]
},
minorGuide: {
alpha: 1,
lineStyle: 'dashdot',
lineWidth: 1,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
}
]
}
},
plot: {
aspect: 'spline',
backgroundColor: 'black',
lineColor: 'black',
marker: {
backgroundColor: 'black'
}
},
series: [{
values: [38.2, 96.3, 53.6, 27.4, 14.1, 81.4, 31.1, 70.9, 54.4, 5.2, 36.3, 80.4, 50.5, 35.3, 30.5, 64.3, 10.5, 27.2]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
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>
var myConfig = {
type: 'area',
scaleX: {
visible: false
},
scaleY: {
item: {
"text": "",
"width": 25,
"height": 18,
"background-repeat": "no-repeat",
"vertical-align": "middle",
rules: [{
rule: '%v >= 0 && %v < 20',
"background-image": "//i.imgur.com/90r4p6E.png",
},
{
rule: '%v >= 20 && %v < 40',
"background-image": "//i.imgur.com/zV4s8EI.png",
},
{
rule: '%v >= 40 && %v < 60',
"background-image": "//i.imgur.com/hUaXlRz.png",
},
{
rule: '%v >= 60 && %v < 80',
"background-image": "//i.imgur.com/SxSuYS0.png",
},
{
rule: '%v >= 80 && %v < 100',
"background-image": "//i.imgur.com/NU4TS0o.png",
},
{
rule: '%v >= 100',
"background-image": "//i.imgur.com/NU4TS0o.png",
},
]
},
tick: {
lineWidth: 2,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
}
]
},
guide: {
visible: true,
lineStyle: 'solid',
lineWidth: 1,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
},
]
},
minorTicks: 2,
minorTick: {
lineWidth: 1,
size: 5,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
}
]
},
minorGuide: {
alpha: 1,
lineStyle: 'dashdot',
lineWidth: 1,
rules: [{
rule: '%v >= 0 && %v < 20',
lineColor: 'red'
},
{
rule: '%v >= 20 && %v < 40',
lineColor: 'orange'
},
{
rule: '%v >= 40 && %v < 60',
lineColor: 'brown'
},
{
rule: '%v >= 60 && %v < 80',
lineColor: 'green'
},
{
rule: '%v >= 80 && %v < 100',
lineColor: 'blue'
},
{
rule: '%v >= 100',
lineColor: 'purple'
}
]
}
},
plot: {
aspect: 'spline',
backgroundColor: 'black',
lineColor: 'black',
marker: {
backgroundColor: 'black'
}
},
series: [{
values: [38.2, 96.3, 53.6, 27.4, 14.1, 81.4, 31.1, 70.9, 54.4, 5.2, 36.3, 80.4, 50.5, 35.3, 30.5, 64.3, 10.5, 27.2]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});