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

How to create legend for Plotlines with Highstock of Highcharts?

I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/
I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.
In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.
This is how I've created the Plotlines:
xAxis: {
plotLines: [{
value: Date.UTC(2016, 12, 29), // year, month, day
width: 1,
color: 'blue',
dashStyle: 'ShortDash',
label: {
text: 'Category 1',
},
}, {
value: Date.UTC(2016, 11, 12), // year, month, day
width: 1,
color: 'green',
dashStyle: 'Solid',
label: {
text: 'Category 2',
}]
}

As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].addPlotLine({
....
id: 'plot-line-1'
});

As noted in my comment, there is a feature request here:
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend
Please add your votes and comments.
Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.
The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.
Example series:
{
name: 'PlotLine',
type: 'line',
color: 'rgba(204,0,0,1)',
data: [25,25,25,25,25,25,25,25,25,25]
}
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/
If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.
{{EDIT to demo vertical plot line:
First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):
yAxis: {
min: 0,
max: 75,
maxPadding: 0
}
Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:
data: [[4,0], [4,75]]
Updated fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/1/
With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:
data: [[4,0], [4,75], [5,null], [7,0],[7,75]]
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/2/

How to add gradient colors above of the chart line?

Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
yAxis: {
reversed: true,
showFirstLabel: false,
showLastLabel: true
}
I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.
Could any one help me to solve this.
I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color.
As per #DaMaxContent answer , the output will act like below image.
I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.

The break down:
You can use gridZindex and backgroundColor/fillColor properties to
produce the desired effect. Only issue is that the grid has to be
displayed over graph. Here is the solution: DEMO
Here is the code behind it:
chart: {
type: 'area',
backgroundColor: { //<<--that is what you are using as fill color
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: {
reversed: false,
showFirstLabel: false,
showLastLabel: true,
gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it
},
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : "#fff", //<<--fill color under the line to simulate effect
zIndex: 1000,
tooltip: {
valueDecimals: 2
}
}]
If you wish to get rid of the marginal color areas, you can get rid off the graphs margin with chart: { [... ,] margin: 0 [, ...] } and then use the container's padding as the graph margin.
more info:
highcharts styling guides:
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
grid Z index:
http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm
background color:
Changing HighCharts background color?
(alternative to bg color) plot background color (bg color of main plot only)
http://api.highcharts.com/highcharts#chart.plotBackgroundColor

Plotting x and y axis in a JavaScript generated chart with Flot library?

I'm using flot library and I found from the docs that I can send a json object with any option I can right at the charting call.
So let's say I call:
$.plot($("#placeholder"), [ [] ], { yaxis: { show: true, max: 100, min: -100 }, xaxis: { show: true, max: 100, min: -100} });
However this is what I get as result (with a non empty data argument):
But I don't want vertical lines marked at every axis tick, but two lines corresponding to the axis.
I don't want ending with the x=0 and y=0 plots. I would even have to obtains points arrays for it. How can I do this with flot or is there any recommended library to plot x,y points series with not much thrills.

To get lines on the axes, add this to your options object:
grid: { markings: [{ xaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 },
{ yaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 }] };
If the other lines are still present after adding this, please provide a more complete example (e.g. a fiddle).

Highcharts - Plot years on x axis

I need to plot a line on x axis when ever a new year starts. I've been trying to modify this code but i cant find a solution without "hard coding" the value on the plotLines. Thanks for the help.
xAxis: {
plotLines: [{
color: 'red',
width: 2,
value: Date.UTC(2010, 0, 1),
dashStyle: 'longdashdot'
}],
}

Just iterate over your chart data to create the needed year options array!