Incorrect Sizing in Non-Chrome Browsers

[OptrixAU]

The created DIV scales differently on Chrome when compared to other browsers, such as Edge and Firefox.

Should the code set the width and height of the parent of the chart control? Or is that left up to the designer? Even then, Edge seems to have issues.

It's an unusual inconsistency between browsers.

http://jsfiddle.net/5vqLswwx/1/

[lflores]

Thanks a lot for your test. I have tested the library with IE and Chrome, and I have no problems (Or I can't see them ;)).
Basically the component, evaluates if it has received the width (or height) and if not, uses the container width (or height). In your example you are providing the size and this is the error that you can see.

The code on next lines
this._config.width = typeof this._config.width === 'undefined' ?
this.container[0][0].clientWidth :
this._config.width;
this._config.height = typeof this._config.height === 'undefined' ?
this.container[0][0].clientHeight :
this._config.height;

As you can see on this copy of your fiddle http://jsfiddle.net/leoflores/5vqLswwx/2/ the red dashed border, remarks "your" size instead size of container. The solution is to avoid the width or height, and will be selected by the component.
I can change the size from component, but I don't want to invade the decision of designer, changing the size of container. This is the reason, because the component adapts to container size.
I will try your example with another browsers.
Regards

[ChamaraPhilipsuom]

How about overriding the .gravity-container class as follows?

.gravity-container{
  border: 1px red dashed;
  width:-moz-fit-content;;
  height:inherit
}

What will be the effect of above approach?