Highchart data rendering underneath Bootstrap Popover

Question

I am trying to load a chart from Highcharts into a Bootstrap popover. Although, the series path (all the data with dot points) is being rendered underneath (or somewhere else) the chart or popover. I have had a very hard time trying to debug this issue, and cannot seem to find a way around it.

jQuery (don't be overwhelmed, most of it is just Highchart options):

$('td.chartSection').each(function () {
    var $thisElem = $(this);
    $thisElem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $thisElem,
        delay: {
            hide: 500
        },
        content: function () {
            //Loading all the chart data and dates
            var chartData = [10.82, 11.79, 12.89, 14.01, 13.01, 10.11, 9.11, 7.02, 8.00, 10.55, 9.00, 11.20, 13.67, 13.56, 17.39, 18.34, 19.90, 19.23, 18.29, 17.10, 18.20, 18.29];
            var chartDates = ["01 Apr", "02 Apr", "03 Apr", "04 Apr", "05 Apr", "06 Apr", "07 Apr", "08 Apr", "09 Apr", "10 Apr", "11 Apr", "12 Apr", "13 Apr", "14 Apr", "15 Apr", "16 Apr", "17 Apr", "18 Apr", "19 Apr", "20 Apr", "21 Apr", "22 Apr"];

            //Finding the minimum and maximum values within the data
            var maxi = Math.max.apply(Math, chartData);
            var mini = Math.min.apply(Math, chartData);

            $thisElem.append('<span class="largeChart"></span>');

            var $largeChart = $('.largeChart');

            $largeChart.highcharts({
                series: [{
                    data: chartData,
                    zIndex: 99999
                }],
                chart: {
                    type: 'area',
                    width: 700,
                    height: 300
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: chartDates
                },

                legend: {
                    enabled: false
                },
                yAxis: {
                    max: maxi,
                    min: mini,
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    },
                    title: {
                        text: null
                    },
                },
                tooltip: {
                    pointFormat: '${point.y}'
                },

                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                }
            });

            var $finalChart = $largeChart;

            $largeChart.remove();


            return $finalChart[0].outerHTML;
        }
    });
});

Breakdown:

Firstly, I create a popover for each element. Within the content option, I am running a function and returning a value, being the completed chart. Near the end of the function, before the return, I clone the chart to a new variable, delete the original chart, and return the new one as its raw outerHTML, since that is just how Bootstrap Popovers work.

Although, I cannot seem to view the chart series within the popover.

If you view the below demo, and try running it with line 70 commented out ($largeChart.remove();), you will notice that the chart does in fact render the series successfully.

More Testing:

Furthermore, if you RUN THIS DEMO.....

Chrome - Go into your developer tools to find the first td element within the table and scope down to the svg element, then find the class svg:not(:root) that is applied via Bootstrap... Change the value to absolutely anything else, and the series will be displayed.

Firefox - the series is displayed until the animation is complete, then it disappears.

WORKING DEMO

Answer 1

Check this out, I had same problem and I managed to fixed it by changing few lines of code, Since you are appending div to your popover parent you have 2 charts in your DOM, thus why you should not return outerHTML

return $largeChart;

instead of

var $finalChart = $largeChart;
$largeChart.remove();
return $finalChart[0].outerHTML;

Here is working demo

http://jsfiddle.net/J88gH/3/

Also you need to remove all elements with class largeChart to avoid multiple graphs

Also I want to thank you for question, you helped me to solve some tough problem I've been struggling for a while