I am using the config below to show the tooltips:
tooltip: {
pointFormat: '{point.y}'
},
the data is like:
data: Array(4)
0: {name: "RF_test_93219167", y: 1274958}
1: {name: "RF_test_26400097", y: 1274958}
2: {name: "RF_test_50328208", y: 1274958}
3: {name: "RF_test_73758432", y: 1274958}
and the tooltips still shows the Brand key in front of the value. and I don't want it to be bold or formatted, just show 1274958. just want it simple, and I don't want a dot in front of the value either. how can I achieve it?
tooltip: {
formatter: function () {
return this.point.name + ':' +this.y;
}
},
use this instead of pointFormat to achieve the same, you also add additional things needed on the tooltip using this method.
Related
Elaborating a graph where I point with y different, and 'x' equals; I put in the series:
series: [{
name: 'Grafico 1',
data: data,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 2)
},
color: "#000000"
},
stacking: 'normal',
}]
and as a result in the chart have the highest value added with the smaller one, that is:
http://i.imgur.com/Ups7AzT.png
If I remove the statement "stacking: 'normal'", I instead the chart without the line joining the points:
http://i.imgur.com/gMAO5VW.png
I ask: you can have the chart without the value added is greater than the lower (ie the value 18 is represented as 18 in the chart, and 26.45 because the child is 8.45)?
I'm playing around with the properties of a chart I created in Highcharts, and I'd like to know what attributes are associated with the legend.labelFormat property. I know that {name} is one that definitely works, but I can't find documentation regarding any other attributes that can be used.
I suppose that I'm looking for something similar to the tooltip.pointFormat property, where you can use attributes like {point.value}, {point.percentage}, and so on.
What makes me think that additional properties other than {name} exist is this thread in which the user mentions using this.options.total in the legend.labelFormatter property.
Can anyone help?
Other attributes that can be used are attributes of a series. You can check what are defined attributes of a series using browser console (Developer Tools) and labelFormatter function.
Example: http://jsfiddle.net/e7w88usj/1/
$(function () {
$('#container').highcharts({
legend: {
//labelFormat: '{color} {index} {symbol}',
labelFormatter: function () {
console.log(this);
return this.name;
}
// (!) labelFormat will override labelFormatter if both are used
},
series: [{
data: [29.9, 9, 8]
}, {
data: [1, 2, 34]
}]
});
});
I've put a label in my data showing the index of each serie:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{series.index}'
}
}
},
Altough it starts at 0 and I would like it to start at 1.
Here a fiddle.
You can switch from format to formatter to easily solve this. It provides more flexibility and advanced functionality. The format attribute can only do simple tasks involving the variables in their original form.
You have:
format: '{series.index}'
Replace it with:
formatter: function() {
return this.series.index+1;
}
As in this JSFiddle demonstration.
How can we get next elements name in Highcharts
for example
series: [{ name: 'weight', data: [50, 48, 80, 70]},
{ name: 'height',data: [5.8, 5.1, 6.1, 6.0]}
]
tooltip: {
formatter: function(){
return this.series.name;//i want to return here next elements name also is there any way
}
}
in the above tooltip iam returning only current element name, is there any way to get immediate next elements name there..?
You can always use shared tooltip, take a look: http://api.highcharts.com/highcharts#tooltip.shared
series: [{
type: 'flags',
name: 'Flags on axis',
data: [{
x: Date.UTC(2011, 2, 1),
title: 'A'
}, {
x: Date.UTC(2011, 5, 1),
title: 'C'
}],
shape: 'squarepin'
}]
$("#btnAddFlag").click(function () {
chart.series[0].setData(
{
x: Date.UTC(2011, 2, 1),
title: 'B'
});
});
Above code is part of highstock chart option and I want to add flag based on user event click. However I able to add the new point flag into the chart but the existing flags which title A and C will be missed out.
how can I add the new flag into the chart with the existing flags ?
On the other hand, I am able get the flag data but I'm unsure to
generate the correct data structure and reinitialize the old and new
flag data back into the chart.
Thank you.
Use addPoint instead of setData.
http://api.highcharts.com/highstock#Series.addPoint()
$("#btnAddFlag").click(function () {
chart.series[0].addPoint({
x: Date.UTC(2011, 2, 1),
title: 'B'
});
});