Chart Title overlapping on chart

Question

I am trying to put title on the chart but when I add title its overlapping chart itself. Here is jsfiddle code jsfiddle code .Do you guys know what property I need to set to make it work?

//-------------------------------------------------------
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
    return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};

//-------------------------------------------------------
Highcharts.setOptions({
    chart:{
        defaultSeriesType:'bar',
        marginTop:5,
        marginRight:15,
        marginBottom:10,
        marginLeft:100,        
        borderWidth:0
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    title:{text:'Title'},
    xAxis:{
        tickLength:0,
        lineColor:'#999',
        lineWidth:1,
        labels:{style:{fontWeight:'bold'}}        
    },
    yAxis:{
        min:0,
        minPadding:0,
        maxPadding:0,
        tickColor:'#ccc',
        tickWidth:1,
        tickLength:3,
        gridLineWidth:0,
        endOnTick:true,
        title:{text: ''},
        labels:{
            y:10,
            style:{
                fontSize:'8px'
            },
            formatter:function(){
                if (this.isLast){
                    return this.value + ' %';
                }
                else{
                    return this.value;
                }
            },
            enabled: false
        }
    },
    legend:{enabled:false},
    tooltip:{
        enabled:true,
        backgroundColor:'rgba(255, 255, 255, .85)',
        borderWidth:0,
        shadow:true,
        style:{fontSize:'10px',padding:2},
        formatter:function() {
           return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y,2) + "</strong>";
        }
    },
    plotOptions:{
        bar:{
            color:'#000',
            shadow:false,
            borderWidth:0,
        },
        scatter:{
            marker:{
                symbol:'line',
                lineWidth:3,
                radius:8,
                lineColor:'#f00'
            }
        }
    }
});

//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
    chart:{renderTo:'container1'},
    xAxis:{categories:['Title 1']},
    yAxis:{
        max:100,
        labels:{y:10,style:{fontSize:'8px'}},    
        plotBands:[{from:0,to:70,color: 'rgba(103,103,103,.35)'},
                   {from:70,to:85,color: 'rgba(153,153,153,.35)'},
                   {from:85,to:100,color: 'rgba(204,204,204,.35)'}]
    },
    series:[{name:'Measure',pointWidth:10,data:[80]},
            {name:'Target',type: 'scatter',data:[90],}]
});

Answer 1

Try using y attribute in legend which sets vertical position

legend: { 
            y:18
        }

Answer 2

Assuming you want to leave the height of you chart identical to what it is now, increse the height of the div by 30px and the chart.marginTop by 30px.

<div id="container1" style="height:66px;width:350px;"></div> 


Highcharts.setOptions({
    chart:{
        defaultSeriesType:'bar',
        marginTop:35,
        marginRight:15,
        marginBottom:10,
        marginLeft:100,        
        borderWidth:0
    },

http://jsfiddle.net/blaird/e96yX/89/

Your issue is that there is no room for your title above your chart, so highcharts is putting it where it can. The chart margins set fixed spacing between the edges and the plot area, so if you want to use them you need to allow space for the items outside the plot area. http://api.highcharts.com/highcharts#chart.marginTop