I have a Highcharts line chart going and I have tooltips enabled, however, I would like to disable tooltips for the certain case where x=0. Is there a way of doing this? The closest that I have come so far is this:
tooltip: {
formatter: function() {
if (this.x > 0) {
return this.x;
}
else return null;
}
}
This just creates an empty tooltip but there is still a popup.
Ok...just figured it out. I just have to return false instead of null.
tooltip: {
formatter: function() {
if (this.x > 0) {
return this.x;
}
else return false;
}
}
Related
I'm using Highcharts to create organization charts as in provided example : https://jsfiddle.net/vegaelce/7rb6esqt/
Is it possible to add a "collapse" feature as in the Google organization chart ? In the following example https://jsfiddle.net/vegaelce/kb2gted4 when you double clic on "Mike" or "Jim" cell, it collapse all the cells above. I need to reproduce an equivalent mode with Highcharts, do you have an idea to do that ? (in Google API, the collapse mode is enabled via
allowCollapse:true
Thanks
There is no such built-in functionality in Highcharts, but you can add it by using click event and show/hide methods. Example:
plotOptions: {
series: {
point: {
events: {
click: function() {
const operateChildren = (point, operation) => {
point.linksFrom.forEach(link => {
link.graphic[operation]();
link.toNode.graphic[operation]();
operateChildren(link.toNode, operation);
});
};
if (this.linksFrom && this.linksFrom[0]) {
if (this.linksFrom[0].graphic.visibility === 'hidden') {
operateChildren(this, 'show');
} else {
operateChildren(this, 'hide');
}
}
}
}
}
}
},
tooltip: {
formatter: function(tooltip) {
if (this.point.graphic.visibility !== 'hidden') {
return tooltip.defaultFormatter.call(this, tooltip);
}
return false;
}
}
Live demo: https://jsfiddle.net/BlackLabel/dp03gq6a/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
I am rendering a highcharts gantt and want to modify the y axis labels
in the formatter function of the label i get point is undefined and want to know how to get that information
yAxis: {
useHTML: true,
labels: {
formatter: function() {
console.log(this);
return `
<a class="left">
<strong> ${this.value} </strong>
<br/>
<i>Job Type</i>
</a>`;
}
}
}
The formatter function is called multiple times and points do not exist in the first call. However, you can get points by this.chart.series[X].points in the later calls and compare this.pos with point.y:
yAxis: {
labels: {
useHTML: true,
formatter: function() {
var seriesPoints = this.chart.series[0].points,
points,
result = '<a class="left"><strong>',
pos = this.pos;
if (seriesPoints) {
points = seriesPoints.filter(function(p) {
return p.y === pos;
});
points.forEach(function(p) {
result += p.name + '<br/>'
});
result += '</strong><i>Job Type</i></a>'
return result
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/sa0ykrpn/
API Reference: https://api.highcharts.com/gantt/yAxis.labels.formatter
I want to change the colors of series..
this the function:
function coloriamo(){
var ipocentro= this.point.y;
if(ipocentro<=50){
return '#ff0000';
}
else if((ipocentro >50)&&(ipocentro<=400)){
return '#ffff00';
}
else if(ipocentro>400){
return '#000000';
}
}
My chart is this:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-scatter-draggable/
how i can to change the color ?
i tried to insert that function in formatter function(), but nothing....
EDIT
If i set marker.fillColor in this way:
plotOptions: {
series: {
marker: {
fillColor: coloriamo(),
}
}
},
when
function coloriamo(){
var ipo= this.point.y;
if(ipo<50){
return '#ff0000';
}
return '#ffff00';
}
but doesn't work...
i tried also in this way but nothing:
http://jsfiddle.net/L9szetnj/
How do I disable click on a datalabel in a PIE?
In previous version 2.3.2 click on a datalabel doesn't have any action on the pie. How do I get that in version 3.0.4?
There is no strict way to get that behavior back, probably there were requests from users to make this work that way. However, you can disable this by overwriting 'click' event on dataLabels:
chart: {
events: {
load: function () {
var chart = this,
points = chart.series[0].data,
pLen = points.length;
for (var i = 0; i < pLen; i++) {
points[i].dataLabel.on('click', function (e) {
e.stopPropagation();
});
}
}
}
},
Working jsfiddle.
legendItemClick: function() {
return false;
}
set useHTML to false
$("#container").highcharts({
legend: {
useHTML: false
}
});
using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?
I tried :
plotOptions: {
series: {
states: {
select: {
lineWidth: 2,
zIndex:10
}
},
with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.
Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:
Highcharts.Series.prototype.setState = (function (func) {
return function () {
if (arguments.length>0){
if (arguments[0] !== ''){
if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
this.options.oldZIndex = this.group.zIndex;
this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
}
}else{
if (typeof this.options['oldZIndex'] !== "undefined"){
this.group.zIndex = this.options['oldZIndex'];
}
}
var order = [], i = 0;
$.each(this.chart.series, function(){
order.push({id:i,zIndex:this.group.zIndex,me:this});
i++;
});
order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
$.each(order, function(){
this.me.group.toFront();
});
func.apply(this, arguments);
}
};
} (Highcharts.Series.prototype.setState));
And here's the JSFiddle demonstrating:
http://jsfiddle.net/G9d9H/9/
Let me know if that's what you needed.
I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)
plotOptions: {
series: {
events: {
click: function () {
this.group.toFront();//bring series to front when hovered over
}
}
}
}