Develop Reference

how to create a highcharts area with the top area highlighted?

Area in highcharts highlights the bottom area by default.
I want to highlight the top area.
Is there a recommended way to do that?
Based on this demo, I can change the threshold to 250 to get similar result (as shown in My Expectation)
The only solution I can come up with is:
find out the max y of all data points.
let MAX = k * y_max. (k is a custom-defined factor, say, 1.2; to get better result, y_min is also needed to get a proper k dynamically)
Use the following configuration.
yAxis: {
max: MAX
},
plotOptions: {
series: {
threshold: MAX
}
}
But this requires some js computation and I wonder if highcharts supports this itself.
UPDATE:
I think I'd better state my original question here. I want to support 3 types of areas:
Within Upperbound and Lowerbound
Below lower bound
Above upper bound
I implemented the first one with arearange. But arearange doesn't support missing upper/lower bound; it will remove the thresholds altogether if one bound is missing.
Is there a way to avoid computing the threshold setting by myself?

Using CSS you can obtain something similar to your picture:
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
color: '#ff0000',
fillColor: '#ffffff',
fillOpacity: 1
}]
});
.highcharts-plot-background {
fill:rgba(255,0,0,0.5);
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
or almost identical using threshold together with negativeColor:
Highcharts.chart('container2', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
color: "#FF0000",
fillColor: '#f00000',
fillOpacity: 0.5,
threshold: 300,
negativeColor: '#f00000',
negativeFillColor: 'rgba(255,0,0,0.5)'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container2" style="height: 400px"></div>
Here is a fiddle: http://jsfiddle.net/beaver71/0sameLb6/

Thanks #TorsteinHonsi.
I posted a issue, and #TorsteinHonsi responded quickly and commited a change. area will support -Infinity/Infinity shortly.

Highcharts not connecting polar chart ends if first or last value is null

I have a polar chart example at:
http://jsfiddle.net/xfvjg7np/1/
If the first value in the series is null it will not connect the ends.
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
connectNulls: true,
// First value is null in series
data: [null, 71.5, null, null, null, null, null, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Is this a known bug or is there a way to make them connect?

Padding between column and y axis line - is this possible?

I've searched everywhere in the highcharts api, and I am wondering if this is possible.
Please see the attached screenshot...
Is it possible to have the columns distanced from the edge of the chart boundaries like so? The y axis grid line should still take up the entire width of the chart.
Edit: The distance BETWEEN the columns needs to be less than the distance between the columns and the edge of the chart. Imagine a box encapsulating the columns, i'm concerned with the padding between this 'box' and the edge of the chart.
Thanks!

You can put some empty columns on both ends and add empty strings to their categories working example.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
tickWidth: 0,
categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', '']
},
series: [{
data: [null, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, null]
}]
});
});

Depending on how your chart is set up, you can use minPadding and maxPadding on the xAxis. e.g.
xAxis: {
minPadding: 0.2,
maxPadding: 0.2
},

Highcharts label formatter return inside and outside if statement? Is this correct?

Using highcharts label formatter
http://api.highcharts.com/highcharts#yAxis.labels.formatter
I'm using the code below to customize the first label, and return the values for all others. Is this how I should use return twice within the formatter? While it works i'm just checking that there isn't a better way to write the function. I'm a little new to js and wondering if the returned data could be combined some how?
Thanks
jsfiddle here
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels: {
//align: 'left',
//x: 0,
//y: -2,
useHTML: true,
formatter:function(){
if(this.isFirst){
return 'test';
}
return this.value;
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});

Changing the color of the point dynamically in highcharts

I have been able to change the color of point in a graph dynamically, but when I hover over that point then the color of that point is changing to previous color.
I have a fiddle here: jfiddle
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// the button handler
$('#button').click(function() {
chart.series[0].data[2].graphic.attr({ fill: '#FF0000' });
chart.redraw();
});
How can I change the color of the point dynamically in a graph?

I think you are looking to update the marker color dynamically.
you can use update functionality for this
chart.series[0].data[0].update();
Here is a jsFiddle for your reference. I hope this will be useful for you.

is this what you are looking for?
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-select-fillcolor/
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
}
}