score:2

Accepted answer

In your modal code you need to make use of parent() instead of children in order to access the textControl.

And when deciding on the highCharts, you have to map it with second-chart as you already defined that one only and since there is no #container you need to have that in one which is in your markup

Here is a Working Fiddle

Code Snippet

$(function () {
    var chart;

    $('#second-chart').highcharts({
        chart: {
            type: 'bar'
        },

        subtitle: {
            text: 'Assortment # by SKUs'
        },
        xAxis: {
            categories: ['Lazada', 'C1', 'C2', 'C3']
        },
        yAxis: {
            title: {
                text: '# of SKUs'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'SKU',
            data: [500, 120, 150, 300]
        }]
    });

    $('#chart-modal').on('shown.bs.modal', function () {
         var chart = $('#second-chart').highcharts();
        var title_string = $(this).parent().find('.form-control').val().toString();
        console.log(chart);
        chart.setTitle({ text: title_string});
    });

});

Related Articles