Shayna Symons
Reputation: 451
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.
Upvotes: 1
Views: 209
Answers (2)
Adrian
Reputation: 51
The issue is the offset-y attribute set for the labels & the callout tip. It needs to be removed or set to zero. The new lib code is correct because scale-x has "placement": "opposite" so it is placed above (if you remove visible:false from items you will see).
Most likely the old code was not using the correct y position of the scale thats why you had to use offset-y to correct it.
Upvotes: 0
Jeff Frederich
Reputation: 286
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>Upvotes: 1
Related Questions
- Zing Chart X-axis are Labels are out of bound
- Cannot set property 'values' of undefined
- Value box backgrounds disappeared
- ZingChart bar chart doesn't show first string value from array
- ZingChart pie tooltip not displaying
- ZingChart X-axis labels showing as numbers instead of strings
- Defining 'step' attribute in Zingchart renders the graph unusable
- Zingchart dynamically changing axis label with Jquery
- Zingchart: can't get it working? Reference error: zingchart is not defined
- Labels on bar chart missing