circosJS icon indicating copy to clipboard operation
circosJS copied to clipboard

Resize Chart - Responsiveness

Open kkknet opened this issue 6 years ago • 3 comments

Hi,

Does CircosJS has resize chart method/functionality?. I would like to resize the chart according to the window resize. Is there anything which is in built already?. If not, please let me know if anyone has done anything similar. Thanks.

kkknet avatar Jan 24 '18 00:01 kkknet

Hi,

No it's not a use case I considered. I didn't try the following code but I guess a very inneficient way to do it would be:


const renderCircos = (width, height) => {
  const circos = new Circos({width, height}).render()
}

window.addEventListener('resize', () => {
  renderCircos(window.innerWidth, window.innerHeight)
})

nicgirault avatar Jan 24 '18 07:01 nicgirault

Thanks for the quick response.

I tried doing the same. The only issue was layout regions are not getting displayed properly if we change the height and width of the chart (tried changing inner radius and outer radius of the config too).

Layout regions on the right hand side are getting hidden and the layout regions are not positioned in center in with the new width and height.

Is there a setting I am missing?

kkknet avatar Jan 24 '18 15:01 kkknet

@nicgirault I was able to achieve the functionality almost close to auto resize with window using by subscribing to windows resize event and changing the inner radius and outer radius.

kkknet avatar Feb 19 '18 05:02 kkknet