Border Around Google Chart

I am having a little issue in google chart implementation. As per requirement, the chart should be enclosed within outline (border) as shown here: But I am getting following outpu

Solution 1:

You can access the inner part of the chart through the chartArea object. So to add a border you would need something like:

chartArea: {
    backgroundColor: {
        stroke: '#fff',
        strokeWidth: 1
    }
}

In your example this would be:

gChartOptions= {
chartType:"ComboChart",
    containerId:"visualization",
    stackSeries:true,
    isStacked :true,
    pointSize:3,
    backgroundColor:'#000',
    legend:'none',
    tooltip:{
        trigger:'none'
    },
    colors : ['#6DB1E2','#FDCB34','#69BD44','#ffffff','#A2469B','#ffffff'],

    chartArea: {
        backgroundColor: {
            stroke:'#fff',
            strokeWidth:1
        }
    },

    seriesDefaults: {
        rendererOptions: {
            barPadding:0,
            barMargin:10
        },
        pointLabels: {
            show:true,
            stackedValue:true
        }
    },
    vAxis: {
        gridlines: {
            color:'transparent'
        }
    },
    seriesType:"bars",
    series: {
        0: {
            targetAxisIndex:0
        },
        1: {
            targetAxisIndex:0
        },
        2: {
            targetAxisIndex:1,
            type:"line"
        },
        3: {
             targetAxisIndex:1,
             lineWidth:0,
             pointSize:3,
             type:"line"
        },
        4: {
            targetAxisIndex:1,
            type:"line"
        },
        5: {
             targetAxisIndex:1,
             lineWidth:0,
             pointSize:3,
             type:"line"
        }
    },   
    hAxis: {
        //ticks:ideasChart.xAxis,
        tickOptions: {                              
            fontSize:setChartLabelFontSize,
            fontWeight:'bold',                             
            color:'#ffffff'
        },
        title:'OccupancyDate',
        titleTextStyle:
        {
           fontStyle:"normal",
           italic:false,
           fontSize :setChartLabelFontSize,
           color:'#ffffff' 
        },
        textStyle:
        {
           fontStyle:"normal",
           italic:false,
           fontSize :8,
           color:'#ffffff'
        },
    },     
    vAxes: {
        0: {           
            title:"Solds",
            textStyle:
            {
               fontStyle:"normal",
               italic:false,
               fontSize :setChartLabelFontSize,
               color:'#ffffff'
            },
            titleTextStyle:
            {
               fontStyle:"normal",
               italic:false,
               fontSize :setChartLabelFontSize,
               color:'#ffffff'
            },
            label:'Solds',    
            type:'bars',
            minValue:0
        },
        1: {
            title:"Solds",
            textStyle:
            {
               fontStyle:"normal",
               italic:false,
               fontSize :setChartLabelFontSize,
               color:'#ffffff'
            },
            titleTextStyle:
            {
               fontStyle:"normal",
               italic:false,
               fontSize :setChartLabelFontSize,
               color:'#ffffff'
            },
            label:'Solds',
            type:'bars',
            minValue:0
        },
    }
};