Highchart Combochart Rendered Wrong

Question

I have a combo highchart but this is not rendered correctly, this the code that I am using:

<script type="text/javascript">
$(document).ready(function () {

    SCurvechart = new Highcharts.Chart({
        chart:
            {
                events: {
                    load: function () {
                        var label = this.renderer.label('Details for Company B')
                        .css({
                            width: '450px',
                            color: '#666666',
                            fontSize: '16px'
                        })
                        .attr({
                            'padding': 10
                        })
                        .add();

                        label.align(Highcharts.extend(label.getBBox(), {
                            align: 'left',
                            x: 50,
                            verticalAlign: 'top',
                            y: 5
                        }), null, 'spacingBox');

                    }
                },
                borderColor: '#BBBBBB',
                borderWidth: 1,
                plotShadow: true,
                renderTo: 'SCurvechart_container',
                zoomType: 'xy'
            },
        exporting: { 
            enabled: false 
        },
        credits: {
            enabled: false
        },
        legend:
            {
                align: 'left',
                backgroundColor: '#FFFFFF',
                floating: true,
                layout: 'vertical',
                verticalAlign: 'top',
                x: 120,
                y: 100,
                itemStyle: {
                    color: '#666666',
                    fontWeight: 'bold',
                    fontSize: '10px',
                    font: 'Trebuchet MS, Verdana, sans-serif'
                }  
            },
        title:
          {
              text: ''
                    },
                tooltip:
                    {
                        shared: true
                    },
                plotOptions: {
                    series: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        events: {
                            //click: ChartClick
                        },
                        showInLegend: false,
                        stacking: 'normal'
                    }
                },
                xAxis:
                    {
                        labels:
                            {
                                formatter: function () { return this.value; }, style: { color: '#4572A7' },
                                style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
                            },
                        categories: ['25/07/14','29/08/14','26/09/14','31/10/14','28/11/14','26/12/14','30/01/15','27/02/15','27/03/15','24/04/15','29/05/15','26/06/15','31/07/15','28/08/15','25/09/15','30/10/15','27/11/15','25/12/15','29/01/16','26/02/16','25/03/16','29/04/16','27/05/16','24/06/16','29/07/16','26/08/16','30/09/16','28/10/16','25/11/16','30/12/16','27/01/17','24/02/17','31/03/17','28/04/17','26/05/17','30/06/17']
                        },
                yAxis: [
                    {
                        min: 0,
                        labels:
                            {
                                formatter: function () { return this.value; }, style: { color: '#4572A7' },
                                style: {font: '9px Trebuchet MS, Verdana, sans-serif'} 
                            },
                        opposite: true,
                        title:
                            {
                                style:
                                    {
                                        font: '10px Trebuchet MS, Verdana, sans-serif'
                                    },
                                text: 'Overall Activities'
                            }
                    },
                    {
                        labels:
                            {
                                formatter: function () { return this.value; }, style: { color: '#89A54E' },
                                style: {font: '9px Trebuchet MS, Verdana, sans-serif'} 
                            },
                        title:
                            {
                                style:
                                    {
                                        font: '10px Trebuchet MS, Verdana, sans-serif'
                                    },
                                text: 'Weekly Activities'
                            }
                    }],
                series: [
                { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7,3,5,4,1,2,0,0,0,0,0,1,0,1,0,4,0,0,0], name: 'Target', type: 'column', yAxis: 1, color: '#6699CC' },
                { data: [], name: 'Actual', type: 'column', yAxis: 1, color: '#FAC090' },
                { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,,,,,,,,,,,,,,,,,], name: 'Actual Acc', type: 'spline', color: '#FF0000' },
                { data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,5,12,15,20,24,25,27,27,27,27,27,27,28,28,29,29,33,,,], name: 'Target Acc', type: 'spline', color: '#376092' }
                ]
                });

        });

If you see the compare the chart against the one created in Excel you can see the issue, https://www.dropbox.com/s/8lrk0vtgwitbdb4/Chart-Screenshot-in-Excel.JPG?dl=0

with the highchart rendered chart: https://www.dropbox.com/s/c1ga0x3vxa8sbol/Highchart-screenshot.JPG?dl=0

As you can see the line charts are wrong they should be close to each other.

Any help is appreciated.

Answer 1

The problem is that the code setting up the highchart has enabled stacking by setting stacking attribute to 'normal'.

{..., plotOptions: { series: {..., showInLegend: false, stacking: 'normal'}}, ...}

You can disable stacking by removing the stacking attribute. For example...

{..., plotOptions: { series: {..., showInLegend: false}}, ...}

Or you can disable stacking by setting stacking attribute to null. For example...

{..., plotOptions: { series: {..., showInLegend: false, stacking: null}}, ...}