CODEWITHSUNDEEP
highchartslabelmaxmin
user3511758
user3511758

Reputation: 1

Highcharts, minimum, maximum with additional label

I have time line chart with about 2000 point, the data are loaded from csv file. I would like to add labels for minimum, maximum and last point.

When I do this in this way than it take too much time to genereate it. How can I do this in faster way ?

var chart = new Highcharts.Chart(options);
chart.series[0].data[chartMinNo].update({ 
  marker: {
    radius: 2,
    lineColor: '#CC2929',
    lineWidth: 2,
    fillColor: '#CC2929',
    enabled: true
  },
  dataLabels: {
    enabled: true,
    borderRadius: 3,
    borderColor: '#CC2929',
    borderWidth: 1,
    y: -23,
    formatter: function() {
      return "Min : " + chartMinValue;
      }
    }
});

Upvotes: 0

Views: 2094

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

It works slow, because you are using Highcharts, where displaying 2000 points isn't the best idea. I suggest to use Highstock instead, where points are grouped to display average/sum/etc. of points group.

However, here you are demo

And code: http://jsfiddle.net/me5Uf/2/

    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                },
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        if (this.point.options.showLabel) {
                            return this.y;
                        }
                        return null;
                    }
                }
            }
        },
        series: [{
            name: 'AAPL',
            data: data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    }, callback);
});

function callback(chart) {
    var series = chart.series[0],
        points = series.points,
        pLen = points.length,
        i = 0,
        lastIndex = pLen - 1,
        minIndex = series.processedYData.indexOf(series.dataMin),
        maxIndex = series.processedYData.indexOf(series.dataMax);

    points[minIndex].options.showLabel = true;
    points[maxIndex].options.showLabel = true;
    points[lastIndex].options.showLabel = true;
    series.isDirty = true;
    chart.redraw();
}

Upvotes: 2

Related Questions