Need some help, how to show parent values with % and child values without %. Thanks in advance.
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
if(this.hasOwnProperty("drilldown")) {
return this.series.name + ", " + this.y+'%';
} else {
return this.series.name + ", " + this.y;
}
}
//format: '{point.y:.1f}'
}
},
},
We can simply check if the point has property drilldown. So we need to change your code a little bit:
if (this.point.drilldown) {
return this.series.name + ", " + this.y + '%';
} else {
return this.series.name + ", " + this.y;
}
Demo: https://jsfiddle.net/BlackLabel/obukypjn/
Related
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 write a new "pointFormatter" function to show the gap between 2 points, such as jsfiddle, but when I move the mouse to the first point "7.Jan", the tooltip doesn't show correctly, and I saw errorlog in console as "TypeError: this.series.data[preIndex] is undefined"
But, when I change the timeRange to "all", then the moving mouse to the first point doesn't cause any error any more, and when I change the timeRange back to "1w", it is OK also.
What is more, if I change the point num from 10 to 9 by deleting the last point, then the error doesn't occur any more.
Why? which thing caused this error?
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{type: 'week',count: 1,text: '1w'},
{type: 'all',text: 'all'}
],
selected: 0
},
series: [{
name: 'USD',
data: [
[0,null],
[86400000,null],
[86400000*2,null],
[86400000*3,null],
[86400000*4,null],
[86400000*5,null],
[86400000*6,3],
[86400000*7,4],
[86400000*8,6],
[86400000*9,8],
]
}],
plotOptions: {
line: {
step: 'left',
connectNulls: true,
tooltip: {
pointFormatter: function () {
var preIndex = this.index - 1;
while (preIndex >= 0 && this.series.data[preIndex].y == null) {
preIndex--;
}
if (preIndex < 0) {
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b><br/>';
} else {
var prePoint = this.series.data[preIndex];
var prePointY = prePoint.y;
var prePointX = prePoint.x;
var day = (this.x - prePointX) / 86400 / 1000;
var add = this.y - prePointY
add_str = '(' + add + ')';
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b> ' + add_str + '<br/>';
}
}
}
}
},
});
});
Highstock has data grouping feature - more information here.
This feature can change the series.data array. Instead you can use series.options.data (original data from the options) or disable dataGrouping.
plotOptions: {
line: {
dataGrouping: {enabled: false},
example: http://jsfiddle.net/6mpt8xv2/
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 :)
I have a tooltip format like this:
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%A, %b %e, %Y',new Date(this.x)) +'<br/>'+ this.series.name + ': ' + '<b>'+ this.y +'</b>';
}
};
How can I add color to my series.name because now they all black. In my chart after drawing, different series.name has different colors.
Thanks
use this:
tooltip: {
formatter: function() {
var toolTipTxt = '<b>'+ this.x +'</b>';
toolTipTxt += '<br/><span style="color:'+ this.point.series.color +'"> ' + this.point.series.name + ': ' + this.y+' </span>';
return toolTipTxt;
}
}
See the working fiddle here
If your tooltip is shared then use following code
tooltip: {
formatter: function() {
var toolTipTxt = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
toolTipTxt += '<br/><span style="color:'+ point.series.color +'"> ' + point.series.name + ': ' + point.y+'</span>';
});
return toolTipTxt;
} ,shared:true
}
See the demo of different color in tooltip for shared tooltip here
tip according to my updated point colour not series colour.
Here is my custom function:
function myFormatter() {
console.log(this);
//alert($(this.graphic.element).attr('fill'));
if(this.series.name == 'Series 2'){
return '<div style="color:Black;"><b>Target Line</b></div>';
}else if(this.series.name == 'Series 3'){
return '<div style="color:Red;"><b>Danger Line</b></div>';
}else{
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
this.x +': '+ (<?php echo round($this->targetVal,2);?> + parseInt(parseFloat(this.y).toFixed(2))) +' Kg</span>';
}
}
and tooltip is
tooltip: {
useHTML:true,
formatter: myFormatter
}
Well it is strange, because I reproduced your example in the jsfiddle http://jsfiddle.net/7Ykhx/3/
formatter: function () {
//alert($(this.graphic.element).attr('fill'));
if (this.series.name == 'Series 1') {
return '<div style="color:blue;"><b>Target Line</b></div>';
} else if (this.series.name == 'Series 2') {
return '<div style="color:red;"><b>Danger Line</b></div>';
} else {
return '<span style="color:' + this.series.color + '"><b>' + this.series.name + '</b><br/>' + this.x + ': ' + parseInt(parseFloat(this.y).toFixed(2)) + ' Kg</span>';
}
}