Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to align charts/graphs in a single row and not one under the other!

Answered
Sankalp Mogulothu asked on October 14, 2020

Hi,
I was trying to explore various features and I was wondering if there is a way to align my graphs in whichever position I want. I have attached a screenshot to explain my query in a better way.
As you can see, I have the graphs in a single column, one under the other, but if I want to align them in a single row, all three graphs in one single row, each graph in a column, so 3 columns, how will I be able to do that?
I would love to hear back from someone soon to answer my query!
Thank you for your time!

Attachments:
Screenshot (320).png

3 answers

Public
Sankalp Mogulothu October 14, 2020

I used div tags so I’m assuming I just need to align them by defining a class and putting them in the script tag!

Public
Milena Pechura Milena Pechura Flexmonster October 15, 2020

Hi, Sankalp,
 
Thank you for your question and for providing a screenshot for illustration.
 
We would like to confirm that it is possible to align three charts in one single row.
As you mentioned in your second post in this thread, you need to use div tags with defined classes and specify styles in your CSS file added to Flexmonster in the script tag.
Our team has prepared an example for illustration: https://jsfiddle.net/flexmonster/2pcdjys8/.
 
In the example, we wrapped each chart container in the div element with the col-4 class and then these elements in the div with the row class. In the CSS box, we defined width: 30% for the col-4 class.
You are welcome to add further customization to the provided example by using CSS.
 
Please let us know if it helps and if any other questions arise.
 
Best regards,
Milena

Public
Sankalp Mogulothu October 15, 2020

Ms. Pechura,
Thank you so much for the detailed explanation. I was able to make it work and also attached a reference photo to show you.
 
Thank you for taking the time to help me out.

Attachments:
Screenshot (345).png

Please login or Register to Submit Answer