Chart does not resize inside shadow DOM (e.g. Polymer) #5763

makitama · 2018-10-10T14:43:53Z

Expected Behavior

The Bar Chart should resize when the window size is changed.

Current Behavior

The wrapper div does resize, but the Chart does not.

Steps to Reproduce (for bugs)

https://stackblitz.com/edit/polymer310-testcase-chartjs

import '../../../node_modules/chart.js/dist/Chart.js'

class BarChartElement extends PolymerElement {
  static get template() {
    return html`  
        <style include="shared-styles2">
        #content{
            height: 100%;
            width: 100%;
        }
        </style>
        <div id="content"></div>
      `;
  }
ready(){
super.ready();

        let iCan = document.createElement('canvas');
        iCan.id = 'temp';

        this.$.content.appendChild(iCan);

       setTimeout(function () {
           let ctx = (this.$.content.firstElementChild);
           this.chart = new Chart(ctx, {
               type: 'bar',
               data: {
                   datasets: [{
                       backgroundColor: color,
                       data: data,
                   }],
               },

               options: {
                   responsive: true,
                   maintainAspectRatio: true,
                   legend: {
                       display: false,
                   },
                   tooltips: {
                       enabled: false,
                   },
                   scales: {
                       xAxes: [{
                           scaleLabel: {
                               display: true,
                               labelString: 'Wochen',
                               fontSize: 16,
                           },
                           ticks:{
                               stepSize:1,
                               autoSkip: false,
                           },
                       }],
                       yAxes: [{
                           scaleLabel: {
                               display: true,
                               labelString: 'Auslastung in %',
                               fontSize: 16,
                           },
                       }]
                   }
               }
           });
       }.bind(this), 1);
    }
}
window.customElements.define('bar-chart', BarChartElement);

Environment

Chart.js version: 2.7.2
Browser name and version: Chrome(latest)
Link to your project: https://stackblitz.com/edit/polymer310-testcase-chartjs

benmccann · 2018-10-15T04:54:12Z

just fyi, you need triple backticks to escape multi-line code instead of just one backtick. I updated it for you

simonbrunel · 2018-11-09T14:39:11Z

@Dreamergirly81 please provide a live test case (e.g. jsfiddle). It's complicated and time consuming for us to setup a polymer project to debug your project.

makitama · 2018-11-10T12:43:49Z

@simonbrunel i added a test case to stackblitz, because jsfiddle and many others does not work with polymer 3! Hope you can see the Problem here:

https://stackblitz.com/edit/polymer310-testcase-chartjs

simonbrunel · 2018-11-10T14:56:36Z

Thanks @Dreamergirly81, stackblitz is fine.

I'm not familiar with Polymer and it would require more investigation to find the cause of this issue but my first guess is that our responsive implementation doesn't currently support shadow DOM and thus is not able to detect when the canvas is attached to the DOM tree to insert the resize detector element.

makitama · 2018-11-10T15:08:16Z

will chartjs support shadow dom in the future? It is a part of HTML 5 now and i think it should be supported in later versions. Or do you know if there is a easy fix/workaround for this?

simonbrunel · 2018-11-10T15:15:35Z

I don't know any fix/workaround and I'm not even sure that's the issue. If shadow DOM is indeed not supported, we will be happy to review PR that fix this issue).

FYI, #5585 fixes a few things around that topic, included in v2.7.3

etimberg · 2018-11-11T22:50:22Z

@Dreamergirly81 I had a look and it appears that the render-monitor CSS is injected in the wrong location. The method in the chart.js source that injects the CSS is injectCSS. The issue is that it puts the CSS in the document <head>. This poses a problem in the shadow DOM case as the shadow-root blocks the CSS style from above.

To test this theory I injected the CSS manually into the Polymer component in this test and resize works as expected.

In terms of long term solutions, I'm not sure what the best option is. What I can think of so far is:

Walk up the DOM tree until we find either the <body> or a shadow-root and put the style under there
Add the style inline instead of using a class (not sure if that causes a problem)

makitama · 2018-11-16T13:28:58Z

@etimberg thank you! I was able to use your test case in my project, because we really need resizing of the charts. I never thought that CSS is causing this Problem...

jwillmer · 2018-12-05T22:29:39Z

I use window.addEventListener('resize', this.ChartInstance.resize(), true); in the meantime.

etimberg · 2018-12-06T02:45:17Z

@jwillmer one caution on that is that it only fires if the whole page resizes, but it won't fire if the div containing the chart resizes.

simonbrunel · 2018-12-13T15:18:05Z

Walk up the DOM tree until we find either the or a shadow-root and put the style under there

It would require to detect when the node is attached to the DOM, which is exactly the purpose of the injected CSS.

Add the style inline instead of using a class (not sure if that causes a problem)

I don't think @keyframes can be inlined.

@Dreamergirly81 @etimberg I'm not sure we will be able to correctly handle responsiveness within shadow DOM because we need to inject the CSS under all shadow roots and so we need to know when the canvas is added to the DOM in order to know the DOM scope.

etimberg · 2019-02-15T01:59:07Z

@simonbrunel now that #6048 is merged, how do you feel about solving this with a documentation update? I think it's going to be hard to get the style auto-injected in the right spot, but with the external CSS file it's not hard to fix. See this example

erikroe · 2019-09-03T13:31:14Z

I would like to point out this issue still is present. I just tested it within a web component using LitElement and there is no resize done. It only works if I override the render root with using directly the light dom - rendering any advantages of web components useless.

Simon-Tang · 2019-09-12T15:37:18Z

In the meantime, I was able to get the Chart to resize inside the Shadow DOM with this snippet:

this.shadow = this.attachShadow({ mode: 'open' });

const resizeStylesheet = document.createElement('link');
resizeStylesheet.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css');
resizeStylesheet.setAttribute('rel', 'stylesheet');

this.shadow.appendChild(resizeStylesheet);

…hartjs#6556)

simonbrunel added the status: needs test case label Nov 9, 2018

simonbrunel added type: bug help wanted and removed status: needs test case labels Nov 10, 2018

simonbrunel changed the title ~~Chart does not resize inside polymer element~~ Chart does not resize inside shadow DOM (e.g. Polymer) Dec 5, 2018

This was referenced Dec 5, 2018

[BUG] Not resizing inside shadow dom #5887

Closed

responsive leads to empty chart #5799

Closed

simonbrunel mentioned this issue Dec 13, 2018

[BUG] Consider removing innerHTML usage #5902

Closed

prodonjs mentioned this issue Jun 3, 2019

Adds recent Pipelines cards for Definitions and Runs. kubeflow/kubeflow#3379

Merged

Simon-Tang added a commit to Simon-Tang/Chart.js that referenced this issue Oct 6, 2019

Inject styles into Shadow DOM when inside Shadow DOM (chartjs#5763)

a1457f1

Simon-Tang mentioned this issue Oct 6, 2019

Inject styles into Shadow DOM when inside Shadow DOM (#5763) #6556

Merged

etimberg closed this as completed in #6556 Oct 25, 2019

etimberg pushed a commit that referenced this issue Oct 25, 2019

Inject styles into Shadow DOM when inside Shadow DOM (#5763) (#6556)

0b62f28

exwm pushed a commit to exwm/Chart.js that referenced this issue Apr 30, 2021

Inject styles into Shadow DOM when inside Shadow DOM (chartjs#5763) (c…

3169d9f

…hartjs#6556)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chart does not resize inside shadow DOM (e.g. Polymer) #5763

Chart does not resize inside shadow DOM (e.g. Polymer) #5763

makitama commented Oct 10, 2018 •

edited by simonbrunel

benmccann commented Oct 15, 2018

simonbrunel commented Nov 9, 2018

makitama commented Nov 10, 2018

simonbrunel commented Nov 10, 2018

makitama commented Nov 10, 2018

simonbrunel commented Nov 10, 2018

etimberg commented Nov 11, 2018

makitama commented Nov 16, 2018

jwillmer commented Dec 5, 2018

etimberg commented Dec 6, 2018

simonbrunel commented Dec 13, 2018

etimberg commented Feb 15, 2019

erikroe commented Sep 3, 2019

Simon-Tang commented Sep 12, 2019

Chart does not resize inside shadow DOM (e.g. Polymer) #5763

Chart does not resize inside shadow DOM (e.g. Polymer) #5763

Comments

makitama commented Oct 10, 2018 • edited by simonbrunel

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Environment

benmccann commented Oct 15, 2018

simonbrunel commented Nov 9, 2018

makitama commented Nov 10, 2018

simonbrunel commented Nov 10, 2018

makitama commented Nov 10, 2018

simonbrunel commented Nov 10, 2018

etimberg commented Nov 11, 2018

makitama commented Nov 16, 2018

jwillmer commented Dec 5, 2018

etimberg commented Dec 6, 2018

simonbrunel commented Dec 13, 2018

etimberg commented Feb 15, 2019

erikroe commented Sep 3, 2019

Simon-Tang commented Sep 12, 2019

makitama commented Oct 10, 2018 •

edited by simonbrunel