Highcharts stacked column bar with line

Question

I want this stacked column chart Demo column stacked with this Basic Column with line. What i want is have a line in this stacked column chart.

Note: I've found this example already present in stackoverflow, Stacked bar with line, but can't really make it a stacked column with line.

I'm using HighCharts .Net plugin, my code for stacked bar is:

Highcharts chart = new Highcharts("chart");

    chart.SetSeries(new[]
                {
                    new Series { Name = "Title1", Data = new Data(data1) },
                    new Series { Name = "Title2", Data = new Data(data2) },
                    new Series { Name = "Title3", Data = new Data(data3) },
                    new Series { Name = "Title4", Data = new Data(data4) }
                });

    chart.InitChart(new Chart {DefaultSeriesType = ChartTypes.Column});
    chart.SetTitle(new Title{Text = "Graph title" });
    chart.SetXAxis(new XAxis { Categories = xaxis });
    chart.SetYAxis(new YAxis
            {
                Min = 0,
                Title = new YAxisTitle { Text = "Total hit" },
                StackLabels = new YAxisStackLabels
                {
                    Enabled = true,
                    Style = "fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'"
                }
            });
    chart.SetLegend(new Legend
            {
                Layout = Layouts.Horizontal,
                Align = HorizontalAligns.Right,
                VerticalAlign = VerticalAligns.Top,
                X = -100,
                Y = 20,
                Floating = true,
                BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")),
                BorderColor = ColorTranslator.FromHtml("#CCC"),
                BorderWidth = 1,
                Shadow = false
            });
    chart.SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    Stacking = Stackings.Normal,
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Enabled = true,
                        Color = Color.White
                    }
                }
            });
    ltrChart.Text = chart.ToHtmlString();

Can anyone help on this?

Solution 1

Here is a solution with plain JS.

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>

JS:

$(function () {
  $('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    colors: ['#7cb5ec', '#91e8e1', '#90ed7d'],

    title: {
        text: 'Something '
    },
    subtitle: {
        text: 'subsomething'
    },
    xAxis: [{
        categories: ['1/1','2/1','3/1','4/1', '5/1', '6/1','7/1','8/1','9/1','10/1','11/1', '12/1', '13/1', '14/1', '15/1']
                    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        min: 0,
        max:100,
        title: {
            text: 'Percent',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: '',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        min: 0,
        max: 100,
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[0],
                display:'none'
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'center',
        x: -0,
        verticalAlign: 'top',
        y: 400,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [
        {
        name: 'suff1',
        type: 'column',

        yAxis: 1,
        data: [20, 25, 10,30,80, 20, 25, 10,30,80, 20, 25, 10,30,80],
        tooltip: {
            valueSuffix: ' %'
        }

    }, 
      {
          name: 'suff2',
        type: 'column',

        yAxis: 1,
       tooltip: {
            valueSuffix: ' %'
        },
        data: [30, 50, 30,30,10, 30, 50, 30,30,10, 30, 50, 30,30,10]
    }, {
        name: 'suff3',
        yAxis: 1,
        type: 'column',
        tooltip: {
            valueSuffix: ' %'
        },
        data: [50,25, 60, 40, 10, 50,25, 60, 40, 10, 50,25, 60, 40, 10]
    },
      {
        name: 'NS',
        type: 'spline',

        data: [45,55,74,85,81, 45,55,74,85,81, 45,55,74,85,81],
        tooltip: {
            valueSuffix: '%'
        }
    }]
 });
 });

I made a JS fiddle with this example. You can check it here

Solution 2

I can't believe it was so simple, i was just experimenting with code, and it just get solved. All i have to do is add a new series and specify type in every one of them.

   chart.SetSeries(new[]
            {
                new Series { Name = "Title1", Data = new Data(data1), Type = ChartTypes.Column },
                new Series { Name = "Title2", Data = new Data(data2), Type = ChartTypes.Column },
                new Series { Name = "Title3", Data = new Data(data3), Type = ChartTypes.Column },
                new Series { Name = "Title4", Data = new Data(data4), Type = ChartTypes.Column }
                new Series { Name = "Title5", Data = new Data(data5), Type = ChartTypes.Line }
            });