I am using Highstock charts with single series having flags on it where x-axis is 'datetime' type and y-axis is any numerical value. Now initially when chart loads I provide bit of padding on x-axis using attribute "max" so that end point doesn't touch the edge (which is working fine) but as I drag the navigator, the padding gets lost and the point touches the edge.
Is there any way of maintaining that padding on graph line even after I drag the navigator?
Any help would be greatly appreciated...
Unfortnately maxPadding works only for first time, as you ddescribed, but you can catch adterSetExtremes and then (setExtremes](http://api.highcharts.com/highstock#xAxis.events.setExtremes) to modify range on chart.
Thanks a lot Sebastian Bochan.....It worked for me!!!!. Just in case if anyone needs it. Here is what I have done
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
Padding_value is a variable proving padding every time navigator is triggered
Related
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
I have two charts that are synchronized. They have a margin left to make sure they are uniformly aligned. I have situations where I have multiple yAxis that can get turned on and they are on the right side opposed to the left. I attempted to use the same marginRight approach but when a second, third, or fourth axis gets added to the right it won't show up because there isn't enough room. So I am dealing with a dynamic amount of space over there on the right side. Highcharts handles the dynamic aspects when it's just one chart but I need my second chart to have the same margin even tho it doesn't have these additional yAxis. It's important that this time series data remains aligned in the two charts.
What is the approach to handle this?
UPDATE:
I created a simple jsFiddle here: http://jsfiddle.net/28hrffv7/
In my real-world example, I have showEmpty set to false and a series which is hidden by default.
{ opposite: true, title: { text: 'Random Text' }, showEmpty: false}
When they turn it own the series is rendered and the axis and title is added. This example shows that the first charts doesn't realize that the 3rd chart has 3 axis and as a result should have more marginleft
Update 2: Updated JS fiddle to show the more dynamic nature of the problem. When you toggle a series in the legend you can observe axes getting added and removed which is feature that is wanted. What is required is to keep all the charts synchronized in the width of the plotable area so they all line up correctly. http://jsfiddle.net/28hrffv7/3/
You could hard-code marginRight as well as marginLeft.
Demo #1: http://jsfiddle.net/28hrffv7/1/
Or check which marginRight is the highest and update all chart with the new setting. Relevant part of the code:
}, {
data: []
}]
}, function(chart){
if (chart.marginRight > topMarginRight) {
topMarginRight = chart.marginRight;
console.log(topMarginRight);
}
});
}); // end of the each function creating the charts
$.each(Highcharts.charts, function (i, chart) {
chart.margin[1] = topMarginRight;
chart.isDirtyBox = true;
chart.redraw(false);
})
Demo #2: http://jsfiddle.net/28hrffv7/4/ (for Highcharts < 5.0.0)
UPDATE:
With Highcharts 5+ the same is possible through a chart update.
$.each(Highcharts.charts, function (i, chart) {
chart.update({
chart: {
marginRight: topMarginRight
}
});
})
Demo #3: http://jsfiddle.net/28hrffv7/5/
In case of multiple series in each chart you could call a custom function for events like load, redraw, afterAnimate.
Demo #4: http://jsfiddle.net/acjaLxj1/1/
I am drawing a line chart with monthly data points. However, I want the scale to display year strings only.
So far, so easy. However, as far as I can see, Highcharts will always draw the xAxis labels relative to the ticks... and I am required to display them centered between ticks.
Is there some simple way of doing this that I am missing, please...?
According to my understanding, the behavior you desire is: http://jsfiddle.net/msjaiswal/U45Sr/2/
Let me break down the solution :
1. Monthly Data Points
One data point corresponding to one month :
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Scale to display only yearly ticks
Use chart options like this:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
There is no simple, out-of-the-box solution. You have to use events and reposition the labels accordingly. Here is a sample solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).
This can be done with a workaround by manually adjusting the label positioning via a callback (called on both load and redraw). Please see the fiddle linked to in my comment on this post: Highcharts - how can I center labels on a datetime x-axis?
There are several xAxis options which may help do what you want.
http://api.highcharts.com/highcharts#xAxis.labels
Take a look at 'align' which specifies whether the labels are to the left or right of the tick, and also 'x' which allows you to specify a x-offset for the label from the tick.
Have you tried to use tick placement ? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
Sometimes it is very difficult to get the Highcharts Javascript charting library to show a tool tip for certain data points. For example, try to show the tooltip of the data point at 50,50 on the below link. It is very difficult to get it to show, and it flickers a lot. Does anyone know about some workaround?
http://highcharts.com/jsbin/ogixaz/2/edit
I tried it with an update-to-date Chrome and Firefox.
have you tried:
//...
plotOptions:{
series:{
stickyTracking:true;
}
}
UPDATE:
I have to say that i looked at your embeded example and understood exactly what you meant,
but after moveing your code into the jsFiddle and setting the property shared:true (in the tooltip object), it works fine. check it... http://jsfiddle.net/yoav_barnea/LFvVy/2/
the important part is the property shared:true :
tooltip: {
formatter: function() {
return '<b style="font-size:18px;font-weight:bold;">Some very long title</b><br/>' + this.x + ":" + this.y + " <br/>and some<br/> extra stuff<br/>line<br/>line";
},
useHTML: true,
shared:true
},
UPDATE 2:
as for your other problem on getting the costom c property (that you mentioned in the comment...), the solution for that is to fix your code inside the formatter function into somthing like this: return ... this.points[0].point.c
(again, this was a new issue, not related to the first one of flickering tooltip...)
The reason the tooltip at 50,50 flickers is because the tooltip is being drawn over the point. The points to the left and right allow room for the tooltip to be drawn to the side. The reason the middle one can't be drawn to the side is that the chart is small, and the toolip is big.
Some ideas to help this situation:
1. Making the tooltip smaller.
2. Make the chart bigger (try making the right hand side bigger in your example).
3. Use the highcharts tooltip.positioner function to place the tooltip somewhere else.
My chart is ugly and I'm not sure what to do about it. It's ugly because the labels overlap and are barely readable. Ideas I've already considered:
Hide labels for small slices. This has the obvious negative of less information visible, especially when the page is printed. Our users print a lot.
Alternate big slices and little slices. Not ideal as it reduces the organization of the information and may suffer occasionally from the same issue.
Manually place each label with fixed positions. Expensive solution with regards to implementation time and code maintenance.
Anyone have a better idea? I wish highcharts was able to detect overlap and do something about it automatically. Here's the pic:
There is a new option in Highcharts to set the startAngle of the pie chart. You can use the startAngle to arrange all the small slices on the right side of the chart, allowing more of the labels to fit.
series: [{
startAngle: 90
}]
JSFiddle demo here: http://jsfiddle.net/highcharts/dK9CD/
I found a highcharts forum topic related to rotating the pie chart to better distribute labels in this sort of case, but it involves modifying the source to find the following line and change the cumulative reference to zero:
cumulative = -0.25, // start at top
One option that is not optimal but might work is to rotate the data labels a few degrees so that they don't overlap, like so:
{
plotOptions : {
pie : {
dataLabels : {
rotation : 15
}
}
}
}
I also come across the same issue. I fixed the issue with below code.
plotOptions : {
pie : {
dataLabels : {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}
}