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 have a facing problem when I have a data greater then 1000 it will make graph disturbing so I want to decrease it if it is greater the 1000 it started going to show 1k at the top of the bar in high charts
you can see it on below link
my code
Highcharts.chart('container',{chart:{type:'bar'},
title:{text:'Historic World Population by Region'},
subtitle:{text:'Source: Wikipedia.org'},
xAxis:{categories:['Africa','America','Asia','Europe','Oceania'],
title:{text:null}}, yAxis:{min:0,title:{text:'Population (millions)', align:'high'},
labels:{overflow:'justify'}}, tooltip:{valueSuffix:' millions'},
plotOptions:{bar:{dataLabels:{enabled:true}}},legend:{layout:'vertical',align:'right',verticalAlign:'top',
x:-40,y:80,floating:true,borderWidth:1,
backgroundColor:((Highcharts.theme&&Highcharts.theme.legendBackgroundColor)||'#FFFFFF'), shadow:true},
credits:{enabled:false},
series:[{name:'Year 1800',data:[107,31,635,203,2]},{name:'Year 1900',data:[133,156,947,408,6]},
{name:'Year 2000',data:[814,841,3714,727,31]},
{name:'Year 2016',data:[1216,1001,4436,738,40]}]});
You can preprocess your data and replace y values:
var series = [...];
series.forEach(function(s) {
s.data.forEach(function(point, i) {
if (point >= 1000) {
s.data[i] = {
y: 1000,
realValue: point
}
}
});
});
If you want to display the real values, you can store them and show in a tooltip and data labels:
Highcharts.chart('container', {
...,
tooltip: {
formatter: function(tooltip) {
if (this.point.realValue) {
return '<span style="font-size: 10px">' + this.x + '</span><br/>' +
'<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.realValue + '</b><br/>';
}
// If not null, use the default formatter
return tooltip.defaultFormatter.call(this, tooltip);
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.realValue ? this.point.realValue : this.y
}
}
}
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/18fe7yrw/
API Reference:
https://api.highcharts.com/highcharts/series.bar.dataLabels.formatter
https://api.highcharts.com/highcharts/tooltip.pointFormatter
I am getting special symbol in x-axis while generating chart. i am not able to figure out the issue.my actual string "Employee engagement scores of team or division of individuals after coaching".please suggest me.
My Implemented code: http://jsfiddle.net/sameekmishra/kzcxez3z/2/
Thanks,
Try this. (This is to add ellipsis inside xAxis)
xAxis: [{
labels: {
formatter: function () {
var formatted;
if (this.value.length > 35) {
formatted = this.value.substring(0, 30) + "..." + this.value.substring(this.value.length - 10);
} else {
formatted = this.value;
}
return '<div class="js-ellipse" style="width:226; overflow:hidden" title="' + this.value + '">' + formatted + '</div>';
},
style: {
width: '226'
},
useHTML: true
}
}],
Hope this helps :)
im using a common function to generate linechart using highchart.for certain charttype i want tooltip without any pointformat and for another in want to use formatter funcction how to acheive this.From the below code charttype 1 tooltip diappear.
tooltip: {
valueSuffix: '',
pointFormat: (chartType == 1 ? '{series.name}:
{point.y}' : '' ) ,
shared: (chartType == 1 ? true : false),
formatter: function() {
if (chartType == 2) {
return '' + this.point.tooltip + ': ' + (chartType == 2 ? this.y.toFixed(1) : this.y.toFixed(0));
}
else {
return false;
}
}
If you want to disable option, use null value, not empty string (''). See: http://jsfiddle.net/Yrygy/133/
However I think that it would be better to add one if-else statement, instead of three one above another, see: http://jsfiddle.net/Yrygy/134/
var chartType = 1,
tooltip = {
valueSuffix: ''
};
if (chartType == 1) {
tooltip.pointFormat = '{series.name}: {point.y}';
tooltip.shared = true;
} else {
tooltip.shared = false;
tooltip.formatter = function () {
if (chartType == 2) {
return '' + this.point.tooltip + ': ' + (chartType == 2 ? this.y.toFixed(1) : this.y.toFixed(0));
} else {
return false;
}
}
}
And then create chart:
chart = new Highcharts.Chart({
tooltip: tooltip,
// other options
});
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;
}
}