0

I have a graph with timeseries data that looks something like this.

enter image description here

Now, in our data the y-value of 5 indicates a failure in the system, and as a result I would like the second line of the tooltip on my graph to be replaced by something like System failure on every point equal to 5. I know that the structure will be something like 

tooltip : {
   formatter: function() {
      var tooltip;
      if (this.y == 5) { 
         tooltip = "specification with system failure"
      } else {
         tooltip =  "regular specification"
      }
      return tooltip;
   }
}

and I've battled with the date-formatting enough (using Highcharts' date formatting as in the example here) to get the first line looking reasonable, however I am now struggling to also get the chart color circle and second line looking appropriate, as outlined in this question.

With a bit more work I'm sure I can get something looking okay, but this has begged the question - is there a default formatting specification (or collection of them) for Highcharts which I can reference/modify for things like this and put in a formatter function?

I'd just resign myself to building my own tooltip which looks a bit different, but there are a collection of graphs together on the same page and I think it is strange if there are any noticeable differences in the tooltips besides this, so then I'd have to change them all to my customized tooltip.

Community
  • 1
  • 1
Eric Hansen
  • 1,749
  • 2
  • 19
  • 39

1 Answers1

1

The default text for a tooltip is specified in the offical API:

Body of tooltip, pointFormat

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

Header of tooltip, headerFormat

<span style="font-size: 10px">{point.key}</span><br/>

By default, a footer of tooltip is an empty string.

To programmaticaly achieve the same result - without building a string - you can use defaultFormatter() inside the formatter.

formatter: function (tooltip) {
      return tooltip.defaultFormatter.call(this, tooltip);
}

The result will be an array of a header string, body string and footer string.

Array[3]
0: "<span style="font-size: 10px">Thursday, Jun  3, 1971</span><br/>"
1: "<span style="color:#7cb5ec">●</span> Series 1: <b>0</b><br/>"
2: ""

Live example

http://jsfiddle.net/zf3px47d/

morganfree
  • 12,254
  • 1
  • 14
  • 21