Hey,
I’m having some trouble getting Tooltip values to show up on my XYChart’s line series; here’s the JSON for the chart and a screenshot of what renders in the browser.
If I add bullets to my line series, then the property series[x].line.bullets[0].tooltip.text seems to work, but the Tooltips only appear when you hover over a bullet. I’d much rather have the values displayed no matter where the user places their cursor.
This user seemed to have Tooltips working, although they had a different issue.
{
"meta": {
"name": "XYChart"
},
"position": {
"basis": "375px",
"display": true,
"grow": 0,
"shrink": 1
},
"propConfig": {
"props.dataSources.data": {
"binding": {
"config": {
"aggregate": "MinMax",
"avoidScanClassValidation": true,
"dateRange": {
"mostRecent": "{view.custom.timeRange}",
"mostRecentUnits": "HOUR"
},
"ignoreBadQuality": false,
"polling": {
"enabled": false,
"rate": "1"
},
"preventInterpolation": false,
"returnFormat": "Wide",
"returnSize": {
"numRows": "500",
"type": "FIXED"
},
"tags": [
{
"aggregate": "Average",
"alias": "Top",
"path": "[default]Process Units/SCC 2/Status/Temperature/SCC Top Temperature"
},
{
"aggregate": "Average",
"alias": "Bottom",
"path": "[default]Process Units/SCC 2/Status/Temperature/SCC Bottom Temperature"
}
],
"valueFormat": "DATASET"
},
"type": "tag-history"
}
}
},
"props": {
"background": {
"opacity": 0
},
"cursor": {
"lineX": {
"stroke": {
"color": "#5C97E0",
"dashArray": "\u0027\u0027",
"opacity": 0.2,
"width": 6
}
},
"lineY": {
"enabled": false
},
"series": "Top"
},
"dataSources": {},
"enableTransitions": true,
"legend": {
"labels": {
"font": {
"color": "#B3B3B3"
}
}
},
"scrollBars": {
"horizontal": {
"enabled": false,
"series": "Top"
}
},
"series": [
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": null
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "data",
"x": "t_stamp",
"y": "Top"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "Top"
},
"line": {
"appearance": {
"bullets": [],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "#FA98FA",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"name": "Top",
"render": "line",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"visible": true,
"xAxis": "time",
"yAxis": "temperature",
"zIndex": 0
},
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"height": null,
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": null
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "data",
"x": "t_stamp",
"y": "Bottom"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "Bottom"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": false,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"name": "Bottom",
"render": "line",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"visible": true,
"xAxis": "time",
"yAxis": "temperature",
"zIndex": 0
}
],
"xAxes": [
{
"appearance": {
"font": {
"size": "",
"weight": 100
},
"grid": {
"color": "#1F1F1F",
"dashArray": "",
"minDistance": 60,
"opacity": 0.6,
"position": 0.5
},
"inside": false,
"labels": {
"color": "#E6E6E6",
"opacity": 1
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "hh:mm a",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "#BDBDBD",
"enabled": true,
"text": "Time"
},
"name": "time",
"render": "date",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#,###.##",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
],
"yAxes": [
{
"appearance": {
"font": {
"size": "",
"weight": 100
},
"grid": {
"color": "#000000",
"dashArray": "",
"minDistance": null,
"opacity": 0.6,
"position": 0.5
},
"inside": false,
"labels": {
"color": "#E6E6E6",
"opacity": 1
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "M/d/yyyy HH:mm:ss",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "#BDBDBD",
"enabled": true,
"text": "Temperature"
},
"name": "temperature",
"render": "value",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": false,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#,###.##",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
]
},
"type": "ia.chart.xy"
}
Thanks a bunch,
Ben
