Ira Klotzko
Reputation: 1
Zingchart not showing crosshair plot-area guide-labels for series with only one point
I have a multiple series (time) line chart. I define crosshair-x plot-area guide-labels on the individual series. If a series has more than one data element (point) the plot-area guide-labels for all points in that series display fine. If a series has only one point that specific series fails to show the plot-area guide labels. I am using the latest Chrome browser (63.0.3239.132)
I have included the config below for the errant chart, but have also set up 2 examples on codepen.
Example with guide-labels not showing for the 1-point series https://codepen.io/iklotzko/pen/QQqEmp
Example with guide-labels showing for both 2-point series https://codepen.io/iklotzko/pen/bLoeqp
The only difference between the above examples is S2 in the errant example has just 1 point.
The config for the errant example Series 1 (S1) has 2 points, Series 2 (S2) has 1 point. The guide labels for S2 fail to show in the plot area.
var myConfig =
{
"type":"line",
"legend":{
"layout":"1x5",
"shadow":false,
"adjustLayout":true,
"margin-bottom":"17px",
"margin-top":"0",
"padding":"0",
"align":"center",
"background-color":"none",
"vertical-align":"bottom",
"border-top":"0 none",
"border-right":"0 none",
"border-bottom":"0 none",
"border-left":"0 none"
},
"labels":{
"visible":false
},
"marker":{
"border-width":0,
"border-color":"none",
"shadow":false
},
"plot":{
"line-width":1
},
"title":{
"adjustLayout":true,
"text":"S2-2pts, S2-pt",
"font-size":12,
"margin-top":2,
"padding":0,
"height":"10px",
"bold":true,
"border":"0 none",
"font-color":"#333",
"background-color":"white"
},
"subtitle":{
"text":"subtitle",
"color":"#444",
"font-style":"italic",
"font-size":12,
"margin":0,
"offset-y":-17,
"padding":0,
"height":"18px",
"bold":false
},
"plotarea":{
"margin":"dynamic 50 dynamic dynamic",
"adjust-layout":true
},
"scaleX":{
"items-overlap":true,
"values":[1516942800000,1519362000000,1522382400000],
"transform":{
"type":"date",
"all":"%d-%M-%Y",
"item":{
"visible":false
}
},
"item":{
"angle":-45,
"font-size":10
}
},
"scaleY":{
"guide":{
"lineStyle":"solid"
},
"format":"$%v",
"thousands-separator":",",
"label":{
"text":"Amount"
}
},
"tooltip":{
"visible":false
},
"crosshairX":{
"lineColor":"#000",
"plotLabel":{
"exact":false,
"multiple":true,
"font-color":"white",
"border-radius":"5px",
"text":"%t: $%v<br />%data-custom (%k)",
"thousands-separator":",",
"decimals":2
},
"scaleLabel":{
"borderRadius":2,
"format":"$%v",
"thousands-separator":",",
"decimals":2
},
"marker":{
"size":5,
"type":"circle",
"backgroundColor":"transparent",
"border-color":"#888",
"border-width":"6px",
"border-alpha":0.4
}
},
"series":[
{
"values":[[1517893200000,19480], [1522382400000, 30000]],
"data-custom":["first-point", "second-point"],
"text":"S1",
"marker":{
"type":"star5",
"background-color":"blue",
"border-width":0,
"border-color":"none",
"size":6,
"shadow":false
},
"legend-marker":{
"type":"star5",
"backgroundColor":"blue",
"shadow":false,
"show-line":true,
"size":4,
"border-width":0,
"border-color":"none"
},
"guide-label":{
"background-color":"blue",
"border-color":"blue"
},
"lineColor":"blue"
},
{
"values":[],
"data-custom":[],
"text":"Empty Series",
"marker":{
"type":"diamond",
"background-color":"black",
"border-width":0,
"border-color":"none",
"size":6,
"shadow":false
},
"legend-marker":{
"type":"diamond",
"backgroundColor":"black",
"shadow":false,
"show-line":true,
"size":4,
"border-width":0,
"border-color":"none"
},
"guide-label":{
"background-color":"black",
"border-color":"black"
},
"lineColor":"black"
},
{
"values":[],
"data-custom":[],
"text":"Empty-Series",
"marker":{
"type":"square",
"background-color":"brown",
"border-width":0,
"border-color":"none",
"size":6,
"shadow":false
},
"legend-marker":{
"type":"square",
"backgroundColor":"brown",
"shadow":false,
"show-line":true,
"size":4,
"border-width":0,
"border-color":"none"
},
"guide-label":{
"background-color":"brown",
"border-color":"brown"
},
"lineColor":"brown"
},
{
"values":[],
"data-custom":[],
"text":"Empty-Series",
"marker":{
"type":"triangle",
"background-color":"green",
"border-width":0,
"border-color":"none",
"size":6,
"shadow":false
},
"legend-marker":{
"type":"triangle",
"backgroundColor":"green",
"shadow":false,
"show-line":true,
"size":4,
"border-width":0,
"border-color":"none"
},
"guide-label":{
"background-color":"green",
"border-color":"green"
},
"lineColor":"green"
},
{
"values":[[1517893200000,0]],
"data-custom":["first-point"],
"text":"S2",
"marker":{
"type":"circle",
"background-color":"red",
"border-width":0,
"border-color":"none",
"size":6,
"shadow":false
},
"legend-marker":{
"type":"circle",
"backgroundColor":"red",
"shadow":false,
"show-line":true,
"size":4,
"border-width":0,
"border-color":"none"
},
"guide-label":{
"background-color":"red",
"border-color":"red"
},
"lineColor":"red"
}
],
"id":"myChart"
};
Upvotes: 0
Views: 234
Answers (1)
Ira Klotzko
Reputation: 1
I emailed ZingChart and they confirmed this is a bug in 2.6.3, they fixed the bug and will make it available in their next release, presumably 2.6.4 or 2.7.0
Upvotes: 0
Related Questions
- highcharter xaxis crosshair tooltip labeling all series datapoints
- Highchart - give to series-marker other zIndex then to the series-lines
- Crosshair feature of Zing Chart is leak CPU
- ZingChart bar chart doesn't show first string value from array
- Highchart - always show crosshair
- ZingChart Series value box not showing despite identical data and options to a series value box that does show on horizontal bar chart
- ZingChart single series bar chart group labels
- Zingchart - some points are hidden in the graph
- Crosshair-x won't display on line chart
- zingchart setseriesdata visibility issue