CODEWITHSUNDEEP
javascripthighcharts
ankur
ankur

Reputation: 587

different tooltip than x-axis category text - highcharts

I am implementing the highcharts api. highcharts.com

I have to implement a different tooltip than the actual 'x-axis/y-axis category text'. This is needed as at times the x axis category text is too large and i want to parse it to 5-10 characters but i want to show the full text in the tooltip.

fiddle example : highchart sample fiddle

code:

$(function () {

$('#container').highcharts({

    chart: {
    },

    xAxis: {
        categories: ['The weather is so good in January', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    tooltip: {
        valueDecimals: 2,
        valuePrefix: '$',
        valueSuffix: ' USD'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});
});

In the above fiddle : I want to show "Jan" in the axis text and "The weather is so good in January" in the tooltip.

Thanks in advance

Upvotes: 2

Views: 3271

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

I advice to prepare shorter solution, use "short" name of category in categoreis array, but full name keep as additional paramter in the point object.

tooltip: {
        formatter: function () {
                console.log(this);
            var txt = 'y :' + this.y + ' short x: '+ this.key;

            if(this.point.fullCategory)
                txt += this.point.fullCategory;


            return txt;
        }

    },

See the example: http://jsfiddle.net/4Nk87/1/

Upvotes: 4

Related Questions