Perspective XYChart, Tooltip on Line Series

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

Did you ever figure it out?

Any luck? :slight_smile:

No, I haven’t.