[Chartjs]-Chartjs and Polymer 1.7.0

by

6👍

✅

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

Leave a comment