Show value of last point as label or tooltip on Hi

问题:

I have multiple data series with different scale in one stock chart (HighCharts).

I want to connect each series to it's axis or show value of last point of each series on it (something like data label but just for last point of each series)

$(function () {
    $('#container').highcharts({

        chart: {
            renderTo: 'container'
        },
        xAxis: [{
            type: 'datetime'
        }],
        yAxis: [{
            opposite: true,
          lineWidth: 1
        },{
            opposite: true,
          lineWidth: 1
        }],

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000, // one day
            yAxis: 1
        }, {
            data: [20000, 2250, 30300, 28000, 27000, 27800, 25800],
            pointStart: Date.UTC(2010, 0, 3),
            pointInterval: 24 * 3600 * 1000, // one day
        }]

    });
});

http://jsfiddle.net/HamedMahdizadeh/4wjc02dw/2/

HighStock

回答1:

You just need to add a simple data formatter to have the datalables to be displayed only on the last datapoint.

plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function(){
                    var isLast = false;
                    if(this.point.x === this.series.data[this.series.data.length -1].x && this.point.y === this.series.data[this.series.data.length -1].y) isLast = true;

                  return isLast ? this.y : '';
                }
            }
        }
    },

Updated fiddle