CODEWITHSUNDEEP
highcharts
ejain
ejain

Reputation: 3604

How to auto-format dates in custom tooltip formatter?

Highcharts does a great job auto-formatting dates both on the x-axis and in tooltips. Unfortunately I need a custom function to format my y-values, and /plotOptions/line/tooltip/pointFormat accepts only a format string and not a function, so I have to set /tooltip/formatter instead. How do I get hold of the formatted date (e.g. Oct'13 or 20. Oct) as shown on the x axis? I don't seem to have access to point.key from there, only the raw millis value.

http://jsfiddle.net/9Fke4/

Upvotes: 3

Views: 3030

Answers (4)

Jared Knipp
Jared Knipp

Reputation: 5950

FWIW, this was answered in a Highcharts issue on Github 

formatter: function() {
                var tooltip = this.series.chart.tooltip,
                    item = this.point.getLabelConfig(),
                    header = this.series.chart.tooltip.tooltipFooterHeaderFormatter(item);

                return header + this.y;
            }

Corresponding fiddle:

http://jsfiddle.net/9Fke4/12/

If you are using a shared series:

tooltip: {
        formatter: function (tooltip) {
          var header,
              s = [];

          $.each(this.points, function(i, point) {
            if(header == null) {
              var config = point.point.getLabelConfig();
              header = tooltip.tooltipFooterHeaderFormatter(config);
            }
            s.push(point.y);
          });

          return header + s.reverse().join('<br>');
        },
        shared: true
      }

Upvotes: 1

ejain
ejain

Reputation: 3604

The solution I ended up with is to pre-format the y-values and store them as part of the series data; the pre-formatted values can then be referenced from the tooltip headerFormat and pointFormat, where they can be used along with {point.key}, which contains the auto-formatted date (and which is not available when providing a custom tooltip formatter):

http://jsfiddle.net/uG3sv/

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can use dateFormat()

    tooltip: {
        formatter: function() {
           return '<b>' + Highcharts.dateFormat('%b\' %d',this.x) + ':</b> ' + this.y;
        }
    },

http://jsfiddle.net/9Fke4/1/

Upvotes: 1

Strikers
Strikers

Reputation: 4776

conver the raw milliseconds to a date object using 

var currentDate = new Date (tome in milliseconds)

in the tootip/formatter function you have defined.

this will give you good control over the date. you can use currentDate.getMonth(), getDate(), getDay(), etc methods to get the information you want from that date.

build a string with the above info and return.

I hope this will help you.

Upvotes: 0

Related Questions