search

bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
928 stars 330 forks source link

Zoom chart or horizontal scroll if overflow #212

Closed kodelio closed 2 years ago

kodelio commented 2 years ago

Hello,

Is it possible to automatically zoom out to avoid overflow ? Or make the chart scrollable horizontally with a scroll bar ? Here's my case, when screen is small and there are many nodes :

CleanShot 2022-11-23 at 20 41 29@2x

I have disabled any moving or zooming because I don't want to let user move chart, I just want to show it entirely

this.chartReference.getChartState().svg.on('wheel.zoom', null) this.chartReference.getChartState().svg.on('touchstart.zoom', null) this.chartReference.getChartState().svg.on('touchmove.zoom', null) this.chartReference.getChartState().svg.on('touchend.zoom', null) this.chartReference.getChartState().svg.on('mousedown.zoom', null)

Thanks

kodelio commented 2 years ago

Using another div as a container with a bigger width than the svg and using overflow-x: scroll is enough

bumbeishvili commented 2 years ago

BTW, chart.fit() could also come in handy