Hi i have to show the rank of students in highchart (spider web chart). in y axis i have to added different suffix values for different ranks (ie 1st, 2nd, 3rd, 4th.. 100th). can anyone help me on this.
thanks in advance
You can use formatter function for tooltip:
Highcharts.chart('container', {
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
tooltip: {
formatter: function() {
switch (this.x) {
case 1:
return 1 + 'st'
case 2:
return 2 + 'nd'
case 3:
return 3 + 'rd'
default:
return this.x + 'th'
}
}
}
});
Live demo: http://jsfiddle.net/BlackLabel/g48mszj9/
API: https://api.highcharts.com/highcharts/tooltip.formatter
Related
series: [{
name: 'name',
type: 'spline',
data: d1,
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.2f}%</b>'
}
}]
d1=[0.12,-1.58,-0.8]
Show in graph 0.00,1.00,0.00
Use the Highcharts.numberFormat function in combination with the formatter function, as Ahmed Sayed noted (see http://api.highcharts.com/highcharts#Highcharts.numberFormat).
For your specific code, you would format it this way:
series: [{
name: 'name',
type: 'spline',
data: d1,
tooltip: {
// format the tooltip to return the y-axis value to two decimal places
formatter: function() {
return this.series.name + ': <b>' + Highcharts.numberFormat(this.y,2) + '%</b>';
}
}
}]
I hope this is helpful for you.
you can use formatter option instead where you provide a javascript function to return the value in the format you need
tooltip: {
formatter: function() {
return getTooltip(this.y);
}
}
I coverted all the x value with Date.parse() function
How could I get my expectation
- change x label and x value as "%Y%m%d" in tooltip
- remove the strange 12:00 empties on x-axis
Thanks
Covert function
$.each($scope.flights, function() {
var current_flight_no = this
$.each(current_flight_no.data, function(){
this.x = Date.parse(this.x);
})
});
Chart option
options: {
chart: {
type: 'scatter'
},
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e (%a)',
},
tooltip: {
formatter: function () {
return 'Extra data: <b>' + this.point.price + '</b>';
}
},
To fix the tooltip issue, use the formatter option:
formatter: function() {
return this.y + '<br />' +Highcharts.dateFormat('%Y %M %d', this.x);
},
The x values are in milliseconds, Highcharts.dateFormat(...) is needed to change milliseconds to regular date
To fix the 12:00, just go with minTickInterval
http://api.highcharts.com/highcharts#xAxis.minTickInterval
It will be great if you can share the data to better assist you.
I have one chart and i want to include hover on area but i found it works only on point only.
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: true
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
http://jsfiddle.net/onhfLqdm/3/
As area is bounded by points so how can i hover area instead of points?
Update On hover on each polygon asker wants to show data coming from json.To do so in a div out of container please view this fiddle
In Tooltip One more option to show some info coming from json ,tooltip can be used.Put your data using some name like "someText" (as in my fiddle )and get it in formatter function of tooltip using
this.options.someText
See this fiddle for data in tooltiip
Old Answer:
plotOptions: {
series: {
events: {
mouseOver: function () {
$("#polygon").html('Moused over Event')
.css('color', 'green');
},
mouseOut: function () {
$("#polygon").html('Moused out Event')
.css('color', 'red');
}
}
}
}
Fiddle link is here
I have a data set where the series values are angles in degrees (0 to 360). Is it possible to plot a graph like the one illustrated here (ignore the green vertical line) in highcharts? Specifically, if any of the following criteria holds, the chart should avoid linking the two data points directly in the sense of passing through south (180), and should pass through north (0/360) instead:
A point is below 90 and the next one is above 270, or;
A point is above 270 and the next one is below 90.
Any help is appreciated.
What I would do to make this happen is to simply pre-process your data to create two series and then plot both of them onto the same plot. One series is for 0-179 and the other is for 180-359.
You may also want to consider a scatter plot instead of a line plot especially if your data in either of the series is not as smooth as the data in the example. Meaning that one data point is say 10 and the next one is 110 and then the next one after that is 12 or some such.
This code gives you an example, the data is provided by JSON but you should be able to just easily replace it with however your data comes in:
<script type="text/javascript">
$(document).ready(function () {
var chart = new Highcharts.Chart({
title: {
text: 'Wind Direction'
},
chart: {
renderTo: 'dataplot4',
borderWidth: 1,
defaultSeriesType: 'scatter',
zoomType: 'x'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
radius: 3,
states: {
hover: {
enabled: true
}
}
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 90,
min: 0,
max: 360,
title: {
text: 'Wind Direction (deg)'
}
},
tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + ' AKST</b> ' +
this.series.name + ': ' + this.y + ' deg';
}
},
series: [
{
name: 'Wind Direction',
data: JSON.parse("[" + wind_dir + "]"),
pointStart: Number(startDateTime),
pointInterval: 3600000
}
]
});
});
</script>
I'd like to think that I have a jsfiddle for this somewhere, will update the answer when I dig it up.
EDIT: Here's a fiddle that shows the scatter plot in action. http://jsfiddle.net/Reality_Extractor/pNFYL/
Is there any way to make a Dual Axis in Highstock like this one on Highcharts?
http://www.highcharts.com/demo/combo-dual-axes
It looks like you can do it the same way as in highcharts. Each series specifies yAxis:n where n is the axis you want to plot it against, and you need to define n yAxis entries. I modified one of the example highstock demos: http://jsfiddle.net/ykfmG/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data,
yAxis:i
};
}
yAxis: [{
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},{opposite:true},{opposite:true},{opposite:true}],