Best way to create Diagrams in Webflow

Design help Layout & Design
1

Hey,
I have a question:

Whats the best way to create diagrams in Webflow so Bardiagramms, pie charts and line charts.

Thanks in advance!

2

I have used Chart.js before with some success.
But it does involve using a lot of embed elements, and some knowledge of Javascript.
That is if you want to work with real data.

If you are not working with real data, and the diagrams are just being used a graphic elements, then you could create them using simple divs and interactions.

3

Thanks for the reply, I have now been trying to implement Chart.js for an hour, none of the tutorials seem to work for me.
Can you give me an instruction of how I would get it to work?

Thanks in advance!

4

I’m also interested in an example on how to implement (the basics) the right way. Is there someone here that has used charts.js succesfully and can share some of their work?

EDIT: i think i’ve found one - not looked into it deeply yet.
https://webflow.com/website/8-Client-Dashboard-Template-ZERO-CODE

7

Yes I actually did:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

8

Yes I did.
Here is a link of a documet with the code of every chart I used:

9

Thanks!
I have been working on it for a day and pretty much is doable.
Though i must say it’s pretty trial and error(-sensitive).
I know javascript (just) enough to edit some things, but the overall structure can get pretty complex quickly.

I am still searching / hoping that i can find a perhaps an easier way or live-tool to design&build the graphs that are needed.

Is there perhaps some other system that i could try/use? Just a little bit easier/faster than chart.js?

10

I just started building charts with div blocks.

11

I have done this with divs as well and i used CSS calc to size them.
This works pretty good, but!, it’s harder to do comparison things, and specifically do logaritmic scales f.e. (you can only use + - * / in CSS calc).

Check out: Compare Bots
(select a unit in left and right column)
I’d like to get differences between items (like green arrows for the unit with higher stats)