Develop Reference

PLotLines In HighCharts Overlapping || React highCharts || YAxis Interval

I am developing a barchart in React Js using React HighCharts Library. So in some of the case my data interval is not linear(diffrence between min value and max is very large). so the plotlines are overlapping. Sharing the image for reference.
Please help me to solve this i want my label to show clearly.
In this Image i have 2 plot lines valued at 0.66 and some nearby value 0.5 or so.
They are overlapping. Please help to solve this case.
Thanks.

Highcharts doesn't provide any mechanism for handling overlapping plot lines - it has to be done manually.
Plot line labels can be adjusted by using y property:
plotLines: [{
value: 22,
color: 'red',
width: 1,
label: {
text: 'First label',
y: 13
}
}
Live demo: http://jsfiddle.net/BlackLabel/zm5fk3rw/
If you're looking for more dynamic approach place the code responsible for changing the position of labels in chart.events.load callback.
Current y position of label is kept in yAxis.plotLinesAndBands[i].label.alignAttr.y property. yAxis.plotLinesAndBands[i].label is SVGElement so its y position can be changed like this: yAxis.plotLinesAndBands[i].label.attr({y: newValue}).
Starting point for implementing dynamic logic for positioning plot line labels: http://jsfiddle.net/BlackLabel/1vh940kj/
API references:
https://api.highcharts.com/highcharts/yAxis.plotLines.label.y
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Plot line value property works the same as y in points - it reflects the real value and it's normal that plot lines overlap when they have almost the same value.
If you want to change its y position anyway you can use the same approach that I proposed for dynamic positioning of the labels (current y position of the label can be extracted from yAxis.plotLinesAndBands[0].svgElem.d property):
Starting point for implementing dynamic logic for positioning plot lines: http://jsfiddle.net/BlackLabel/t2hxrwp5/

Start graph rendering after left sided labels in Highstock

In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance

OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/

Incorrectly displayed plot band icon in Highcharts

I am trying to create a graph with plot bands in Highcharts, where I want to insert an icon into the plot band.
It all works well except that I cannot get the icon to show below the actual series line. I set the zIndex of the icon to 1 and series to 2, but it seems to not do anything.
I looked at the documentation here:
http://api.highcharts.com/highcharts/xAxis.plotBands.zIndex
But it should work based on that, but it does not, it works when I use text for the label, but not an image and the object has no specific class or ID so that I could target it with jquery and set the css manually.
To illustrate my point I made a fiddle:
http://jsfiddle.net/qwfj4x3j/
I used for example
{
color: null,
zIndex: -1,
from: 3.5,
to: 4.5,
label: {
text: "<img src='http://simpleicon.com/wp-content/uploads/rain.png' style='width:100px;z-index:-1'>",
verticalAlign: 'top',
useHTML: true,
y: 25
}
},
As you can see, I set the zIndex of both the plot band and the actual image, and a higher zIndex for the series, but it does not work.

OK, so in the end I found a very elegant solution :)
I gave all the images a class and then after the graph is rendered, I call jquery command that targets all parent elements of this class, the span I originally needed to target, but could not because it had no class or id. Now I can call all these as parents of my image with particular class, asign them z-index of -1 and it works :)

If you render an image in that way HTML <img> will be rendered at the top of the svg - this is why the image covers svg elements.
Instead, you can use chart.renderer.image() method combined with axis.toPixels() methods to get x, y attributes in pixels.
var img;
function renderImage() {
var chart = this;
img = chart.renderer.image(
'http://simpleicon.com/wp-content/uploads/rain.png',
chart.xAxis[0].toPixels(0),
chart.yAxis[0].toPixels(10),
150,
150
)
.add();
}
function redrawImage() {
img.attr({
x: this.xAxis[0].toPixels(0),
y: this.yAxis[0].toPixels(10)
});
}
Example: http://jsfiddle.net/qwfj4x3j/2/
To have the image responsive like plot lines you need to adjust x, y attributes on redraw event.

Highcharts not rendering properly on legend clicks

Problem:
When series of the charts are set hidden and visible by clicking the legends the YAxis on right side do not render properly:
enter code here
http://jsfiddle.net/yzqdekhr/5/
Steps To Reproduce:
1) Click Diversion % Monthly Legend and Hide right side y axis
2) Click on both Diverted Tons and Trash Tons Legend (Complete chart will be blank)
3) Click Diversion % Monthly Legend to show it again
4) Click both Diverted Tons and Trash Tons Legend to show chart data
See now both axis have their own plotlines which should not be, see below image
Expected Result
Plot lines must be common as in the first load

This is a known issue reported as a bug here - https://github.com/highslide-software/highcharts.com/issues/4374
Suggested workaround is to add a wrapper that will realign ticks.
H.wrap(H.Axis.prototype, 'setScale', function(p) {
if(this.options.alignTicks !== false || this.chart.options.alignTicks !== false) {
this.forceRedraw = true;
}
p.call(this);
});
})(Highcharts)
JSFiddle example: http://jsfiddle.net/q6sr1c0f/

The problem is with how the secondary axis acts - when removing all and drawing the Diversion % there is no data or primary axis to be dynamically linked to.
The only way I can think of doing what you want without getting the double axis line is to set the second Yaxis linkedTo option to the first one.
This will make sure that if there is no first Yaxis the plot will not render new lines. This present another problem because now the Diversion % line is not painted at all (if the others are not visible) so you will have to set a min and max value for the first Yaxis.
JSnippet Demo
//Added to the second Yaxis:
linkedTo: 0;
//Added to the first Yaxis:
min: 0;
max: 100;

Individual positioning of x-axis labels in a polar highchart

I have a polar highchart with 12 categories. Since x-axis labels contain up to 4 lines, automatic label y-positioning is slightly off for the categories on the top and the bottom. It looks similar to this example, but in my case, the labels overlap with the chart area, not with each other. So I need to subtract a few pixels from the y-coordinate of the labels on the top and add a few pixels for the category labels at the bottom.
I tried setting the offset parameter of the x-axis, but this shifts up or down all labels by the same amount:
xAxis: {
offset: 20
}
I also tried adding a callback function to the formatter of the x-axis labels, but I just can't figure out how to adjust every category label position.

this is a solution of highchart Heldesk
http://jsfiddle.net/crguqmsv/1/
function(chart){
var len = chart.xAxis[0].ticks.length;
$.each(chart.xAxis[0].ticks,function(i,tick){
if(i>=0 && i<=90) {
console.log(tick.label.attr({
rotation:-45
}));
}
});
}

You can adjust the position of the labels with the "x" and "y" options within the "labels" category under the axis definition.
labels: {
x: 20,
y: 10
}
In the above case, the labels will be 20px right and 10px down from their default position.
EDIT: I re-read the title, and Im sorry, this is for all the labels, not individually. My Bad.