CODEWITHSUNDEEP
javascripthighcharts
Taras Kovalenko
Taras Kovalenko

Reputation: 2393

Add label for highcharts in first element

How to add label to first element in highcharts component like this: enter image description here

My chart style code:

 chart: {
                        height: 143
                    },
                    plotOptions: {
                        area: {
                            fillOpacity: 0.00001
                        },
                        series: {
                            dataLabels: {
                                enabled: true
                            }
                        },
                        line: {
                            connectNulls: false
                        }
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {
                        max: 100,
                        min: 0,
                        tickInterval: 25,
                        labels: {
                            style: {
                                color: '#00cc00'
                            },
                            formatter: function () {
                                var color = '#57b809';
                                if (this.value === 0) {
                                    color = '#a32424';
                                } else if (this.value <= 25) {
                                    color = '#ff9900';
                                } else if (this.value <= 50) {
                                    color = '#ff6600';
                                }

                                return '<span style="fill: ' + color + ';">' + this.value + '</span>';
                            }
                        }
                    }

Thanks a lot.

Upvotes: 0

Views: 69

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

Using the method from this answer:

Your current data is:

[[Date.UTC(2013, 07, 10), 9],[Date.UTC(2013, 07, 11), 22],[Date.UTC(2013, 07, 12), 8],[Date.UTC(2013, 07, 13), 12],[Date.UTC(2013, 07, 14), 71],[Date.UTC(2013, 07, 15), 230],[Date.UTC(2013, 07, 16), 50],[Date.UTC(2013, 07, 17), 670],[Date.UTC(2013, 07, 18), 35]]

So you take your first data point, and specify it as an object instead of an array of [x,y], and enable dataLabels for the point:

{
 x: Date.UTC(2013, 07, 10), 
 y: 9,
 dataLabels: { enabled: true }
}

Updated Example with your provided data:

UPDATE

Or, since you're adding it only to the first point, you can check the point.index in the label formatter function, and do this completely dynamically, without altering your data:

dataLabels: {
 enabled: true,
 formatter: function() {
  return this.point.index == 0 ? this.y : '';
 }
}

Updated example:

Upvotes: 2

Related Questions