zingchart
ZingChart Labels disappeared when updating script to 2.5.2
I updated our instance of the ZingChart script to version 2.5.2 today and doing so caused labels to disappear from a chart where they previously showed. I'm not sure if it's an issue with my JSON that just managed not to throw any errors in the previous version of ZingChart or if it's a bug with the current release.
Before:
After:
My JSON:
var maxYValue = 60;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;
var zones_1 = {
"type": "mixed",
"font-family": "proxima_nova_rgregular",
"title": {
"text": "MINUTES <b>IN ZONES</b>",
"font-family": "proxima_nova_rgregular",
"background-color": "none",
"font-color": "#39393d",
"font-size": "22px",
"adjustLayout": true,
"padding-bottom": 50
},
"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,
"backgroundColor": "#ffffff",
"padding": "5px 5px 0px 5px",
"shadow": false
}
},
"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",
"line-width": 0,
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"visible": false
},
},
"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": "grey",
"marker": { "visible": 0 },
"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],
]
}
],
"labels": [
{
"text": "Zone 1",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=0',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 2",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=1',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 3",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=2',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 4",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=3',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
},
{
"text": "Zone 5",
"font-size": "13px",
"padding": "10px 5px",
"borderWidth": 1,
"borderColor": "#ffffff",
"backgroundColor": "#ffffff",
"callout": true,
"calloutWidth": 0,
"calloutHeight": 5,
'hook': 'scale:name=scale-x,index=4',
'offset-y': -200,
"calloutTip": {
'offset-y': -200,
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#35353b",
"size": 7,
"shadow": false
}
}
],
}Any help would be greatly appreciated. I would prefer to keep the most updated version of the script but really need those labels back.
Solution
I can't speak to exactly what the cause of your issue is between builds at the moment but our team will look into it. I did however look at your JSON and I think you can get the output you are looking for in an easier way. I have included an updated chart config below which does work on the newest build.
Full disclosure on the ZingChart team.
var maxYValue = 60;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;
var myConfig ={
"type": "mixed",
"font-family": "proxima_nova_rgregular",
"title": {
"text": "MINUTES <b>IN ZONES</b>",
"font-family": "proxima_nova_rgregular",
"background-color": "none",
"font-color": "#39393d",
"font-size": "22px",
"adjustLayout": true,
"padding-bottom": 50
},
"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,
"backgroundColor": "#ffffff",
"padding": "5px 5px 0px 5px",
"shadow": false
}
},
"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"],//set zone label here. Much easier than labals:[]
"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": 3,
"borderColor":"gray",
"visible": false,
"rules":[//create marker which is always at the top of line
{
'rule':" %node-index%3 == 1 ",
visible: true,
size: 10
}
]
},
"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: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<!--Inject End-->
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>