score:3

Accepted answer

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:

score:0

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]
    }]
});
});

Related Query

More Query from same tag