javascripthighchartshighcharts-gantt

How to translate the "Start" and "End" label in the tooltip of a Highcharts Gantt?


The tooltip in a Highcharts Gantt show the start and end date of the hovered task, but I'm not able to translate the prefix used ("Start" and "End"):

tootip example

There is no options in Highcharts.lang for these text.


Solution

  • That is caused by the default pointFormatter function:

                if (!milestone) {
                    retVal += 'Start: ' + start + '<br/>';
                    retVal += 'End: ' + end + '<br/>';
                } else {
                    retVal += start + '<br/>';
                }
    

    Source code: https://github.com/highcharts/highcharts/blob/master/ts/Series/Gantt/GanttSeries.ts#L116

    As a solution you can implement your own pointFormatter, for example:

        tooltip: {
            pointFormatter: function() {
                var point = this,
                    H = Highcharts,
                    series = point.series,
                    xAxis = series.xAxis,
                    startOfWeek = xAxis.options.startOfWeek,
                    formats = series.tooltipOptions.dateTimeLabelFormats,
                    tooltip = series.chart.tooltip,
                    ttOptions = series.tooltipOptions,
                    format = ttOptions.xDateFormat,
                    returnVal = '<b>' + (point.name || point.yCategory) + '</b>',
                    start,
                    end;
    
                if (!format) {
                    format = H.splat(tooltip.getDateFormat(xAxis.closestPointRange, point.start, startOfWeek, formats))[0];
                }
    
                start = series.chart.time.dateFormat(format, point.start);
                end = series.chart.time.dateFormat(format, point.end);
    
                returnVal += '<br/>';
                returnVal += 'A1: ' + start + '<br/>';
                returnVal += 'A2: ' + end + '<br/>';
    
                return returnVal;
            }
        }
    

    Live demo: https://jsfiddle.net/BlackLabel/a839yLsd/

    API Reference: https://api.highcharts.com/gantt/tooltip.pointFormatter