We Keep Coding

Highcharts - Alignment issue on 3rd Y axis

I have three Y axis and two of which has got multiple spline series to be shown. My data is a time series data and it is all working as expected. Just that the labels of one of the Y axis is mixing up with chart area.
https://codesandbox.io/s/github/ismusidhu/yaxis_alignment_issue_highcharts/tree/master/

You can resolve it by setting appropriate yAxis.offset:
yAxis: [{
title: {
text: "POAI [W/m2]"
},
opposite: true,
offset: 70,
min: 0,
labels: {
format: "{value} W/m2"
}
}]
Demo:
https://codesandbox.io/s/alignment-of-highcharts-tertiary-y-axis-issue-bo7h4

Highchart plotLines z Index between series z Index

I am trying to create a fiddle, mocking up the image attached
in following jsfiddle
http://jsfiddle.net/2TuCW/162/
The problem is I want the plotLines between blue line and green column.
I tried changing the zIndexes of plotLines (10) , between blue line (15) and green column (5) in following fiddle
http://jsfiddle.net/2TuCW/163/
//plotLines zIndex
"plotLines" : [
{
"color": '#E5E7EB',
"zIndex": 10,
"width": 2,
"value": 20
},
....
....
//Series data z-index
"series": [{
"type":"column",
"data": [35,39,49,50,57,58],
"zIndex":5
....
....
"series": [{
"type":"line",
"data": [35,39,49,50,57,58],
"zIndex":15
But it is not working as expected. Please suggest how to achieve it.

It is related with fact that all series have the same zIndex.
Related topic: https://github.com/highslide-software/highcharts.com/issues/3321

Try to adjust the values of the plotLines.
If you want a plot line to be between blue line and green column the value of the plotLines has to be between the data of blue line and data of column.

Unfortunately, it seems that plotLines can either be in front of all series or behind all series. This is because all series are grouped under a common element. A plotLine element is a sibling to the group element, not a sibling to the individual series elements.

This issue relates to the fact that all series are drawn within the same group, and therefore have the same z-index related to other groups. A related GitHub issue has discussion and code examples.
See this one example solution, proposed by Torstein Hønsi (Highcharts creator). I've made a modified, minimal, reproducible example here:
/**
* Plugin to allow plot band Z indexes in between series
*/
Highcharts.wrap(Highcharts.PlotLineOrBand.prototype, 'render', function (proceed) {
var chart = this.axis.chart;
proceed.call(this);
if (!chart.seriesGroup) {
chart.seriesGroup = chart.renderer.g('series-group')
.attr({ zIndex: 3 })
.add();
}
if (this.svgElem.parentGroup !== chart.seriesGroup) {
this.svgElem
.attr({ zIndex: this.options.zIndex })
.add(chart.seriesGroup);
}
return this;
});
Highcharts.chart('container', {
xAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 3.5,
zIndex: 10
}]
},
series: [{
data: [7988, 12169, 15112, 22452, 34400, 34227],
zIndex: 9
}, {
data: [8105, 11248, 8989, 11816, 18274, 18111],
zIndex: 11
}]
});
The code uses Torsteins plugin to allow the plotline in between series. See the GitHub issues for discussion on caveats and potential improvements.

flot jquery is it possible to draw this kind of chart

I used to draw this kind of chart (one vertical axis, one horizantal axis):
Now i have been asked to do this kind of chart:
as you see, the problem with the ordered chart that it contains (two vertical axis, one horizantal axis).
My question
does flot or any other jquery library able to do that please?

See the flot example here on multiple axis. Minimal example:
$.plot("#placeholder", [
{ data: d1 },
{ data: d2, yaxis: 2 } // set second series to use second axis
], {
yaxes: [ {
min: 0 // options for first axis
}, {
alignTicksWithAxis: 1 // options for second axis, put it on right
position: "right"
} ],
});
Two mix a bar and line chart set that in each's series object:
$.plot("#placeholder", [{
data: d1,
lines: { show: true }
}, {
data: d2,
bars: { show: true }
}]);
Putting these together, here's an example:

Tick and label for every xAxis Unit in Highcharts Chart

I have a chart like the one in this fiddle: http://jsfiddle.net/h9Bqj/
As shown in the image there is no tick for "3" and "5" on the xAxis as well as no label. I am not able to figure out how to show a tick for every xAxis.
The [...]
xAxis: {
labels: {
step: 1
},
tickInterval: 1
}
options did not work for me.
How would I get a tick and a label for every increment?

Set tickInterval as 1, as you have, and add pointInterval as 1.
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
http://jsfiddle.net/h9Bqj/1/

Actually I figured it out by myself.
Setting pointRange via plotOptions: {
column: {
stacking: 'normal',
pointRange: 1
}
}, in the options or in the series does the trick.
See: http://jsfiddle.net/DZbyp/1/

Change axis scale with LogAxisRenderer

I plot data with jqPlot using logAxisRenderer to have two logarithmic axes.
Everything is fine except of two problems:
jqPlot creates a lot of empty space between 0 and 1.
There are two zeros on the x-axis, since I format the numbers to "%'i" (one for 0.0 and one for 0.5).
I tried to use min:1 and max:100000 in order to hide the empty space and the zeros. But this didn't work. The resulting plot has no line and all x-axis labels are on the same spot on the left side of the axis.
Here is the code I use to create this plot:
$.jqplot(divId, [ line ], {
title : title,
series:[{showMarker:false}],
axes : {
xaxis : {
label:'Users',
renderer : $.jqplot.LogAxisRenderer,
tickOptions:{
tickDistribution: "power",
formatString: "%'i"
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
yaxis : {
label:'Frequency',
renderer : $.jqplot.LogAxisRenderer,
tickOptions:{
tickDistribution:"power",
formatString: "%'i"
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
},
});

You can use force ticks to solve this problem:
$.jqplot(divId, [ line ], {
title : title,
series:[{showMarker:false}],
axes : {
xaxis : {
label:'Users',
renderer : $.jqplot.LogAxisRenderer,
ticks: [1, 10, 100, 1000, 10000],
tickOptions:{
tickDistribution: "power",
formatString: "%'i"
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
// ...
},
});
This does not really solve your problem in a general way, but it does help. For me (jqPlot 1.0.4r1121) setting "min: 1" results in the behaviour you described. Settings both "min: 1" and "max: 10000" works for me but does not set power distributed ticks but even spaced ones.