Geek Answers Handbook

ZingChart change CSS plot depending on X-Scale

I am using ZingChart with AngularJS.

I have a simple chart, but I would like my chart to be red if it was in the past (if the date is x-scale <current date).

I found out that I can set some rules for

"plot":{ "rules":[ { "rule":"%v 20 && %v < 30", "line-color":"#f93", "line-width":"8", "line-style":"dashed" }, ]

What happens with a css change if the graph values ​​are between 20-30. My question is → How can I change the background color of the DEPENDENCE plot for the X-scale value? I cannot refer to the x-scale property of the plot property.

+6
source share
1 answer

You would look for the% scale-key-text marker instead of just% v. % scale-key-text will aim at 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 am EST (which is 14:30 in GMT) [1457103600000,31.30], //10:00 am [1457105400000,30.95], //10:30 am [1457107200000,30.99], //11:00 am [1457109000000,32.33], //11:30 am [1457110800000,33.34], //12:00 pm [1457112600000,33.01], //12:30 pm [1457114400000,34], //1:00 pm [1457116200000,33.64], //1:30 pm [1457118000000,32.59], //2:00 pm [1457119800000,32.60], //2:30 pm [1457121600000,31.99], //3:00 pm [1457123400000,31.14], //3:30 pm [1457125200000,32.34], //at 4:00 pm 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>
+7
source

More articles:


All Articles