How to remove Hyper Link in XAxis name in Highcharts? - highcharts
How to remove the hyper link in the xaxis name. Is there any property in the xaxis lable or do we need to write any function to remove the hyper link.
In the link below how to remove hyper link in the Animals.
{
"chart":{"defaultSeriesType":"column"},
"plotOptions":{"column":{"borderWidth":0}},
"series":[
{"data":[{"x":1.435689E12,"y":6.0,"drilldown":"All-1.435689E12"}],"name":"All","type":"column","tooltip":{"xDateFormat":"%m/%d/%Y"}},
{"data":[{"x":1.435689E12,"y":2.0,"drilldown":"ABCD-1.435689E12"}],"name":"ABCD","type":"column","tooltip":{"xDateFormat":"%m/%d/%Y"}},
{"data":[{"x":1.435689E12,"y":1.0,"drilldown":"EFGH-1.435689E12"}],"name":"EFGH","type":"column","tooltip":{"xDateFormat":"%m/%d/%Y"}},
{"data":[{"x":1.435689E12,"y":2.0,"drilldown":"IJKL-1.435689E12"}],"name":"IJKL","type":"column","tooltip":{"xDateFormat":"%m/%d/%Y"}}],
"title":{"text":"Artifact Created"},
"xAxis":[
{"minTickInterval":8.64E7,"type":"datetime","labels":{"rotation":45.0},"dateTimeLabelFormats":{"day":"%m/%d/%Y"},"title": {"text":"Date"},"showEmpty":false},
{"type":"category","id":"drilldown"}],
"yAxis":[
{"min":0.0,"title":{"text":"Count"},"showEmpty":false},
{"labels":{"enabled":false},"title":{"text":""},"id":"drilldown","gridLineWidth":0}],
"drilldown":
{"series":[
{"data":[{"y":1.0,"name":"artf1001"},{"y":1.0,"name":"artf1002"},{"y":1.0,"name":"artf1003"},{"y":1.0,"name":"artf1004"}, {"y":1.0,"name":"artf1005"},{"y":1.0,"name":"artf1006"}],"name":"All","type":"column","id":"All-1.435689E12","xAxis":"drilldown","yAxis":"drilldown"},
{"data":[{"y":1.0,"name":"artf1004"},{"y":1.0,"name":"artf1005"} ],"name":"ABCD","type":"column","id":"ABCD-1.435689E12","xAxis":"drilldown","yAxis":"drilldown"},
{"data":[{"y":1.0,"name":"artf1001"}],"name":"EFGH","type":"column","id":"EFGH-1.435689E12","xAxis":"drilldown","yAxis":"drilldown"},
{"data":[{"y":1.0,"name":"artf1002"},{"y":1.0,"name":"artf1003"} ],"name":"IJKL","type":"column","id":"IJKL-1.435689E12","xAxis":"drilldown","yAxis":"drilldown"}]
}
}
The issue can be seen by clicking this link
The simples way is overwrite tick drilldown function as empty.
Highcharts.Tick.prototype.drillable = function () {};
Example: http://jsfiddle.net/r2u6spa9/
Related
hierarchy information while using grouped category plugin in highchart
while using grouped category plugin,
$('.highcharts-axis-labels text, .highcharts-axis-labels span').click(function () {
console.log(this.textContent || this.innerText);
});
the above code snippet would give info about the clicked xaxis label, is there a way to ascertain the parent of the same?
i would like to get the parent as "Forecast" when i click "Footwear" in the above chart
You can use custom-events extenstion and then add click event on xAxis labels. Name of parent can be extracted from textStr value.
labels: {
events: {
click: function () {
alert(this.parent.label.textStr);
}
}
},
Example: http://jsfiddle.net/tAq9V/9/
Call addSeries() from within addSeries event
I want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only. If the position of the line is static that is the best way. If the position is dynamic then you can still go with plotLine. There are events for adding and removing plotLine on the fly. API link removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine I hope this will help you.
highcharts - how to controle slice pie from bottom
I have a pie chart and need to slice out some point (for examle, second slice in jsfiddle example) by clicking a buttom. How can I do it?
I've tried some updating, but it doesn't work
$('#button').click(function() {
var Chart2 = $('container').highcharts();
Chart2.options.series[0].data[1].sliced = true;
Chart2.options.series[0].data[1].selected = true;
Chart2.redraw();
})
jsfiddle example
The method you need is 'select' on the point object. This is on series, but not in options as you tried:
$('#button').click(function() {
chart.series[0].data[1].select();
})
e.g.
http://jsfiddle.net/JWFm5/
You can also use slice() function.
http://jsfiddle.net/wu3jY/2/
$('#button').click(function() {
chart.series[0].data[0].slice();
});
One label for multiple series
I need to make one label responsible for multiple series data.
As shown in this fiddle http://jsfiddle.net/HHqGN/ , I have two series:
test(bid) and test(ask) and two labels responsible for each of them.
What I need is one label named test instead of these two to toggle both serie 1 and serie 2 at the same time
Sample code from fiddle:
$(function() {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled : false
},
legend : {
enabled : true
},
series : [{
name : 'test(bid)',
data : [[1152057600000,57.00]
}, {
name : 'test(ask)',
data : [[1152057600000,58.00]
}]
});
});
You can disable displaying second serie in legend, by showInLegend parameter and then use legendItemClick to show/hide both series
http://jsfiddle.net/HHqGN/1/
legendItemClick:function(){
$.each(this.chart.series,function(i,serie){
if(serie.visible)
serie.hide();
else
serie.show();
});
return false;
}
In case anyone is looking for linked series have a look at the linkedTo parameter of a series. As per definition: linkedTo: StringSince 3.0 The id of another series to link to. Additionally, the value can be ":previous" to link to the previous series. When two series are linked, only the first one appears in the legend. Toggling the visibility of this also toggles the linked series. Source: http://api.highcharts.com/highcharts
Gauge central value don't show
I only want to know if it's possible delete, or don't show, the frame in the middle of Gauge Chart that contains the value (below pivot). I got more than one serie and values overlap each other. Thanks!!
One way is, you can format your datalabels and return nothing in the formatter () function.
dataLabels: {
formatter: function () {
var kmh = this.y,
mph = Math.round(kmh * 0.621);
}
}
Fiddled version. (tweaked from Highchart demo sample )
Hope this is you need.
Another option is dataLabels: false Documentaion: Gauge DataLabels enabled