Add formatter callback to headerFormat -> headerFormatter

[yhutter]

Expected behaviour

It would be great to have the ability to have an acutal callback for the headerFormat, similiar to the formatter or pointFormatter. This could be useful in the case when we want to do some customize transformation on the point.key etc. Currently I believe it is not possible to do so with headerFormat

Actual behaviour

Implement a headerFormatter callback which provides the arguments desribed in headerFormat to do some custom processing depending on the point etc.

[KacperMadej]

Hi @YahArt

Thank you for reporting the enhancement idea. It should be reported on our UserVoice: http://highcharts.uservoice.com/forums/55896-general instead of being here as a GitHub issue.

There is a tooltip event called headerFormatter that is fired when default header or footer formatter are being processed. You could use that to set up your own header (or footer) formatter.

            /**
             * Format the footer/header of the tooltip
             * #3397: abstraction to enable formatting of footer and header
             *
             * @private
             * @function Highcharts.Tooltip#tooltipFooterHeaderFormatter
             * @param {Highcharts.PointLabelObject} labelConfig
             * @param {boolean} [isFooter]
             * @return {string}
             */
            tooltipFooterHeaderFormatter: function (labelConfig, isFooter) {
                var footOrHead = isFooter ? 'footer' : 'header', series = labelConfig.series, tooltipOptions = series.tooltipOptions, xDateFormat = tooltipOptions.xDateFormat, xAxis = series.xAxis, isDateTime = (xAxis &&
                    xAxis.options.type === 'datetime' &&
                    isNumber(labelConfig.key)), formatString = tooltipOptions[footOrHead + 'Format'], evt = {
                    isFooter: isFooter,
                    labelConfig: labelConfig
                };
                H.fireEvent(this, 'headerFormatter', evt, function (e) {
                    // Guess the best date format based on the closest point distance
                    // (#568, #3418)
                    if (isDateTime && !xDateFormat) {
                        xDateFormat = this.getXDateFormat(labelConfig, tooltipOptions, xAxis);
                    }
                    // Insert the footer date format if any
                    if (isDateTime && xDateFormat) {
                        ((labelConfig.point && labelConfig.point.tooltipDateKeys) ||
                            ['key']).forEach(function (key) {
                            formatString = formatString.replace('{point.' + key + '}', '{point.' + key + ':' + xDateFormat + '}');
                        });
                    }
                    // Replace default header style with class name
                    if (series.chart.styledMode) {
                        formatString = this.styledModeFormat(formatString);
                    }
                    e.text = format(formatString, {
                        point: labelConfig,
                        series: series
                    }, this.chart.time);
                });
                return evt.text;
            },

Demo using this: https://jsfiddle.net/BlackLabel/vzqmb6f1/

Another option is to use tooltip's formatter and prepare full tooltip, so header included.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!