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'}
}
Related
I am using high chart in my project. Currently when user mouse over on the data points the tool tip will be displayed top to the data points. Some times the data are big and the tool tip will look very big, hence user wants to display the tool tip value next to the legend title during mouse over of the data points.
Example Legends should look like below:
Female % 23 Male % 22
Here 23 and 22 are the data points value which should be printed next to legend label when we mouse over on the data points.
The 23 and 22 value should be changed as per the mouse over on the data points.
enter code here
primaryChart = $('#container').highcharts('StockChart', {
chart: {
// my code
},
yAxis: [{
// my code
}],
xAxis: {
// my code
},
plotOptions: {
// my code
},
tooltip: {
//enabled: false,
followPointer: false,
useHTML: true,
formatter: function () {
//debugger;
var precision;
var s = '<b>' + Highcharts.dateFormat('%A, %b %e %Y, %H:%M:%S', new Date(this.x)) + '</b>';
$.each(this.points, function () {
precision = GetTooltipData(this.series.options.paramID);
s += '<br/ ><span style="color:' + this.series.options.color + '">' + this.series.name + '</span> : ' + parseFloat(this.y.toFixed(precision)) + ' ' + this.series.yAxis.axisTitle.textStr;
// s += "<div class='comment_filter'><a class='comments_buble' href='#' data-series='" + this.point.index + "'>Comment</a></div>";
});
return s;
},
shared: true
},
series: chartData,
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'left',
borderColor: '#909090',
verticalAlign: 'top'
},
credits: {
enabled: false
}
});
You can use positioner function for tooltip to place it next to a legend:
tooltip: {
positioner: function() {
var legend = this.chart.legend,
x = legend.group.translateX + legend.legendWidth,
y = legend.group.translateY;
return {
x: x,
y: y
};
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/3rsp4bdy/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner
enter code here
tooltip: {
followPointer: true,
useHTML: true,
split: false,
formatter: function () {
var s = '<span>' + this.series.name +'</span>';
this.series.legendItem.element.innerHTML = s;
return false;
},
shared: true,
},
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've just encountered a problem I could not find solution for, so that's the cause of my post.
I am using:
xAxis: {
gridLineWidth: 0,
type: 'datetime',
labels: {
useHTML: true,
formatter: function() {
return '<div class="labels" style="margin-top:20px;font-family:Open Sans;">' + $charts.convert_label_time(this.value) + '</div>';
}
}
},
After AJAX call labels are going to disappear and the "DIV" ('.highcharts-axis-labels') that is related to them is removed.
The cause of this reaction is - Adding dynamically series using
chart.addSeries();
Any tips?
I have a data set where the series values are angles in degrees (0 to 360). Is it possible to plot a graph like the one illustrated here (ignore the green vertical line) in highcharts? Specifically, if any of the following criteria holds, the chart should avoid linking the two data points directly in the sense of passing through south (180), and should pass through north (0/360) instead:
A point is below 90 and the next one is above 270, or;
A point is above 270 and the next one is below 90.
Any help is appreciated.
What I would do to make this happen is to simply pre-process your data to create two series and then plot both of them onto the same plot. One series is for 0-179 and the other is for 180-359.
You may also want to consider a scatter plot instead of a line plot especially if your data in either of the series is not as smooth as the data in the example. Meaning that one data point is say 10 and the next one is 110 and then the next one after that is 12 or some such.
This code gives you an example, the data is provided by JSON but you should be able to just easily replace it with however your data comes in:
<script type="text/javascript">
$(document).ready(function () {
var chart = new Highcharts.Chart({
title: {
text: 'Wind Direction'
},
chart: {
renderTo: 'dataplot4',
borderWidth: 1,
defaultSeriesType: 'scatter',
zoomType: 'x'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
radius: 3,
states: {
hover: {
enabled: true
}
}
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 90,
min: 0,
max: 360,
title: {
text: 'Wind Direction (deg)'
}
},
tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + ' AKST</b> ' +
this.series.name + ': ' + this.y + ' deg';
}
},
series: [
{
name: 'Wind Direction',
data: JSON.parse("[" + wind_dir + "]"),
pointStart: Number(startDateTime),
pointInterval: 3600000
}
]
});
});
</script>
I'd like to think that I have a jsfiddle for this somewhere, will update the answer when I dig it up.
EDIT: Here's a fiddle that shows the scatter plot in action. http://jsfiddle.net/Reality_Extractor/pNFYL/
Is there any way to make a Dual Axis in Highstock like this one on Highcharts?
http://www.highcharts.com/demo/combo-dual-axes
It looks like you can do it the same way as in highcharts. Each series specifies yAxis:n where n is the axis you want to plot it against, and you need to define n yAxis entries. I modified one of the example highstock demos: http://jsfiddle.net/ykfmG/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data,
yAxis:i
};
}
yAxis: [{
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},{opposite:true},{opposite:true},{opposite:true}],