title: Highcharts - combining column chart with scatter chart
body: <p>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.</p>
  
  <p>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? </p>
  
  <p>Here is the code that I used for this (it is MVC .NET):</p>
  
  <pre><code>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
                                             }
                                         }
                                      }
  })
  </code></pre>