legend title overlapping with the graph

Question

I have implemented the histogram high chart using angular4. i am trying to set the legend title however it tends to overlap the graph. I tried a few styles like padding , margin etc but it doesnt seem to be taking effect. Please note that I am not using jquery. Please also note that i need the legends to display right bottom of the page. The tile could be before the legend or on top of the legend.

Please find my code below

import { Component, Input } from '@angular/core'; import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'histogramchart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class HistogramChartComponent {

    public options: any;
    chart: any;
    @Input() public series: any;

    constructor(private _translate: TranslateService) {

        this.options = {
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            chart: {
                type: 'histogram'
            },
            legend: {

                layout: 'horizontal',
                margin: 50,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20,
                     title: {
                                 text: 'Click the here to toggle',

                                 styles: {
                                    itemMarginTop: 25
                                 }


                            },
                           // align: 'left',
                            //verticalAlign: 'middle',

                            align: 'right',
                            verticalAlign: 'bottom',
                           // y: 100,
                            floating: true,
                            //borderWidth: 1,
                           // backgroundColor: 'white'

            },

            plotOptions: {
                series: {
                    events: {
                        legendItemClick: function() {
                            for (let i = 0; i < this.chart.series.length; i++) {
                                if (this.chart.series[i].index !== this.index) {
                                    this.chart.series[i].setVisible(false, false);
                                } else {
                                    this.chart.series[i].setVisible(true, false);
                                }
                            }
                            this.chart.redraw();
                            return false;
                        }
                    }

                }

            },

            xAxis: [{
                title: { text: '' },
                alignTicks: false
            }, {
                title: { text: this._translate.instant('CAPTIVES.RESULTS.ESA.GRAPH_XAXIS') },
                alignTicks: false,

            }],

            yAxis: [{
                title: { text: '' }
            }, {
                title: { text: this._translate.instant('CAPTIVES.RESULTS.ESA.GRAPH_YAXIS') },

            }],

            series: [{
                showInLegend: false
            }]

        };
    }

    getInstance(chartInstance): void {
        this.chart = chartInstance;
        this.redraw();
    }

    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
        data.series.currentValue.map(s => {
            this.chart.addSeries(s);
        });
        this.chart.reflow();
    }

    redraw() {
        if (!this.chart) return;

        this.series.map(s => {
            if (s !== null) {
                this.chart.addSeries(s);
            }
        });

        for (let i = 0; i < this.chart.series.length; i++) {
            if (i > 1) {
                this.chart.series[i].setVisible(false, false);
            } else {
                this.chart.series[i].setVisible(true, true);
            }
        }
        this.chart.redraw();
    }
}