Line chart does not show title text nvd3

[maasomalam]

I am making line chart using nvd3.

Each and everything is working fine apart from title which is not displaying. Below is my JS code. $scope.lineChartOptions = { chart: { type: 'lineChart', height: 330, margin: { top: 40, right: 40, bottom: 55, left: 40 }, x: function(d) { return d.x; }, y: function(d) { return d.y; }, useInteractiveGuideline: true, dispatch: { stateChange: function(e) { //console.log("stateChange"); }, changeState: function(e) { //console.log("changeState"); }, tooltipShow: function(e) { //console.log("tooltipShow"); }, tooltipHide: function(e) { //console.log("tooltipHide"); } }, xAxis: { axisLabel: 'Time(M)', tickFormat: function(d) { return d3.time.format('%I:%M:%S %p')(new Date(d)) } }, yAxis: { axisLabel: 'Attacks (no)', tickFormat: function(d) { return d3.format('d')(d); }, axisLabelDistance: 30 }, callback: function(chart) { }, title: { enable: true, text: 'Real-time Attacks frequency', "css": { "text-align": "center", "color": "black" } } } }; And template code is: `

    </div>`

[stowball]

The title property needs to be at the same level as chart, like so:

$scope.lineChartOptions = {
    chart: {
        type: 'lineChart',
        height: 330,
        margin: {
            top: 40,
            right: 40,
            bottom: 55,
            left: 40
        },
        x: function(d) {
            return d.x;
        },
        y: function(d) {
            return d.y;
        },
        useInteractiveGuideline: true,
        dispatch: {
            stateChange: function(e) {
                console.log('stateChange');
            },
            changeState: function(e) {
                console.log('changeState');
            },
            tooltipShow: function(e) {
                console.log('tooltipShow');
            },
            tooltipHide: function(e) {
                console.log('tooltipHide');
            }
        },
        xAxis: {
            axisLabel: 'Time(M)',
            tickFormat: function(d) {
                return d3.time.format('%I:%M:%S %p')(new Date(d))
            }
        },
        yAxis: {
            axisLabel: 'Attacks (no)',
            tickFormat: function(d) {
                return d3.format('d')(d);
            },
            axisLabelDistance: 30
        },
        callback: function(chart) {}
    },
    title: {
        enable: true,
        text: 'Real-time Attacks frequency',
        css: {
            'text-align': 'center',
            'color': 'black'
        }
    }
};