Reputation: 208
Is it possible to display my own text on the data-labels of the Line Chart, Only for Non-Zero Entries. Provided, the text to be displayed in the data-label is passed from an xml along with the data.
I need the chart like the one in the image below. Please suggest an idea. Thanks for your time.
Highcharts:
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.y != 0) {
return this.point.y;
}
},
borderRadius: 5,
backgroundColor: 'pink',
borderWidth: 1,
borderColor: 'green',
y: -6
}
}
},
series: [{
data: [0, 0,77,120,0,0,150,0,0,0,0]
}]
}
XML:
<categories>
<month>Jan</month>
<month>Feb</month>
<month>Mar</month>
<month>Apr</month>
<month>May</month>
<month>Jun</month>
<month>Jul</month>
<month>Aug</month>
<month>Sep</month>
<month>Oct</month>
<month>Nov</month>
<month>Dec</month>
</categories>
<Series>
<point>0|0</point>
<point>0|0</point>
<point>120|First</point>
<point>130|0</point>
<point>0|0</point>
<point>0|0</point>
<point>0|0</point>
<point>150|Second</point>
<point>230|Third</point>
<point>0|0</point>
<point>0|0</point>
<point>0|0</point>
</Series>
JQuery:
$xml.find('series').each(
function(i,series){
var ser = {
data : [],
};
$(series).find('point').each(
function(i,point){
ser.data.push(parseInt($(point).text().split("|")[0]);
});
options.series.push(ser);
});
Upvotes: 0
Views: 4383
Reputation: 37578
You can add extra parameter (text) per each point, which is extracted in the datalabels formatter. In case when datalabel should not be printed for 0 values, add condition which checks that.
plotOptions: {
series: {
dataLabels: {
enabled:true,
formatter: function() {
if(this.y > 0)
return this.point.label;
}
}
}
},
series: [{
data: [{
y: 2,
label: 'text1'
}, {
y: 3,
label: 'text2'
}, {
y: 0
}, {
y: 4,
label: 'text3'
}]
}]
Upvotes: 5