CODEWITHSUNDEEP
angularjshighcharts
Pooja Mgr
Pooja Mgr

Reputation: 23

Showing tooltip on right side of the column in a vertical bar chart

I have a highchart where I want the tooltip to hover on the right side of the column (vertical bar chart), because currently the top of the chart do not have enough space, so it displays at the bottom of the column.

FYI - I have gone through various sites and found that most of the example are given for line chart where position can be done left or right, not particularly for vertical bar chart where by default cursor position are top or down

Please refer this image 

var tooltip = {
                'formatter': function() {
                    var name = this.series.name;
                    if (_.isObject(name)) { // jshint ignore:line
                        name = name.last + ', ' + name.first;
                    }
                    var key = this.key;
                    if (_.isArray(this.key)) { // jshint ignore:line
                        //Multi people search object
                        key = '';
                        for (var i = 0; i < this.key.length; i++) {
                            key += this.key[i].last + ', ' + this.key[i].first + '<br>';
                        }
                    } else if (_.isObject(this.key)) { // jshint ignore:line
                        key = key.last + ', ' + key.first;
                    }
                    var val = chartUtility.handleAddingThousandSeparator(sourcedata, chartUtility.handleRoundingSingleValue(sourcedata, this.point.y));
                    val = chartUtility.prefixSuffix(sourcedata, this.point, val);
                    return '<strong>' + key + '</strong><table>' + '<tr><td style="color: ' + this.series.color + '"> :' + name + ': </td>' + '<td style="text-align: right"><b>' + val + '</b></td></tr>';
                }
            };`

Upvotes: 0

Views: 1141

Answers (1)

Core972
Core972

Reputation: 4114

Using the positionner options you could do this :

tooltip: {
positioner: function(labelWidth, labelHeight, point) {
  if (point.plotY < 55) { // for highest columns
    return {
      x: point.plotX + 100,
      y: point.plotY + 30
    };
  } else { // others columns
    return {
      x: point.plotX,
      y: point.plotY - 20
    };
  }
},
},

Fiddle

Upvotes: 1

Related Questions