Trying to create Highcharts element in Polymer

Question

I am trying to create a polymer custom element to display a Highchart and getting this error:

'Highcharts Error #13 Rendering div not found

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

Can anyone please explain how to load the chart into the template div id="container"? Any links to working highcharts/polymer elements greatly appreciated :)

My code (I'm using polymer starter kit so linking to polymer/webcomponents from the elements.html and have in index.html):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<dom-module id="my-chart">
    <template>
        <div id="container" style="max-width: 600px; height: 360px;"></div>
    </template>

    <script>
        Polymer({
        is: "my-chart",
        ready: new Highcharts.Chart({
            chart: {
                type: 'bar',
                renderTo: 'container'
            },
            title: {text:  'HI'},
            xAxis: {
                categories: ['London', 'Paris', 'Madrid']
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: [{
                name: 'Cities',
                data: [1000, 2500, 1500]
            }]
        })
    });
    </script>
</dom-module>

New code:

<dom-module id="my-chart">
    <template>
        <div id="container" style="max-width: 600px; height: 360px;"></div>
    </template>

    <script>
        Polymer({
        is: "my-chart",
        ready: function() {

            var el = new Highcharts.Chart

        ({
            chart: {
                type: 'bar',
                // renderTo: 'container'
            },
            title: {text:  'HI'},
            xAxis: {
                categories: ['London', 'Paris', 'Madrid']
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: [{
                name: 'Cities',
                data: [1000, 2500, 1500]
            }]
        })
            this.$.container.appendChild(el);
       }
     });
    </script>
</dom-module>

Answer 1

Try, to use

ready: function() {
    var el = new Highcharts.Chart({.....});
    //selector for element with id container
    this.$.container.appendChild(el);
}

Answer 2

I got the chart loading like this, thanks for help:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <dom-module id="bar-chart">
        <template>
            <div id="container" style="max-width: 600px; height: 360px;"></div>
        </template>

        <script>
            Polymer({
            is: "bar-chart",
            ready: function () {


                $(this.$.container).highcharts({
                chart: {
                    type: 'bar',
                    renderTo: 'container'
                },
                title: {text:  'HI'},
                xAxis: {
                    categories: ['London', 'Paris', 'Madrid']
                },
                yAxis: {
                    title: {
                        text: 'Sales'
                    }
                },
                series: [{
                    name: 'Cities',
                    data: [1000, 2500, 1500]
                }]
            })
          }
        });
        </script>
    </dom-module>

Answer 3

Hey you can use Highchart-Chart to do the same thing.

<!-------------------------------------|
Normal Import is done the way below:
<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">

For the sake of a demo I will use a CDN
--------------------------------------->
<link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html">

<highcharts-chart type="bar" x-axis='{"categories": ["London","Paris","Madrid"]}' title="Hi" x-label="Cities" data='[1000,2500,1500]' y-label="Sales"></highcharts-chart>

Click Run code snippet to see the chart!

That's it! There are more examples here with real-time data.

Answer 4

I'm adding this answer since I could not find this solution anywhere else and unfortunately the Highchart-Chart package with Polymer 1.x did not work for me either.

I noticed that the element was being created/rendered, but it wasn't being properly appended to the custom Polymer element (e.g. my-chart).

The only way that worked was to use this.appendChild(this.$.container); after creating the Highchart.

Your code would then be:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<dom-module id="my-chart">
    <template>
        <div id="container" style="max-width: 600px; height: 360px;"></div>
    </template>

    <script>
        Polymer({
            is: "my-chart",
            ready: new Highcharts.Chart({
                chart: {
                    type: 'bar',
                    renderTo: this.$.container // Renders to div#container in this module only
                },
                title: {text:  'HI'},
                xAxis: {
                    categories: ['London', 'Paris', 'Madrid']
                },
                yAxis: {
                    title: {
                        text: 'Sales'
                    }
                },
                series: [{
                    name: 'Cities',
                    data: [1000, 2500, 1500]
                }]
            })
        });
        this.appendChild(this.$.container); // Add highcharts to Polymer element DOM
    </script>
</dom-module>

NOTE: Highcharts.chart({...}) did not need to be stored to a variable.

This should avoid the param 1 is not Node error.