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>

score 9 · Answer 1 · answered Apr 05 '17 at 23:44

9

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

answered Apr 05 '17 at 23:44

Derek Fletes

136
5

score 4 · Accepted Answer · answered Mar 14 '17 at 21:48

4

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,

answered Mar 14 '17 at 21:48

Jeff Frederich

286
1
3

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 = 'http://export.zingchart.com/'; which only works with the canvas output. I'd greatly appreciate you putting in that ticket! – Shayna Symons Mar 14 '17 at 23:50
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. – Shayna Symons Mar 15 '17 at 14:25
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. – nardecky Mar 15 '17 at 16:53
Additionally, to ensure your requests are seen and prioritized as a client appropriately questions should be sent to support@zingchart.com. – Jeff Frederich Mar 16 '17 at 17:38

Value box backgrounds disappeared

2 Answers2