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 :)
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 have this chart :
I want to add a unit to the value "4" (value of my xAxis). How can I do that?
Thank you
Hard to tell because no code sent but it looks like your "4" is a series name (or some text item - not a value). To do this you can use the tooltip.formatter like in this example. I have added the "%" to the category (month) text:
tooltip: {
formatter: function() {
return 'The value for <b>'+ this.x +
'%</b> is <b>'+ this.y +'</b>';
}
}
you can do that from tooltip formatter
tooltip: {
formatter:function(){
var formattedX = "unit" + this.x;
return formattedX + 'this value ' + this.y;
}
}
I hope this will help you.
Use tooltip.headerFormat, see: http://jsfiddle.net/3bQne/647/
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.key} cm</span><br/>'
},
tooltip: {
valueDecimals: 2,
valuePrefix: '$',
valueSuffix: ' USD'
}
please check the below link
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/valuedecimals/
The issue I am having is that the tooltip on my line graph for the first few points is behind the values on the Y-Axis. I assume this is just a z-index issue between the tooltips and yaxis.
I wasnt sure the correct way to fix this issue, if there was some option I should use or is this something that needs to be addressed CSS.
This issue did not start happening until I changed the yaxis to use HTML. Maybe is it caused by my formatting?
yAxis: {
labels: {
useHTML:true,
formatter: function() {
var amount = this.value;
if(this.value > 0 ){
return '<span class="format_positive">' + amount + '</span>';
} else {
return '<span class="format_negative">' + '(' + amount + ')' + '</span>'
}
}},
alternateGridColor: '#F5F5F5',
minorTickInterval: 'auto',
lineWidth: 1,
tickWidth: 1,
title:{ text: 'Total Amounts'}
}
I am using Highcharts and i want to use a different formatter for the numbers displayed in the tooltip, for each curve in the same graphic.
Thank you
First of all you have to store your series tooltip text. You can do it using the following example:
.
.
.
series: [{
'name': 'serie 1',
'data': serieData, // use your array of data
'tooltipText': 'text 1' // text which will be inside the tooltip
}]
.
.
.
Then you have to get your tooltip text inside the serie tooltip.
Not shared tooltip:
tooltip: {
shared: false,
formatter: function() {
return this.series.options.tooltipText + '<br>' + // return stored text
'Value: ' + this.y;
}
}
demo1
Shared tooltip:
tooltip: {
formatter: function() {
var tooltip = '';
for(var i = 0, length = this.points.length; i < length; i++) {
var point = this.points[i];
tooltip += point.series.options.tooltipText + '<br>' +
'Value: ' + point.y + '<br>';
}
return tooltip;
}
}
demo2