Multiple Charts all in one HTML page view

plotly.js
1

I have multiple Plotly Charts displaying in an HTML page and you scroll the page down to see all of them. I want someway to make all the charts visible on one view without needing to scroll. This means making the charts smaller and transforming them from the current state of one after another to like side by side and also vertically one after another, something like a bunch of rectangles fitting inside a bigger rectangle(THe HTML Page view). One chart should be a bit bgger which is the main chart and all other charts will be same size.

I am using Angular JS to filter data out of a JSON file and then Plotly to draw the charts.
My HTML format is like this:

HTML
…some code here…
div id=“plotlyChart” / div
…code to handle the data and create the plot…
div id=“plotlyChart_1” / div

The plotlyChart part is the chart I get from my Angular JS script

Pic for reference:
Current: https://i.stack.imgur.com/3Rk0d.png
Need: https://i.stack.imgur.com/ZyKVx.png

Any help is appreciated!

2

This sounds more like an AngularJS question than a plotly.js issue. I’d recommend reposting your question on https://stackoverflow.com/questions/tagged/angularjs

3

You should be looking into a grid layout system. Something like Bootstrap. angular has nothing to do with layout. Bootstrap 4 has cards, decks, and all kind of column/row configurations. Position your charts into the layout first, then let Angular pump data for them and you should see the expected result.

Mark

4

Thank you, I do not know Bootstrap so I will start learning it.