Develop Reference

How to make a Highcharts bar disappear?

I'm trying to think of a way where a user can click a button and cause a Highcharts bar to disappear.
For example, in my Highcharts code here:
$(function(){
Highcharts.setOptions({
colors:['#49acdd'],
chart:{
style: {
fontFamily:'Helvetica',
color:'#384044'
}
}
});
$("#chart").highcharts({
chart: {
type:'column',
backgroundColor:'#158479'
},
title: {
text: "Employer Organizations",
style: {
color: "#8A2BE2" //wmakes the text white
}
},
xAxis: {
tickWidth: 1,
labels: {
style: {
color: '#cc3737'
}
},
categories:[
'Educational and School-Based','Government Orgs','Charitable Foundation Orgs','Health-care Orgs','Market Research Orgs','Technology Firms','Human Service Orgs','Accounting/Finance Firms'
]
},
yAxis: {
gridLineWidth:0, //no gridlines
title: {
text:'',
style:{
color:'#fff'
}
},
labels: {
formatter:function(){
return Highcharts.numberFormat(this.value,0,'', ' ,');//returns ex: 1000 to 1,000
},
style:{
color:'#33FF00'
}
}
},//end of y axis
plotOptions:{
column: {
borderRadius: 4,
pointPadding:0,//paddin between each column or bar
groupPadding:0.1//Padding between each value groups, in x axis units
}
},
series: [{
name: "Employer Organizations",
data: [1,2,3,4,5,6,7,8]
}]
});
});
I know the "plotOptions.bar.events.click" exists for triggering click-based functions, but I'm unable to find a function that lets a Highchart bar disappear when clicked upon.

To disappear particular column in highcharts. Modify your plotOptions
plotOptions: {
column: {
borderRadius: 4,
pointPadding: 0, //paddin between each column or bar
groupPadding: 0.1 //Padding between each value groups, in x axis units
},
series: {
point: {
events: {
click: function() {
if (!confirm('Do you really want to remove this column?')) {
return false;
} else {
this.remove();
}
}
},
}
}
},
Fiddle Demo

last label in x axis with datetime format not coming in highchart

I have used highchart to plot chart. In which x axis has date time and y axis has numbers. but the problem is that last label on x-axis is not coming. So if you can help please help me to do it.
if i use endontick and show last label it adds 00:00:04 in end
Here is the link to jsfiddle of same code is like a 4k line code
https://goo.gl/bbwZRC
<script>
$(function () {
$('#trend1307').highcharts({
chart:{
defaultSeriesType: 'line',
events: {
load: function () {
var car = this;
$(car.series).each(function (i, serie) {
$('<li><span style="background-color: ' + serie.color + ';"></span>' + serie.name + '</li>').click(function () {
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend1307');
});
}
}
},
legend: {
enabled: false
},
title:false,
borderWidth: 1,
xAxis: {
type:'time',
title: {
text: 'Time (HH:MM:SS)'
},
categories: [ Date.UTC(2016,01,25,21,00,00)
, Date.UTC(2016,01,25,21,05,00)
, Date.UTC(2016,01,25,21,10,00)
, Date.UTC(2016,01,25,21,15,00)
, Date.UTC(2016,01,25,21,20,00)
, Date.UTC(2016,01,25,21,25,00)
, Date.UTC(2016,01,25,21,30,00)
, Date.UTC(2016,01,26,19,05,00)
, Date.UTC(2016,01,26,19,10,00)
, Date.UTC(2016,01,26,19,15,00)
, Date.UTC(2016,01,26,19,20,00)
, Date.UTC(2016,01,26,19,25,00)
, Date.UTC(2016,01,26,19,30,00)
, Date.UTC(2016,01,26,19,35,00)
, Date.UTC(2016,01,26,19,40,00)
, Date.UTC(2016,01,26,19,45,00)
, Date.UTC(2016,01,26,19,50,00)
, Date.UTC(2016,01,26,19,55,00)
, Date.UTC(2016,01,26,20,00,00)
, Date.UTC(2016,01,26,20,05,00)
, Date.UTC(2016,01,26,20,10,00)
, Date.UTC(2016,01,26,20,15,00)
, Date.UTC(2016,01,26,20,20,00)
, Date.UTC(2016,01,26,20,25,00)
, Date.UTC(2016,01,26,20,30,00)
, Date.UTC(2016,01,26,20,35,00)
, Date.UTC(2016,01,26,20,40,00)
, Date.UTC(2016,01,26,20,45,00)
, Date.UTC(2016,01,26,20,50,00)
, Date.UTC(2016,01,26,20,55,00)
, Date.UTC(2016,01,26,21,00,00)
],
type: 'datetime',
showLastLabel:true,
labels: {
format: '{value:%H:%M:%S}',
rotation: - 90,
style: {
fontSize: '9px',
color:"black"
}
},
},
yAxis: {
plotLines: [ , {
value: 25,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum Temperature 25°C',
style: {
fontSize: '9px',
color:"black"
}
},
zIndex: 3
}],
max:26,
labels: {
format: '{value:.1f}'
},
tickInterval: 1,
title: {
text: 'Temperature (°C)'
},
},
tooltip: {
valueSuffix: '°C'
},
series: [
{
name: 'T-464',
lineWidth:.75,
data: [
19.3,19.6,19.4,19.2,19.4,19.5,19.3,19.3,19.3,19.2,19.5,19.5,19.4,19.1,18.8,18.6,19,18.8,18.7,18.6,18.7,18.6,18.6,18.5,18.4,18.4,18.5,18.4,18.4,18.3,18.2,18.2,18.3,18.4,18.2,18.1,18.1,18.2,18.2,18,18,18.1,18.2,18.3,18.2,18.1,18.1,17.9,18,18.3,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.4,18.4,18.4,18.4,18.1,18.1,18.2,18.2,18.4,18.6,18.4,18.4,18.7,18.7,18.6,18.6,18.6,18.5,18.4,18.5,18.6,18.5,18.6,18.4,18.5,18.6,18.6,18.5,18.6,18.4,18.4,18.3,18.4,18.5,18.5,18.5,18.4,18.5,18.4,18.3,18.2,18.2,18.2,18.3,18.4,18.4,18.3,18.2,18.4,18.4,18.2,18.1,18.1,18.3,18.4,18,18.1,17.8,18,17.8,18,17.8,17.9,17.9,18,17.7,18,17.8,17.9,17.8,18.1,18,17.8,18,17.8,18.1,17.9,17.8,17.7,17.8,17.5,17.8,17.8,17.7,17.7,17.9,17.8,17.7,17.9,17.6,17.9,17.6,17.9,17.7,17.9,17.8,17.6,17.8,17.8,17.8,18,18,17.9,18.1,18.3,18.2,18.1,18.1,18.4,18.2,18.1,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.1,18.1,18.2,18.4,18.3,18.2,18.2,18.1,18,18.1,18,18.1,18.3,18.3,18.2,18.1,18.1,18.1,17.9,18,18.1,18,18,18,18,18.1,18.1,18,18,17.9,18,18.1,18.3,18.3,18.2,18.3,18.1,18,18,18.1,18.1,18.1,18.1,18.5,18.3,18.3,18.3,18.2,18.1,17.9,18,18,18.1,18.4,18.3,18.3,18,18,17.9,17.8,17.9,17.8,17.8,18.1,17.9,17.8,17.6,17.9,17.8,17.8,17.8,17.8,17.7,17.8,17.8,17.8,17.9,17.8,17.6,17.7,17.9,17.8,17.7,17.6,17.6,17.7,17.7,17.7,17.6,17.6,17.6,17.7,17.6,17.5,17.8,17.7,17.8,17.8,17.9,18.1,17.7,17.7,17.8,17.9,17.8,17.5,17.8,17.7,17.9,17.7 ],
}
, {
name: 'T-2306',
lineWidth:.75,
data: [
21.1,21.3,21.2,20.9,21.2,21.2,21,20.9,20.8,20.7,21,20.8,20.5,20.1,19.8,19.5,19.8,19.6,19.5,19.5,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.2,19.2,19.1,19.1,19.1,19.1,19.1,19,18.9,19,19.1,19,18.8,18.9,18.9,18.9,19.1,19.2,19.3,19.3,19.4,19.6,19.8,19.7,19.9,20.1,20.2,20.3,20.3,20.3,20.2,20.2,20.3,20.2,20.2,20.2,19.9,19.9,20.1,20.1,20.2,20.3,20.2,20.2,20.4,20.3,20.2,20.3,20.3,20.2,20.2,20.6,20.4,20.3,20.4,20.3,20.4,20.4,20.4,20.4,20.4,20.3,20.3,20.2,20.4,20.4,20.4,20.4,20.3,20.5,20.3,20.2,20.2,20.1,20.2,20.2,20.3,20.2,20.2,20.2,20.3,20.2,19.9,19.8,19.8,19.8,19.8,19.3,19.1,18.9,18.9,18.8,18.8,18.7,18.7,18.8,18.8,18.6,18.8,18.6,18.8,18.5,18.8,18.7,18.7,18.8,18.6,18.8,18.7,18.6,18.5,18.4,18.2,18.4,18.4,18.4,18.4,18.4,18.4,18.4,18.6,18.3,18.6,18.3,18.5,18.4,18.6,18.4,18.4,18.4,18.4,18.6,18.9,18.9,19,19.4,19.6,19.5,19.4,19.4,19.7,19.5,19.6,19.6,19.8,19.8,19.9,19.9,19.9,19.8,19.8,19.9,19.8,19.8,19.9,20,20.1,19.9,19.9,19.8,19.8,19.9,19.8,19.8,20,20,20,19.8,19.7,19.8,19.6,19.7,19.7,19.6,19.6,19.7,19.7,19.8,19.9,19.8,19.8,19.7,19.7,19.8,19.9,20,19.9,19.9,19.8,19.7,19.5,19.5,19.3,18.8,18.7,18.9,18.7,18.6,18.6,18.6,18.5,18.4,18.4,18.4,18.6,18.8,18.7,18.8,18.4,18.4,18.4,18.4,18.4,18.3,18.3,18.4,18.3,18.3,18.2,18.3,18.3,18.3,18.2,18.3,18.2,18.2,18.3,18.3,18.3,18.2,18.2,18.2,18.3,18.2,18.2,18.1,18.1,18.2,18.1,18.1,18.1,18.1,18.2,18.2,18,18.1,18.3,18.2,18.3,18.2,18.3,18.6,18.1,18.2,18.3,18.4,18.2,18,18.3,18.2,18.4,18.3 ],
}
, {
name: 'T-2282',
lineWidth:.75,
data: [
7.3,17.1,17.1,17.3,17.2,17.3,17.3,17.4,17.4,17.4,17.5,17.3,17.4,17.6,17.6,17.7,17.6,17.6,17.8,17.6,17.7,17.8,17.7,17.7,17.6,17.7,17.7,17.9,17.8,17.8,17.8,17.8,17.8,17.8,17.8,17.7,17.8,17.7,17.7,17.8,17.8,17.7,17.8,17.9,18.6,18.4,18.4,18.4,18.4,18.3,18.2,18.4,18.4,18.6,18.9,18.8,18.9,18.5,18.6,18.4,18.4,18.4,18.3,18.4,18.7,18.6,18.5,18.2,18.5,18.4,18.3,18.4,18.4,18.2,18.4,18.6,18.5,18.5,18.3,18.4,18.4,18.6,18.4,18.4,18.3,18.3,18.2,18.3,18.3,18.2,18.1,18.2,18.3,18,17.8,18.1,17.9,18,17.9,17.9,18.3,17.7,17.8,18,18.2,17.9,17.5,17.9,17.8,18.1,17.9 ],
}
, {
name: 'T-2089',
lineWidth:.75,
data: [
19.6,19.6,19.7,19.5,19.7,19.6,19.6,19.5,19.4,19.5,19.7,19.6,19.3,19.2,19,18.7,18.9,18.8,18.7,18.7,18.7,18.7,18.6,18.5,18.6,18.5,18.5,18.4,18.4,18.3,18.4,18.3,18.4,18.4,18.3,18.2,18.2,18.2,18.1,17.9,18,18.1,18.1,18.2,18.1,17.9,17.9,17.8,17.8,17.8,17.7,17.7,17.7,17.7,17.8,17.8,17.8,17.7,17.7,17.8,17.8,17.7,17.7,17.5,17.6,17.6,17.6,17.6,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.6,17.6,17.7,17.5,17.4,17.4,17.3,17.4,17.4,17.5,17.5,17.4,17.4,17.4,17.3,17.4,17.5,17.4,17.5,17.5,17.6,17.4,17.4,17.4,17.5,17.5,17.5,17.6,17.6,17.6,17.6,17.6,17.6,17.4,17.4,17.5,17.5,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.8,17.8,17.6,17.7,17.7,17.8,17.6,18,17.9,17.8,17.9,17.7,18.1,18,17.9,17.9,17.8,17.6,17.7,17.9,17.9,17.9,17.9,17.8,17.8,17.9,17.7,17.9,17.7,17.9,17.8,17.9,17.8,17.8,17.9,17.8,17.9,17.8,17.7,17.6,17.7,17.7,17.6,17.5,17.5,17.7,17.6,17.6,17.7,17.7,17.7,17.7,17.7,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.8,17.9,17.9,18.1,18.2,18.3,18.2,18.3,18.4,18.5,18.5,18.4,18.4,18.6,18.4,18.5,18.6,18.5,18.5,18.4,18.4,18.5,18.7,18.8,18.8,18.7,18.8,18.8,18.8,18.8,18.8,18.8,18.8,18.9,19,18.9,18.9,19.1,19.2,19.5,19.4,19.4,19.4,19.5,19.4,19.3,19.3,19.2,19.4,19.6,19.6,19.7,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.4,19.3,19.3,19.1,19.1,19.1,19,19.1,19.3,19.1,19.2,19.3,19.2,19.1,19.1,19.1,19.1,19.2,19.1,19.1,19.1,19,19,19,18.9,18.8,18.8,18.8,18.8,18.6,18.4,18.4,18.3,18.4,18.2,18.3,18.5,18.2,18.2,18.2,18.4,18.2,17.9,18.1,18.1,18.2,18.3 ],
}
],
plotOptions:{
line:{
marker:{
enabled : false
}
}
},
legend:{
enabled:false
}
});
});</script>

Don't use categories. In your case:
Set xAxis.type to datetime (not type: 'time'!). Remove categories, or at least replace categories with tickPositions.
If you have regular interval between points, use series.pointStart and series.pointInterval (or pointIntervalUnit). If your data may be irregular, then change your data format. Currently you have data: [value, value, value]. Instead use data: [ [timestamp, value], [timestamp, value], [timestamp, value] ]
Add xAxis.tickInterval option - for example 3600 * 1000, to determine where ticks should appear.
Add xAxis.maxPadding = 0 option - so last tick won't exceed extremes.
That's all. Example with regular interval between points: https://jsfiddle.net/txuhs36t/2/

how to create a column char with highcharts where each column has a different color

I´ve a chart using highcharts, the only problem is that each column has the same column.
What should I do so each column has a different column.
Here is my code:
var charts = [];
$containers = $('#container1');
var datasets = [
{
name: 'Tokyo',
data: [49, 57]
}];
var cat = ['A', 'B'];
console.log(datasets);
$.each(datasets, function(i, dataset) {
console.log(dataset);
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'column',
marginLeft: i === 0 ? 100 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
xAxis: {
categories: cat,
labels: {
enabled: i === 0
}
},
yAxis: {
allowDecimals: false,
title: {
text: null
}
},
legend: {
enabled: false
},
series: [dataset]
}));
});
Thanks in advance.

To have each column be a different color, all you have to do is set the colorByPoint property to true.
Reference:
http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint
Alternatively you can make each column a separate series, which gives you additional levels of control.
OTOH, in the majority of cases, having each column a separate color serves no purpose except to clutter and confuse the data, and make the user work harder cognitively to interpret the chart.
If you want to highlight a single column for a particular reason, you can do that by adding the fillColor property to the data array:
Something like:
data:[2,4,5,{y:9,fillColor:'rgba(204,0,0,.75)',note:'Wow, look at this one'},4,5,6]

I finally found a way to show more than 1 color for each column:
var charts1 = [];
var $containers1 = $('#container1');
var datasets1 = [{
name: 'Dalias',
data: [29]
},
{
name: 'Lilas',
data: [1]
},
{
name: 'Tulipanes',
data: [15]
}];
$('#container1').highcharts({
chart: {
type: 'column',
backgroundColor: 'transparent'
},
title: {
text: 'Montos pedidos por división'
},
tooltip: {
pointFormat: '<span style="color:{series.color};" />{series.name} </span>:<b>{point.y}</b>',
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series : {
cursor: 'pointer',
point: {
events: {
/*click: function() {
verDetalle("Especialidades,"+ this.series.name);
}*/
}
}
}
},
credits:{
enabled: false
},
yAxis: {
min: 0,
title: {
text: ''
}
},
xAxis: {
categories: ['División']
},
series: datasets1
});

chart width changes when a trendline is added in highcharts

I'm facing a serious problem. Whenever I try to add any trendline starting from a bit below to the top of the chart (near about 70-85 degree angle), it changes its width. But in case of vertical and horizental line I'm not facing the problem. Is there any way to prevent this?
My code is:
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my JSfiddle.
Please check the images also.
Normal chart
Chart with trendline

This is normal. It is adjusting the height of the chart (not the width) to accommodate the points you are adding. It adds a little buffer to make the chart point a bit more readable.

You can also use min/max parameters or set tickPositions / tickPositioner to keep ticks always in the same postions.
Docs: http://api.highcharts.com/highcharts

How do I make a Tornado Chart using Highcharts

I am trying to prepare a Tornado Chart using the column chart in Highcharts. Here is my fiddle.
My current code is:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Net Sales'
},
subtitle: {
text: 'MM $'
},
xAxis: {
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs']
},
yAxis: {
title: {
text: 'MM $'
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y;
}
}
},
scatter:{
marker:{
symbol:'line',
lineWidth:11,
radius:8,
lineColor:'#f00'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[12.15, 46.86],
[15.45, 42.28],
[27.77, 31.24]
]
},
{
name:'Base',type: 'scatter',data:[120],
}]
});
The problem is that the last series (Annual Costs) does not show, as it is in reversed order. Also, I'd like the Tornado Chart to look more like this:
Note that the labels in this chart are different from the actual values plotted. Also note that the bar in the center - in the example code, there would be a vertical line at 29.5. I would also like to support a combined uncertainty bar like the one at the bottom. Any suggestions would be greatly appreciated.

Your last bat is not showing, because first number is lower than second, see: http://jsfiddle.net/kErPt/1/
If you want to display another values at labels, then add that info first. Example:
data: [{
low: 12,
high: 15,
lowLabel: 35,
highLabel: 46
}, {
low: 2,
high: 35,
lowLabel: 15,
highLabel: 26
} ... ]
And then use dataLabels.formatter for series.
To add vertical line use plotLines.
I'm not sure what is the last bar called 'combined uncertainty'.

I've used Highcharts with separate series (thanks jlbriggs) to create a Tornado Chart: http://jsfiddle.net/uRjBp/
var baseValue = 29.5;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//type:'column'
//type:'area'
//type:'scatter'
//type:'bubble'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
tooltip: {
formatter: function() {
var msg = "";
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
var low = round(this.series.chart.series[0].data[index].y+baseValue);
var high = round(this.series.chart.series[1].data[index].y+baseValue);
if (this.x === "Combined Uncertainty") {
msg = "Combined Uncertainty in "+outputTitle+": "+low+" to "+high;
} else {
var lowLabel = this.series.chart.series[0].data[index].label;
var highLabel = this.series.chart.series[1].data[index].label;
msg = '<b>'+outputTitle+'</b> goes from '+ low +' to '+ high+'<br/> when '+this.x +
' goes from <br/> '+lowLabel+" to "+highLabel;
}
return msg;
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y+baseValue;
}
return this.key === "Combined Uncertainty" ? "":this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals:false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty']
},
yAxis: {
title: {
text: 'MM $'
},
labels: {
formatter:function() {
return this.value+baseValue;
}
}
},
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[{y:12.15-baseValue, label:10},{y:15.45-baseValue, label:1},{y:31.25-baseValue, label:2},{y:12.15-baseValue, color:'#99CCFF', label: ""}],
labels:[10,1,2,]
},{
name: 'High',
grouping:false,
type:'bar',
data:[{y:46.86-baseValue, label:30},{y:42.28-baseValue, label:3},{y:27.77-baseValue, label:4},{y:46.86-baseValue, color:'#99CCFF', label:""}],
labels:[30,3,4,]
},
{
name: 'Median',
type: 'scatter',
data: [null,null, null,27-baseValue],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
function round(num) {
return Math.round(num*100)/100;
}

usually, this kind of chart is done using a separate series for the left and right portions
One way to do this is by setting one set of data as negative numbers, and then using the formatters to make the axis labels, datalabels, and tooltips display the absolute values
example:
http://jsfiddle.net/jlbriggs/yPLVP/68/
UPDATE:
to show a line as in your original chart, you can extend the marker symbols to include a line type, and use a scatter series to draw that point:
http://jsfiddle.net/jlbriggs/yPLVP/69/
If you don't want to have the extra code for the line marker type, you could use any of the other existing marker symbols for the scatter series.