chart.renderTo doesn't work

Question

I'm trying to dynamically create highcharts on the same page in a bootstrap carousel.

I have a function "createChart" like this:

createChart(questiontitle, answers);

function createChart(questiontitle, answers){
    chart = new Highcharts.Chart(options); // Create new chart with general options
    chart.renderTo(container);
    for (var i = 0; i < answers.length; i++) {
        categories.push(answers[i].Text);
    }
    console.log(categories);
    chart.xAxis[0].setCategories(categories);
    chart.setTitle({ text: 'eerzera' });
    // redraw chart
    chart.redraw();
}

I have a div like this:

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

As you can see I have "chart.renderTo" but I always get the same error:

Highcharts Error #13

Rendering div not found

This error occurs if the chart.renderTo option is misconfugured so that Highcharts is unable to find the HTML element to render the chart in.

My variable options is like this:

var options = {
        chart: {
            type: 'bar'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]
        }]
    }

How is this possible?

Answer 1

If your goal is to keep this dynamic, by being able to build multiple charts with multiple renderTo's but using the same options, you can do it like this:

change

function createChart(questiontitle, answers){
    chart = new Highcharts.Chart(options); 
    chart.renderTo(container);

to:

function createChart(questiontitle, answers){
    chart = $('#container').highcharts(options); 

or, if not using jQuery,

function createChart(questiontitle, answers){
    options.chart.renderTo = 'container';
    chart = new Highcharts.Chart(options);