Chartjs and Polymer 1.7.0

Question

When using Chartjs with Polymer with setting as dom: 'shadow', I am getting an error as

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element

But if I remove dom: 'shadow' from the initial setting for Polymer, then the error is gone. I cant understand what the problem is.

Shouldn't I use 'dom':'shadow'?

Live preview(see the console): https://s.codepen.io/jenishngl/debug/mOVJPm

My code as in https://codepen.io/jenishngl/pen/mOVJPm

<script>
  window.Polymer = {
            dom: 'shadow',          // Local DOM is rendered using shadow DOM where supported
            lazyRegister: true      // Sets lazy registeration for custom elements
        };
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">

<link rel="import" href="polymer/polymer.html">

<style>
  html, body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    height: 500px;
    width: 100%;
  }
  chart-element{
    height: 100%;
    width: 100%;
  }
</style>

  <dom-module id="chart-element">
  <template>
    <style>
      :host{
        display: block;
        height: 100%;
        width: 100%;
      }
      #chart{
        height: 100%;
        width: 100%;
      }
    </style>
    <canvas id="chart"></canvas>
  </template>
    <script>
  Polymer({
    is: 'chart-element',

    ready: function(){
      this.async(function(){
        this._drawChart();
      }.bind(this), 2000);
    },

    _drawChart: function(){
      var labels = ["JUL", "AUG", "SEP", "OCT"];
                var rasied = ["1710", "0", "0", "0"];
                var solved = ["1642", "0", "0", "0"];
                var ctx = this.$$('#chart');
                var chart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [
                                {
                                    label: "Raised",
                                    fill: false,
                                    lineTension: 0.1,
                                    backgroundColor: "#F44336",
                                    borderColor: "#F44336",
                                    borderCapStyle: 'butt',
                                    borderDash: [],
                                    borderDashOffset: 0.0,
                                    borderJoinStyle: 'round',
                                    pointBorderColor: "#F44336",
                                    pointBackgroundColor: "#fff",
                                    pointBorderWidth: 6,
                                    pointHoverRadius: 5,
                                    pointHoverBackgroundColor: "#F44336",
                                    pointHoverBorderColor: "rgba(220,220,220,1)",
                                    pointHoverBorderWidth: 2,
                                    pointRadius: 1,
                                    pointHitRadius: 10,
                                    data: rasied
                                },
                                {
                                    label: "Solved",
                                    fill: false,
                                    lineTension: 0.1,
                                    backgroundColor: "#009688",
                                    borderColor: "#009688",
                                    borderCapStyle: 'butt',
                                    borderDash: [],
                                    borderDashOffset: 0.0,
                                    borderJoinStyle: 'round',
                                    pointBorderColor: "#009688",
                                    pointBackgroundColor: "#fff",
                                    pointBorderWidth: 6,
                                    pointHoverRadius: 5,
                                    pointHoverBackgroundColor: "#009688",
                                    pointHoverBorderColor: "rgba(220,220,220,1)",
                                    pointHoverBorderWidth: 2,
                                    pointRadius: 1,
                                    pointHitRadius: 10,
                                    data: solved
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true
                                    }
                                }]
                            }
                        }
                    });
    }
  });
</script>
</dom-module>
<chart-element></chart-element>

Answer 1

When ChartJS initializes its view, it tries to read the maximum height of the given canvas' container by calling getComputedStyle() on it. In your case of Shadow DOM, the container is the custom element's shadow root, which is a DocumentFragment, which does not support getComputedStyle(), resulting in the runtime error you're seeing.

To workaround the problem, wrap the <canvas> in an HTMLElement, such as <div>.

<template>
  <div>
    <canvas id="chart"></canvas>
  <div>
</template>

codepen

You might also be interested in using the chart-elements library, which is a Polymer wrapper around ChartJS and does not exhibit the problem with Shadow DOM enabled: codepen