Value box backgrounds disappeared

Question

I have a mixed chart with value boxes with top-out placement. On all except the first value, the background color has disappeared from the value box. This was previously working fine in that the white background showed up behind all value boxes, and there have been no changes to the code so I'm at a loss as to why the background color suddenly disappeared. Below is my code showing the issue. Any help or direction 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>

Honora

Answer 1

Jeff on the ZingChart team here.

It seems like this issue is only happening when your chart output is set to 'canvas' in the render method. If you set output to 'svg' fixes the problem. I am not sure if this is something you have recently changed or not. It seems like this persists across our older builds as well.

We can put in a ticket internally to check to see why this issue is happening with canvas.

Thanks,

Piste

Ah, another developer did change the output from svg to canvas recently. Unfortunately, we need it to stay as canvas as we've written custom functionality to share an exported image of the graph over social media. We're making use of var imgData = zingchart.exec('zones', 'getimagedata', { format : 'png' }); along with zingchart.AJAXEXPORT = true; and zingchart.EXPORTURL = 'export.zingchart.com'; which only works with the canvas output. I'd greatly appreciate you putting in that ticket! – Honora

Is there another method available to get white backgrounds behind those vaule box values that I could use in the mean time? We're trying to launch the project with this particular graph in the next week. – Honora

In the new upcoming build we allow svg and this export functionality. Not just on canvas. That will be in the next week or so. – Jim

Additionally, to ensure your requests are seen and prioritized as a client appropriately questions should be sent to [email protected]. – Piste

Answer 2

In light of a new ZingChart release (v2.6.0) today, we have pushed your canvas change. Thanks for your patience and being a part of the ZingChart team.

Changelog here

demo here

Worn