CODEWITHSUNDEEP
jqueryhighcharts
RONE
RONE

Reputation: 5485

How to remove default Hover text and display the custom text title on hover Donut chart Highcharts

I have a donut chart created, i have a problem,

  1. Shows the inner text titles in two lines for 'meternity :84'.
  2. When i hover/mouse over the chart the titles are not displaying as excepted. Shows text like 'Series 2' ex: 'Approved Series 2 :84' but needed is 'Approved :84'

I tried using formatter option. but no luck,

Can you guys, please have a look into this and help me out Link: 

[http://jsfiddle.net/XyQzR/1/][1]

Thanks in advance

Upvotes: 0

Views: 2127

Answers (2)

SteveP
SteveP

Reputation: 19103

You need to customise the tooltip. An example of what you want is as follows:

        tooltip: {
            valueSuffix: '',
            formatter: function() {
                return this.point.name + " :" + this.point.y;   
            }
        }

http://jsfiddle.net/cUd5L/

As mentioned by another poster, the documentation is pretty good on this stuff, although it doesn't seem to talk much about drilldown objects.

Upvotes: 1

MatRt
MatRt

Reputation: 3534

If you want to have control on the display, you just have to add a callback for the tooltip configuration section.

Modify your tooltip section like this:

tooltip: {
    valueSuffix: '',
    formatter: function() {
       console.debug(this.point);
       return this.point.y;
    }
}

And you will only display the value of the point object (assuming this is what you want to display).

I added a console.debug to show you the content of the point object.

Here is the working example: highcharts

And the documentation page about tooltip : tooltip on highcharts

The documentation of this library is very big but it is a very good documentation (well documented with good examples), so you should be patient and read the documentation (we are not supposed to read it for you ;) )

Upvotes: 2

Related Questions