Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show value of last point as label or tooltip on Highcharts Stock Chart

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

like image 339
Hamed Mahdizadeh Avatar asked Dec 25 '22 06:12

Hamed Mahdizadeh


1 Answers

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

like image 160
Luca Regazzi Avatar answered Feb 15 '23 23:02

Luca Regazzi