Menu
I'm using a ZingChart with AngularJS.
I have a simple chart, but I would like my plot to be red if it's in the past (if the x-scale date < current Date).
I found out that I can set some certain rules to
"plot":{
"rules":[
{
"rule":"%v 20 && %v < 30",
"line-color":"#f93",
"line-width":"8",
"line-style":"dashed"
},
]
Which is going change css if the plot values are between 20-30. My question is -> How can I change plot background color DEPENDING on the X-scale value? I am not able to refernce x-scale propery on plot property..
247
You would be looking for the %scale-key-text token instead of simply the %v. %scale-key-text will target the scale-x axis. http://www.zingchart.com/docs/basic-elements/zingchart-tokens/
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], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
[1457103600000,31.30], //10:00 a.m.
[1457105400000,30.95], //10:30 a.m.
[1457107200000,30.99], //11:00 a.m.
[1457109000000,32.33], //11:30 a.m.
[1457110800000,33.34], //12:00 p.m.
[1457112600000,33.01], //12:30 p.m.
[1457114400000,34], //1:00 p.m.
[1457116200000,33.64], //1:30 p.m.
[1457118000000,32.59], //2:00 p.m.
[1457119800000,32.60], //2:30 p.m.
[1457121600000,31.99], //3:00 p.m.
[1457123400000,31.14], //3:30 p.m.
[1457125200000,32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
]
}
]
};
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
