Customizing tooltip leaving the candle stick as it is

Question

I'm using Highstockchart to plot 4 series on a chart, the main one is a candlestick, then I've 2 series to plot priceplus, pricelower prices then another one to represent volumes. I've got a problem since the pricelower/priceplus's tooltip shows the time as unix datetime and not in human redeable form (as you can see in this screenshot)

I want this not to be modified

How can I do this? Thanks

Here's my JS code

function onSuccess(data) {
    var r = JSON.stringify(data);
    debugger;
    kendo.ui.progress($('#container'), false);
    $('#container')
        .highcharts('StockChart',
        {
            exporting: {
                enabled: false
            },
            credits:
            {
                enabled: false
            },
            rangeSelector: {
                selected: 1,
                inputEnabled:false,
                buttonTheme: {
                    visibility: 'hidden'
                },
                labelStyle: {
                    visibility: 'hidden'
                }
            },
            yAxis: [
                 {
                     height: '80%',
                     lineWidth: 2
                 }, {
                     top: '85%',
                     height: '15%',
                     offset: 0,
                     lineWidth: 2
                 }
            ],
            xAxis:
           {
               ordinal: true
           }
        ,
            series: [
                {
                    type: 'candlestick',
                    name: 'Price',
                    data: data.Prices,
                    id: 'dataseries',
                    upColor: "#31D431",
                    color: "#D22F2F",
                    marker:{
                        enabled: true
                    }
                },
                {
                    type: 'scatter',
                    name: 'Prices plus',
                    data: data.PricesPlus

                },

            {
                type: 'scatter',
                name: 'Price less',
                data: data.PricesLess

            }
               , {
                   type: 'column',
                   name: 'Volume',
                   data: data.Volume,
                   yAxis: 1,
                   dataGrouping: {
                       units: groupingUnits
                   }
               }
            ],
            width: 4,
            tooltip: {
        shared: false

}

        });
}

Answer 1

You should use the tooltip.formatter and then create a content of popup. Each values can be extracted from point reference.

tooltip:{
    formatter: function() {
        var points = this.point ? Highcharts.splat(this.point) : this.points,
            point = points[0],
            each = Highcharts.each,
          txt = '';

      txt += '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b, %H:%M', point.x) + '</span><br/>';

        each(points, function(p, i) {

        if(p.point && p.point.open) {
            txt += '<span style="color:' + p.color + '">\u25CF</span><b> ' + p.series.name + '</b>:<br/>Open: ' + p.point.open + '<br/>High: ' + p.point.high + '<br/>Low: ' + p.point.low + '<br/>Close: ' + p.point.close + '<br/>'; 
        } else {
            txt += '<span style="color:' + p.color + '">\u25CF</span> ' + p.series.name + ': <b>' + p.y + '</b><br/>'; 
        }
      });

        return txt;
    }
  },

Example: - http://jsfiddle.net/abpbyx8z/