Highcharts - combining column chart with scatter chart - asp.net-mvc

Question

I have one column chart, representing two categories on X-axis - ARRIVALS and DEPARTURES. Then, I have 4 series representing different commodities, one commodity per each category. This will end up in having 8 columns draw on the chart.
What I'm trying to do, is to add a scatter chart, representing one point per each bar ( a total of 8 points), but unfortunately, I only can add one point per category. Can this be implemented?
Here is the code that I used for this (it is MVC .NET):
Highcharts barChartArrivalsDepartures = new Highcharts("ArrivalsDepartures")
.InitChart(new Chart
{
BorderColor = Color.Black,
BorderRadius = 0,
BorderWidth = 2
})
.SetTitle(new Title { Text = "Arrivals and Departures" })
.SetXAxis(new XAxis { Categories = new[] { "Arrivals", "Departures"} })
.SetYAxis(new YAxis
{
Min = 0,
Title = new YAxisTitle { Text = "Count [t]" }
})
.SetLegend(new Legend
{
Layout = Layouts.Vertical,
Align = HorizontalAligns.Left,
VerticalAlign = VerticalAligns.Top,
X = 290,
Y = 0,
Floating = true,
BackgroundColor = new BackColorOrGradient(new Gradient
{
LinearGradient = new[] { 0, 0, 0, 400 },
Stops = new object[,]
{
{ 0, Color.FromArgb(13, 255, 255, 255) },
{ 1, Color.FromArgb(13, 255, 255, 255) }
}
}),
Shadow = true
})
.SetTooltip(new Tooltip { Formatter = #"function() { return ''+ this.x +': '+ this.y +' tones'; }" })
.SetSeries(new[]
{
new Series { Type = ChartTypes.Column, Name = "Coal", Data = new Data(new object[] { 49.9, 71.5 }), PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series { Type = ChartTypes.Column, Name = "Magnetite", Data = new Data(new object[] { 48.9, 38.8 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series { Type = ChartTypes.Column, Name = "Iron Ore", Data = new Data(new object[] { 83.6, 78.8 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series { Type = ChartTypes.Column, Name = "Grain", Data = new Data(new object[] { 42.4, 33.2 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series
{
Type = ChartTypes.Scatter,
Name = "Target Coal",
Color = ColorTranslator.FromHtml("#FF0000"),
//Data = new Data(new object[] { new object[] {40}, new object[] {80}}),
Data = new Data(new object[] { 15, 50} ),
PlotOptionsScatter = new PlotOptionsScatter
{
Marker = new PlotOptionsScatterMarker
{
Symbol = "diamond",
Radius = 3
}
}
}
})

Answer 1

It's not solution in .net but general idea is to calculate x-value for each of scatter points, for example: http://jsfiddle.net/3bQne/206/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
},
xAxis: {
categories: ['+', '-']
},
series: [{
data: [1,2],
id: 'first',
stack: 0
}, {
data: [3,5],
id: 'second',
stack: 0
}, {
data: [[-0.15,1],[0.85,2]],
linkedTo: 'first',
type: 'scatter'
}, {
data: [[0.15,3],[1.15,5]],
linkedTo: 'second',
type: 'scatter'
}]
});