1

Link to JSFiddle with question content marked by comments: https://jsfiddle.net/z1q7aqo3/ Specifically, the part which needs filling in is

'tooltip': {
    'formatter': function(){
        var output = '<strong>' + this.y + '</strong>';
        var sorted = this.points.sort(function(a, b){
            if (a.y == b.y){
                 return 0;
            }
            return a.y < b.y ? 1 : -1;
        });

        sorted.forEach(function(point, index){
            var marker = '';
            /* 
                TODO: How do I determine what symbol is used for the marker?
            */
            output += '<br /><span style="color: ' + point.series.color + '">' + marker + '</span> ' + point.series.name + ': ' + point.y;
        });
        return output;
    },
    'shared': true
}

I have a line chart with a number of series. On mouseover, the tooltip displays all the values of all of them, in sorted order. This part is done and can be seen in the JSFiddle. My question is, I want each the text for each series in the tooltip to include the marker symbol used for that series, styled in the color of the series. The color styling is also complete and can be seen in the JSFiddle, but how do I get the marker symbol?

zojwek
  • 121
  • 9

1 Answers1

0

Modifying form earlier Answer it is for individual series tooltip. Here modified to shared tooltip

Fiddle demo

Highcharts.chart('container', {
  'title': {
    'text': 'Random Chart'
  },
  'tooltip': {
    'formatter': function(){
        var output = '<strong>' + this.y + '</strong>';
      var sorted = this.points.sort(function(a, b){
        if (a.y == b.y){
            return 0;
                }
        return a.y < b.y ? 1 : -1;
            });

      sorted.forEach(function(point, index){
        var marker = '';

                if ( point.point.graphic && point.point.graphic.symbolName ) {
                    switch ( point.point.graphic.symbolName ) {
                        case 'circle':
                            marker = '●';
                            break;
                        case 'diamond':
                            marker = '♦';
                            break;
                        case 'square':
                            marker = '■';
                            break;
                        case 'triangle':
                            marker = '▲';
                            break;
                        case 'triangle-down':
                            marker = '▼';
                            break;
                    }
                }
        /* 
            TODO: How do I determine what symbol is used for the marker?
        */
        output += '<br /><span style="color: ' + point.series.color + '">' + marker + '</span> ' + point.series.name + ': ' + point.y;
      });
      return output;
        },
    'shared': true
    },
  'series': [{
    'name': 'Series 1', 
    'data': [1, 3, 7, 19, 11, 27, 8, 15]
  }, {
    'name': 'Series 2', 
    'data': [2, 1, 8, 12, 14, 20, 9, 10]
  }]
});
Community
  • 1
  • 1
Deep 3015
  • 9,929
  • 5
  • 30
  • 54
  • Oh it's point.point! No wonder I couldn't get the graphic data, I was using point alone haha. Thanks! – zojwek Mar 10 '17 at 21:12
  • An addendum to it though, if I disable markers so that now the marker only appears as a result of the shared tooltip, point.point.graphics is no longer set. How then would I retrieve the marker symbol? – zojwek Mar 10 '17 at 22:54