Value field background faded

Question

I have a mixed chart with overhead value cells. On all but the first value, the background color has disappeared from the value field. This worked fine earlier, since a white background appeared behind all the value fields, and there were no changes in the code, so I don’t understand why the background color suddenly disappeared. Below my code shows the problem. Any help or guidance on how to fix this would be greatly appreciated.

var maxYValue = 60; var value1 = 40; var value2 = 15; var value3 = 34; var value4 = 14; var value5 = 20; var zones = { "type": "mixed", "font-family": "proxima_nova_rgregular", "title": { "text": "MINUTES IN ZONES", "font-family": "proxima_nova_rgregular", "background-color": "none", "font-color": "#39393d", "font-size": "22px", "adjustLayout": true }, "plot": { "borderRadius": "5px 5px 0 0", "bar-width": '50%', "animation": { "delay": 300, "effect": 11, "speed": "500", "method": "0", "sequence": "3", "z-index": 2 }, "value-box": { "placement": "top-out", "text": "%v", "decimals": 0, "font-color": "#35353b", "font-size": "14px", "alpha": 1, "background-color": "#ffffff", "padding": "5px 5px 0px 5px", "shadow": false, "z-index": 4 } }, "plotarea": { "border-left": "3px solid #39393d", "border-bottom": "3px solid #39393d", "padding-left": "3px", "margin": "dynamic", "background-color": "none" }, "tooltip": { "visible": false }, "scale-x": { "placement": "opposite", "labels":["Zone 1","Zone 2","Zone 3","Zone 4","Zone 5"], "line-width": 0, "tick": { "visible": false }, "guide": { "visible": false }, "item": { "offsetY": 25, "font-size": 12, "fontColor": 'black', "bold": true }, }, "scale-y": { "offsetEnd": 45, "max-value": maxYValue, "visible": false, "line-width": 0, "guide": { "visible": false } }, "series": [ { "type": "bar", "values": [ value1, value2, value3, value4, value5 ], "background-color": "#cdcccc", "z-index": 2, "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629'] }, { "type": "line", "line-color": "gray", "marker": { "backgroundColor":"white", "borderWidth": 2, "border-color": "#35353b", "visible": false, "rules":[ { "rule":" %node-index%3 == 1 ", "visible": true, "size": 7, "offset-y": -15 } ] }, "value-box": { "visible": 0 }, "values": [ [0, value1 + 2], [0, maxYValue], [0, null], [1, value2 + 2], [1, maxYValue], [1, null], [2, value3 + 2], [2, maxYValue], [2, null], [3, value4 + 2], [3, maxYValue], [3, null], [4, value5 + 2], [4, maxYValue], [4, null], ] } ] } zingchart.render({ id : 'zones', data : zones, height: "320", width: "100%", output : 'canvas' }); 

 <script src="https://cdn.zingchart.com/2.5.2/zingchart.min.js"></script> <div class="ctabprcci-chart zone-chart" id="zones"></div> 

Answer 1

Jeff on the ZingChart team here.

It seems that this problem only occurs when your chart output is set to “canvas” in the rendering method. If you set the output to 'svg', the problem will be solved. I'm not sure if this is what you recently changed or not. It looks like this holds true in our old builds.

We can deposit an internal ticket to check why this problem occurs with the canvas.

Thanks,

Answer 2

In light of the new version of ZingChart (v2.6.0) today, we pushed your canvas change. Thank you for your patience and participation in the ZingChart team.

List of changes

demo here