0

I have an area chart that show some values and datetime in tooltip like picture below :

This is the options i used :

const getConfig = data => ({
    chart: {
        type: 'area'
    },
    rangeSelector: {    
        selected: 1
    },
    title: {
        text: 'Highcharts',
    },
    xAxis: {
        tickInterval: 1000,
    },
    yAxis: {
        allowDecimals: false,
        labels: {
            format: '{value}'
        }
    },
    tooltip: {
        pointFormat: "{point.y:.0f}"
    },
    series: [
        {
            name: 'Data',
            data: data,
        },
    ],
});

I already tried this customize highcharts tooltip to show datetime, with this code :

tooltip: {
    formatter: function() {
        return  '<b>' + this.series.name +'</b><br/>' +
            Highcharts.dateFormat('%e - %b - %Y',
                                  new Date(this.x))
        + ' date, ' + this.y + ' Kg.';
    }
}

But still not change the lower tooltip (datetime), it just change the upper tooltip (122 value).

How to remove decimal value at tooltip so the time just like Sunday, Jul 29, 15:50:14?

Community
  • 1
  • 1
Ras
  • 991
  • 3
  • 13
  • 24
  • Possible duplicate of [customize highcharts tooltip to show datetime](https://stackoverflow.com/questions/17033752/customize-highcharts-tooltip-to-show-datetime) – Daniel Jul 29 '18 at 08:24
  • @Daniel with the link you provide, just change upper tooltip in my case just number `122` not the lower tooltip that show the datetime. Can you show me to change the lower tooltip datetime? – Ras Jul 29 '18 at 08:33

1 Answers1

1

Use dateTimeLabelFormats: 

tooltip: {
  dateTimeLabelFormats: {
    millisecond: "%A, %b %e, %H:%M:%S"
  }
}

Live demo: http://jsfiddle.net/BlackLabel/nbgzkwj3/

API: https://api.highcharts.com/highcharts/tooltip.dateTimeLabelFormats.millisecond

ppotaczek
  • 36,341
  • 2
  • 14
  • 24