CODEWITHSUNDEEP
highcharts
Aximili
Aximili

Reputation: 29474

How to show xAxis label in tooltip in a Highcharts area chart?

I am using xAxis labels (not categories) to remove left/right paddings.

    xAxis: {
        //categories: data.categories
        labels: {
            formatter: function () {
                return cat[this.value];
            }
        },
        minPadding: 0,
        maxPadding: 0
    },

In the tooltip, {point.x} shows me the number (eg. "0"), but I want the label (eg. "Jan").

    tooltip: {
        shared: true,
        useHTML: true,
            pointFormat: "{series.name}: {point.y:.0f} ({point.percentage:.1f}%)<br />",
            headerFormat: "<b>{point.x}</b><br><br>",
    },

How can I make it show the label?

http://jsfiddle.net/9tgjf82e/

Upvotes: 1

Views: 4223

Answers (2)

morganfree
morganfree

Reputation: 12472

You need to associate points with their names, so you need points in the format [name, y]

Then you can access point's name via point.key in the headerFormat.

example: http://jsfiddle.net/9tgjf82e/4/

Upvotes: 2

hurricane
hurricane

Reputation: 6724

You can use point.key in header format.

API Doc

The point.key variable contains the category name, x value or datetime string depending on the type of axis. For datetime axes, the point.key date format can be set using tooltip.xDateFormat.

But you need to define your xAxis->categories.

xAxis: {
    categories : cat,
    labels: {
        formatter: function () {
            return cat[this.value];
         }
    }
},


tooltip: {
    shared: true,
    useHTML: true,
    pointFormat: "{series.name}: {point.y:.0f} ({point.percentage:.1f}%)<br />",
    headerFormat: "<b>{point.key}</b><br><br>",
},

Updated Fiddle

Upvotes: 0

Related Questions