I am using highcharts to render some data. On the yAxis I needed those values to be anchor tags and navigate to a side modal. Was able to get that working correctly by using the formatter function of the labels object. What I am trying to do now is the first cell of the table I want to disable the click events so it does not take the user to the side modal its display only.
labels{
align: 'left',
formatter: function(){
return `<a href=javascript:openModal() ${this.value} </a>`
}
}
I've tried with jquery targeting the first table cell like
$('tspan.highcharts-anchor:first').unbind();
Any suggestions are greatly appreciated
Thank you
According to the comments - there is a code which disables opening the modal on the first yAxis.label.
Demo: https://jsfiddle.net/BlackLabel/25c38ez4/
yAxis: {
labels: {
formatter: function() {
console.log(this)
if (this.isFirst) {
return this.value
} else {
return `<a href=javascript:openModal()> ${this.value} </a>`
}
}
}
}
Related
Whenever the user "mouse out" my chart, I would like a tooltip to automatically appear above one point and stay visible until the mouse returns above the chart.
series: {
events: {
mouseOut: function() {
chart.series[0].data.refresh(0);
}
}
The code above works, but the tooltip disappear after a second or two. I want it to stay visible.
Thanks!
This reassigning of the reset function should help to achieve wanted result.
Demo: https://jsfiddle.net/BlackLabel/pu9g2dft/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
I'd like to add an extra x-axis label to the end of a chart, like in the image below.
Is this possible?
I've checked out the API but don't see anything about adding or modifying single labels.
Thanks!
You can use the formatter function to customize the labels:
xAxis: {
labels: {
formatter: function() {
if (this.isLast) {
return 'Now'
}
return Highcharts.dateFormat('%H:%M:%S.%L', this.value);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/5s3gbawr/
API: https://api.highcharts.com/highcharts/xAxis.labels.formatter
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/
I have implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}
I have a custom chart here
I have set label property as
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
},
align:'center',
x:150
}
I have a linked axis which shows year.
What I want is the axis label should be in center of the two extremes as in image.
what I have done now is, I have given x:150 to label.but that wont work if I resize the browser window.
Is there a way to do it?
Thanks in advance.
Here is the way I found it.
Instead of using static values,
I used useHTML, and positioned labels by CSS styles.
labels: {
useHTML:true,
formatter: function() {
return '<span class="label">'+Highcharts.dateFormat('%Y', this.value)+'</span>';
}
}
Simple example here