var myConfig = {
"type": "line",
"title":{
"text":"%scale-key-value"
},
"subtitle":{
"text":"the parsed value"
},
"crosshair-x":{
"plot-label":{
"text":"%scale-key-value: $%v",
"decimals":2,
"transform":{
"type":"date",
"all":"%g:%i %A"
}
},
"scale-label":{
"visible":false
}
},
"plot":{
"tooltip":{
"visible":false
},
"rules": [
{
rule: "%scale-key-text > 1457116200000",
lineColor: "red"
}
]
},
"utc":true,
"timezone":-5,
"scale-x":{
"min-value":"1457101800000",
"max-value":"1457125200000",
"step":"30minute",
"transform":{
"type":"date",
"all":"%g:%i"
},
"label":{
"text":"Trading Day"
},
"item":{
"font-size":10
},
"max-items":14,
},
"scale-y":{
"values":"30:34:1",
"format":"$%v",
"label":{
"text":"Price"
},
"item":{
"font-size":10
}
},
"series": [
{
"values":[
[1457101800000,30.34],
[1457103600000,31.30],
[1457105400000,30.95],
[1457107200000,30.99],
[1457109000000,32.33],
[1457110800000,33.34],
[1457112600000,33.01],
[1457114400000,34],
[1457116200000,33.64],
[1457118000000,32.59],
[1457119800000,32.60],
[1457121600000,31.99],
[1457123400000,31.14],
[1457125200000,32.34],
]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: "100%"
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>