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'
        },
        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?

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?

• javascript
• jquery
• highcharts
• rendering

4 Answers 4

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); 

In case someone stumbles on this while Googling, when you specific the element in renderTo, you shouldn't include the # if that element is an ID.

If you have this element <div id="graph-container"></div>

This fails: renderTo: '#graph-container'

This works: renderTo: 'graph-container'

Reference to the Highcharts docs

Something like this: chart.renderTo(container); doesn't exists in Highcharts.

To set renderTo use options:

var options = {
    chart: {
        type: 'bar',
        renderTo: 'container'
    },

You may be facing the same problem that i was. Try to put your highchart script right after your div's declaration just like in the example bellow so it can recognize your div's id:

<head>
    <title>HighCharts :D</title>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
    var myChart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
    myChart.renderTo('container');

</script>
</body>