Highcharts (grouped_category styling) and tooltip formatter not working

Question

I am trying yet to build a complex dashboard which displays a project phases options (grouped by subphase) and the milestone for each.

The problems I am having are as below:

1. When I hover over the Milestone (gold diamond - scatter chart), I need to display a specific value which is the Milestone name (neither x or y axis). I used formatter function but still it is not working (as if it is not firing at the first place).

2. The other section is related to styling of the groups. I need to apply some background colors to the group, adjust the length of the groups (now the text doesn't fit especially on lower screen resolutions). I didn't find a way for both.

I am posting all the code as I expect there will be some wrong in it. So appreciate any help.

<script type="text/javascript">
$(function () {
        $('#container').highcharts({

            chart: {
                type: 'columnrange',
    inverted: true
            },
            title: {
                text: 'Project Name'
            },
   subtitle: {
    text: 'Phasen und Meilensteine des Vergabeverfahrens'
   },
            xAxis: {
    labels: {    
     groupedOptions: [{
      
      style: {
       'fontSize': '1.2em',
       'backgroundColor' : '#f7f7f7',
       color: 'red'
      }
     }, {
      rotation: 0, // rotate labels for a 2nd-level
      align: 'left'
     }],
     rotation: 0 // 0-level options aren't changed, use them as always
    },
                categories: [{
     name: 'Phase 1<br/>Vorbereitung',
     categories: ["some test text ", 
     "some test text ", 
     "some test text ",
     "some test text "]
    }, {
     name: "Phase 2<br/>Teilnahmewettbewerb",
     categories: ["some test text ", 
     "some test text ", 
     "some test text ",
     "some test text "]
    }, {
     name: "Phase 3<br/>Angebotsphase",
     categories: ["some test text ", 
     "some test text ", 
     "some test text ",
     "some test text "]
    }, {
     name: "Phase 4<br/>Vergabeentscheidung",
     categories: ["some test text ", 
     "some test text ", 
     "some test text ",
     "some test text "]
    }]
            },

            yAxis: {
                type: 'datetime',
    floor: Date.UTC(2014,  9, 1),
    ceiling: Date.UTC(2015,  12, 1),
    dateTimeLabelFormats: { 
     month: '%b %Y'
    },
    labels: {
                    formatter: function () {
                        return Highcharts.dateFormat('%b %Y', this.value);
                    }
                }
            },
            legend: {
                enabled: true
            },
            plotOptions: {
    series: {
     pointWidth: 34,
     groupPadding: 0     
    }
   },
   series: [{
    type: 'columnrange',
    grouping: false,
    pointPadding: 0,
                name: 'Phase 1- Vorbereitung',
                data: [
                ["some test text ", Date.UTC(2014,  9, 1), Date.UTC(2014,  12, 1)],
                ["some test text ", Date.UTC(2014,  11, 1), Date.UTC(2015,  2, 1)],
                ["some test text ", Date.UTC(2014,  10, 1), Date.UTC(2014,  12, 15) ],
    ["some test text ", Date.UTC(2014,  12, 16), Date.UTC(2015,  1, 15)],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null]
            ],
   tooltip: {
    headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
     pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
   }},
   {
    type: 'columnrange',
                name: 'Phase 2 - Teilnahmewettbewerb',
    grouping: false,
    pointPadding: 0,
                data: [
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
                ["some test text ", Date.UTC(2015,  1, 16), Date.UTC(2015,  2, 15)],
                ["some test text ",  Date.UTC(2015,  1, 16), Date.UTC(2015,  2, 15)],
    ["some test text ", Date.UTC(2015,  2, 16), Date.UTC(2015,  3, 15)],
    ["some test text ", Date.UTC(2015,  3, 1), Date.UTC(2015,  3, 15)],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null]
            ],
   tooltip: {
    headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
    pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
   }},
   {
    type: 'columnrange',
                name: 'Phase 3 - Angebotsphase',
    grouping: false,
    pointPadding: 0,
    
                data: [
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
                [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    ["some test text ", Date.UTC(2014,  10, 1), Date.UTC(2015,  2, 1)],
    ["some test text ", Date.UTC(2015,  2, 1), Date.UTC(2015,  3, 15)],
    ["some test text ", Date.UTC(2015,  3, 16), Date.UTC(2015,  4, 1)],
    ["some test text ", Date.UTC(2015,  4, 16), Date.UTC(2015,  5, 15)],
    [null, null, null],
    [null, null, null],
    [null, null, null]
    
            ],
   tooltip: {
    headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
     pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
   }},
   {
    type: 'columnrange',
                name: 'Phase 4 - Vergabeentscheidung',
    grouping: false,
    pointPadding: 0,
                data: [
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
                [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    [null, null, null],
    ["some test text ", Date.UTC(2015,  5, 1), Date.UTC(2015,  5, 15)],
    ["some test text ", Date.UTC(2015,  4, 16), Date.UTC(2015,  6, 1)],
    ["some test text ", Date.UTC(2015,  5, 16), Date.UTC(2015,  6, 15)]
            ],
   tooltip: {
    headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>',
     pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}'
   }},
   {
    type: 'scatter',
                name: 'Meilensteine',
    color: 'gold',
    marker: {
     symbol: 'diamond',
     radius: 10
    },
    grouping: false,
    pointPadding: 0,

                data: [
    {y: Date.UTC(2014,  9, 1), value: "M1 Projektstart"},
    {y: Date.UTC(2014,  12, 15),  value:"M2.1 Finalisierung Dokumente TN-Wettbewerb"},
    {y: Date.UTC(2015,  1, 1),  value:"M3.1"},
                {y: Date.UTC(2015,  1, 15),  value:"M2"},
    {y: Date.UTC(2015,  2, 15),  value:"M5"},
    {y: Date.UTC(2015,  3, 1),  value:"M3"},
    {y: Date.UTC(2015,  3, 16),  value:"M4"},
    {y: Date.UTC(2015,  4, 1),  value:"M5.1"},
    {y: Date.UTC(2015,  3, 1), value:"M5"},
    {y: Date.UTC(2015,  4, 1),  value:"M7"},
    {y: Date.UTC(2015,  5, 1),  value:"M8"}
    
            ],
   tooltip: {
   
    formatter: function() {
     //return alert(this);
     return 'dump stuff not working';
     //return 'The value for <b>' + this.y + '</b> is <b>' + this.value + '</b>, in series '+ this.series.name;
    }
    
   }}
   ],
   exporting: {
    sourceWidth: 2000,
    sourceHeight: 1200
   }
        });
});
  </script>

Answer 1

1) There's not such option like series.tooltip.formatter. Only series.tooltip.pointFormat or other formats. For example:

tooltip: {
  pointFormat: "{point.value}"
}

Example: http://jsfiddle.net/TFhd7/367/

2) I think this is connected to the design changes between Highcharts 2.x and 4.x. See more in this ticket. And example after setting labels.x to -5: http://jsfiddle.net/TFhd7/368/

Regarding background - it's not supported in the plugin, you need to render that background on your own. I suggest to use chart.renderer. See API.