CODEWITHSUNDEEP
highchartstooltipdatetime-format
Dev001
Dev001

Reputation: 256

Highcharts tooltip date format when using pointFormat

hi i am working on highcharts with net transactions on y-axis and type datetime on x-axis. i have shown month and date on x-axis point label as (jan 2016) and want to show the same date format on tooltip. but its showing full date with day as well like "Monday, jan 1, 2016.

here is my js code.

tooltip: {
        headerFormat: '<span style="font-size:10px">{point.x:%Y-%m}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0;font-size:11px;">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:,.0f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },

Thanks for any help

Upvotes: 3

Views: 5798

Answers (3)

Gil Cruz
Gil Cruz

Reputation: 21

You should modify the tooltip header format

tooltip: {    
    xDateFormat: '%b %Y'
}

Or if you want to modify the whole html

tooltip: {    
    headerFormat: '<b>{point.key:%b \'%y}</b><br>'
}

Upvotes: 1

andrepaulo
andrepaulo

Reputation: 816

Just change your point.X: format string from {point.x:%Y-%m} to {point.x:%b-%Y} as shown bellow

tooltip: {
        headerFormat: '<span style="font-size:10px">{point.x:%b-%Y}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0;font-size:11px;">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:,.0f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },

Upvotes: 7

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

use html in tooltip and format using dateFormat

Highcharts.dateFormat(%Y-%m,this.x)

Upvotes: 2

Related Questions