Ng2-charts: Can you please expose setting the height/width of the canvas?

[egervari]

I want to essentially do this:

@Input() public width:string;
@Input() public height:string;

and in ngOnInit()

this.cvs.width = this.width;
this.cvs.height = this.height;

That way, when responsive is false, it gives me exactly the canvas I need. Possibility?

I tried this change out myself by editing the .js file, and it works in both responsive and non-responsive modes. I am on windows, so I can't build or work with your project or I'd submit the PR myself.

If this isn't the behaviour you want for your library, then there is definitely a bug here:

if (this.options && this.options.responsive && this.parent.clientHeight === 0) {
  return setTimeout(() => this.refresh(), 50);
}

If I shrink the screen, and my chart has styles for setting the width and height to 60px, the chart will eventually display when the screen becomes small enough (like less than 300px width total). Or, if you resize the container in some way, like *ngIf resulting in true, that will force a resize and then the chart will finally show up - but that's not quite the behaviour we want to see.

To be honest, I prefer the same level of control that you'd get with chart.js. It is just simpler. I want to make a 60px icon of a real rendered chart and I don't want it to be responsive or anything. Setting the height/width is just the easiest way to go.

Lastly, there is another bug where setting responsive: true in the options object causes different behaviour than not adding the responsive property and relying on the default. For some reason, actually specifying true causes the behaviour of the height/width to be miscalculated by 30px in my case... but if you just leave it off, it works correctly. I think responsive: true should behave the same as the default behaviour, since it's meant to be responsive by default.

[egervari]

I can't push a branch, so here are the changes. In chart.ts on line 36 add:

  @Input() public width:string;
  @Input() public height:string;

On line 54+

  public ngOnInit():any {
    this.ctx = this.element.nativeElement.children[0].getContext('2d');
    this.cvs = this.element.nativeElement.children[0];

    this.setCanvasDimensions();

    this.parent = this.element.nativeElement;
    this.initFlag = true;
    if (this.data || this.datasets) {
      this.refresh();
    }
  }

  private setCanvasDimensions() {
    if (this.width) {
      this.cvs.width = this.width;
    }

    if (this.height) {
      this.cvs.height = this.height;
    }
  }

[gufi]

it appears this has been added to some degree. can this be closed? ( examples show inputs with width and height )

[JosephSKh]

@gufi I can't find them

[paviad]

This package has been updated for Angular 7, with many bugs fixed and features added. I believe this issue is now resolved. If not, please provide a stackblitz/codepen/... example showing it.