CODEWITHSUNDEEP
javascriptjquery
Kamandsam
Kamandsam

Reputation: 35

How to change tooltip with jQuery highcharts

I'm trying to have my tooltips display my y value instead of the percentage they currently do. For example, when hovering over Yellow, the tooltip reads 22.6%. It should instead read 91.5 yellow skittles.

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: { text: 'Skittles By Color' },
        subtitle: { text: '15.4 oz (437 g) Bag' },
        tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Color %',
            data: [
                { name: 'Green', y: 64, sliced: true, selected: true, color: '#00ff00'}, 
                { name: 'Purple', y: 71, color: '#660066' },
                { name: 'Red', y: 88.0, color: '#dd0000' },
                { name: 'Orange', y: 91, color: '#ff6600' },
                { name: 'Yellow', y: 91.5, color: '#ffff00' }
            ]
        }]
    });
});

jsfiddle

Upvotes: 1

Views: 166

Answers (1)

ASGM
ASGM

Reputation: 11381

Do you see the tooltip section in your code? That's what you need to change:

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

...should be...

pointFormat: '<b>{point.y} skittles</b>'

As demonstrated here: http://jsfiddle.net/jpotLvt7/11/.

When you have problems like this in the future, I'd recommend looking in your code to see if there are any parts that have names relevant to your issue. In this case, it wasn't too hard to find. You wanted to change the tooltip text, and there was a tooltip { ... } part of your code.

Upvotes: 2

Related Questions