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

Don't interpolate between missing values in Highcharts line chart?

UPDATE: My question is the opposite of this one, which it's been suggested might be a duplicate. I want not to use interpolation.
I am using Highcharts 4.1.7. I have a line chart with two time series. One series has a missing (not null, missing) data point.
By default in Highcharts, the line chart joins the points on either side and ignores the missing value. Is there any way to tell Highcharts not to join points where they are missing a value present in the other series?
I know that I can manually insert null values (and the default setting of connectNulls: false will do the rest), but it seems odd that Highcharts would interpolate between missing values by default - it's definitely visually misleading.
Code:
$('#container').highcharts({
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b \'%y'
}
},
series: [{
data: [{ x: 1362096000000, y: 29.9}, { x: 1364774400000, y: 71.5}, { x: 1367366400000, y: 106.4}, { x: 1370001600000, y: 99.9}, { x: 1372636800000, y: 108.4}]
},
{
data: [{ x: 1362096000000, y: 19.9}, { x: 1364774400000, y: 44.5}, { x: 1367366400000, y: 88.4}, { x: 1372636800000, y: 76.4}]
}]
});
JSFiddle here: http://jsfiddle.net/rnshabuf/
Renders like this:

The chart has no way of knowing what you consider "missing".
There are any number of reasons that a data set may have very valid gaps of any size between points - not all data occurs at regular intervals.
You need to pre-process your data and fill in what's missing according to the definition of your specific data, and how you want to handle it (how missing values should be treated in a time series is a wide topic with a lot of varied opinions).

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:

Highcharts - curves goes outside the box

Curve goes sometimes outside the box. I tried to play with margins and height to give it more space but couldn't get my way arround it..
Any ideas fellas ?

Try setting different values for yAxis max parameter. For example, set it to 2 or some greater value:
yAxis: {
title: {
text: 'messages'
},
labels: {
y: 20
},
min: 0,
max: 2,
...

Highcharts : Display the labels (min, max, median etc.) in boxplot

I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.

Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.

Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}

Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/