Highchairs Tooltip not showing accurate date time

Question

I have a written a stats chart using highchairs.com for the daily visits and installs. I want to show the tooltip with Datetime and Names with total values for each series when hover or on click event.

Highcharts tooltip shared Data shared output is displaying with names but not the date and time correctly when you mouseover on the markers.

What I'm doing wrong?

The code I have written is on jsfiddle as well.

$(function () {
$('#campaign-container').highcharts({
    chart: {
        type: 'areaspline',
    },
    title: {
        text: null
    },
    credits: {
        enabled: false,
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day:"%b %e, %Y",
        },
        tickInterval: 2,
        allowDecimals: false,
        labels: {
            formatter: function () {
                return this.value; // clean, unformatted number for year
            }
        }
    },
    yAxis: {
        min: 0,
        max: 3000,
        tickInterval: 1000,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: {
        shared: true
   },
    legend: {
        align: 'left',
        verticalAlign: 'bottom',
        layout: 'horizontal',
        x: 0,
        y: 0
    },
    plotOptions: {
        areaspline: {
                lineWidth: null,
            marker: {
                enabled: false,
                radius: 5
            }
        }
    },
    series: [{
        name: 'Visits',
        color: '#d3d3d3',
        data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }, {
        name: 'Installs',
        color: '#e77378',
        data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }]
    });
});

Answer 1

I have updated the code with the correct date time values and added the customised crosshair.

Here is the final code with a correct data values

$(function () {
  $('#container').highcharts({
    chart: {
        type: 'areaspline'
    },
    title: {
        text: null
    },
    credits: {
        enabled: false,
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    xAxis: {
                type: 'datetime',
      tickInterval: 2,
                dateTimeLabelFormats: {
            day:"%e",
      },
      crosshair: {
        color:'#e77378',
        zIndex: 2,
        width: 3,
      }
    },
    yAxis: {
        min: 0,
        max: 3000,
        tickInterval: 1000,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: {
        shared: true
   },
    legend: {
        align: 'left',
        verticalAlign: 'bottom',
        layout: 'horizontal',
        x: 0,
        y: 0
    },
    plotOptions: {
        series: {
        cursor: 'pointer',
        pointStart: Date.UTC(2016,0,1),
        pointInterval: 86400000, //1 day
        },
      },
        areaspline: {
                lineWidth: null,
            marker: {
                enabled: false,
                lineColor:'#e77378',
                fillColor:'#ffffff',
                lineWidth: 3,
                radius: 4,
                symbol:'circle'
            }
        }
    },
    series: [{
        name: 'Visits',
        color: '#d3d3d3',
        data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }, {
        name: 'Installs',
        color: '#e77378',
        data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }]
});
});

Answer 2

You need to provide either:

1) a pointStart and pointInterval property, on the series level (either in the plotOptions, or in the series object)

2) datetime values in the x values of your data

The datetime values can either by epoch time stamps (in milliseconds), or Date.UTC() objects.

The pointInverval, if used, must be in milliseconds.

Example using the pointStart and pointInterval properties:

• http://jsfiddle.net/jlbriggs/7yrnreLx/3/