Streaming live at 10am (PST)

How to Create Bar Chart from Divs?

Hi everyone,

For the life of me, I can’t figure out what I’m doing wrong. I want to create a bar chart where the bars are aligned and centered on the bottom of the chart, just like the first image below. But for some reason I can only get a misaligned chart with the bars originating from the top.

I’ve included a read-only link here. Can some kind soul help me and explain what I’m doing wrong?

https://preview.webflow.com/preview/webflowtemp-272da467886c7cdb7a679a8c?utm_medium=preview_link&utm_source=designer&utm_content=webflowtemp-272da467886c7cdb7a679a8c&preview=9e1a10acb3bcffec1954a97009d0bf77&mode=preview

What I want to achieve
Bar Chart Goal

What I got
Bar Chart Got


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@mbmorton - maybe try a grid layout:

image

image

image

Just apply a vertical flex to Ramsey Chart Line:

image

And remove the 15px right-hand padding to TG Chart Date

Boom - centred, bottom-justified content.

image

1 Like

@Andy_Vaughan - good call, I was looking at that as well and just totally forgot about flex-direction :neutral_face: this is probably the simpler way to do it.

1 Like

@sam-g I do like grids myself - I only put this counter solution up for ease of use - a few clicks with no structural change required, and he’s achieved his aim. Either solution would definitely do the job :slight_smile:

1 Like

Thank you! That seems to have worked.

I still have a couple of things to tweak, but I do believe you helped me see what I was doing wrong.

Thanks again!

1 Like