Bar value depend on other bar value in HighChart - highcharts

Question

I am developing bar chart using Highchart library.I created two y axis, first is for TAM and second for Share.Share is in percentage while TAM is not.For the Share y-axis value, I made the maximum value is 100 and it fixed, but for TAM the value is dynamic.
Referring to the graph
[http://jsfiddle.net/unidha/vGVRb/45/][1]
There a requirement to make Share bar height to depend on the Tam bar height. For example, currently Tam one is 12,300,000 unit and share one is 70% .Based on the graph, Share One is taller than Tam One because it has it's own axis.Now how I want to make the Share One's height is 70% from Tam One 's bar height?
Is it possible to do that?As my understanding for all this time, the bar height should be determined by the y-axis NOT based on other bar height.In case got solution for such requirement, what possibility it should be?
Here the same code that reside in above jsfiddle for your reference.
$(function () {
$('#container').highcharts({
chart: {
type:'column',
zoomType: 'xy',
alignTicks:false
},
title: {
text: 'Performance Snapshot'
},
xAxis: [{
categories: ['Tam One Share One ', ' Tam Two Share Two '],
//NUR
tickWidth:0
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value}%',
style: {
// color: '#89A54E'
color: 'FFFFFF'
},
//NUR
step:2,
y:0
} ,
min: 0,
minRange:0.1,
max:100,
title: {
text: 'Share',
style: {
// color: '#89A54E'
color: '#4572A7'
}
}
}, { // Secondary yAxis
title: {
text: 'Tam',
style: {
color: '#4572A7'
}
},
labels: {
//NUR format: '{value} unit',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Tam Unit',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [12300000, 34400000],
tooltip: {
valueSuffix: ' unit'
},
groupPadding: 0
}, {
name: 'Share',
color: '#89A54E',
type: 'column',
data: [70,40],
tooltip: {
valueSuffix: '%'
},
groupPadding: 0
}]
});
});
Thanks

Answer 1

You can do this, but you need to pass series data as calculated values, not percent, for example: http://jsfiddle.net/vGVRb/48/
tooltip: {
shared: true,
formatter: function () {
var s = this.x,
points = this.points,
len = points.length;
for (var i = 0; i < len; i++) {
var p = points[i];
console.log(p);
s += '<br><span style="color:' + p.series.color + '">' + p.series.name + '</span><span>: ' + p.point.label + '</span>';
}
return s;
}
},
series: [{
name: 'Tam Unit',
color: '#4572A7',
type: 'column',
data: [{
y: 12300000,
label: '12300000 units'
}, {
y: 34400000,
label: '34400000 units'
}],
groupPadding: 0
}, {
name: 'Share',
color: '#89A54E',
type: 'column',
data: [{
y: 12300000 * 0.7,
label: '70%'
}, {
y: 34400000 * 0.4,
label: '40%'
}],
groupPadding: 0
}]
You can observe 'label' property under data, which is used later in tooltip.formatter to make sure you will display proper tooltip. Also, values are calculated accordingly to percentage in label.