chart is not displayed when using with polymer1.4 app-drawer-template

[leninmehedy]

I was trying to use it with the app-drawer-template application that you can initialize with polymer-cli. I ran the following commands

npm install -g polymer-cli
polymer init app-drawer-template
bower install --save robdodson/chart-elements

#edited the src/my-view1 file as below

# run
polymer serve

However the chart is not displayed. No errors are in the console log either. Any idea why this is not working?

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/chart-elements/chart-line.html">

<dom-module id="my-view1">

    <template>

        <style>
            :host {
                display: block;
                padding: 10px;
            }
            .card {
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
                padding: 16px;
                margin: 24px;
                border-radius: 5px;
                background-color: #fff;
                color: #757575;
            }
            .circle {
                display: inline-block;
                height: 64px;
                width: 64px;
                border-radius: 50%;
                background: #ddd;
                line-height: 64px;
                font-size: 30px;
                color: #555;
                text-align: center;
            }
            h1 {
                font-size: 22px;
                margin: 16px 0;
                color: #212121;
            }
        </style>

        <div class="card">
            <div class="circle">1</div>
            <h1>View One</h1>
            <p>Ut labores minimum atomorum pro. Laudem tibique ut has.
                <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>

                <chart-line data=[[graphData]]></chart-line>
            </div>

        </template>

        <script>

            Polymer({

                is: 'my-view1',

                properties: {
                    graphData: {
                        type: Array,
                        value: function() {
                            var dt = {
                                labels: ["January", "February", "March", "April", "May", "June", "July"],
                                datasets: [
                                    {
                                        label: "My First dataset",
                                        fillColor: "rgba(220,220,220,0.2)",
                                        strokeColor: "rgba(220,220,220,1)",
                                        pointColor: "rgba(220,220,220,1)",
                                        pointStrokeColor: "#fff",
                                        pointHighlightFill: "#fff",
                                        pointHighlightStroke: "rgba(220,220,220,1)",
                                        data: [65, 59, 80, 81, 56, 55, 40]

                                    },
                                    {
                                        label: "My Second dataset",
                                        fillColor: "rgba(151,187,205,0.2)",
                                        strokeColor: "rgba(151,187,205,1)",
                                        pointColor: "rgba(151,187,205,1)",
                                        pointStrokeColor: "#fff",
                                        pointHighlightFill: "#fff",
                                        pointHighlightStroke: "rgba(151,187,205,1)",
                                        data: [28, 48, 40, 19, 86, 27, 90]

                                    }

                                ]

                            };

                            return dt;
                        }
                    }
                }

            });

        </script>

    </dom-module>

[trading-peter]

You need to give your chart element a width and height. In your css:

chart-line {
  width: 400px;
  height: 400px;
}

Anyway, It's not cool and unnecessary that the chart won't show up without this. I'll open a bug to change this behavior.

[Stormsys]

Looks like this one is fixed - i'l close off the issue for now.