<section class="section">
<div class="container">
<div class="columns is-multiline">
<div class="column is-3-desktop is-6-tablet">
<div class="pt-6 has-background-white has-text-centered" style="border-radius: 4px;">
<span class="has-text-grey" style="font-size: 12px;">Engaged Users</span>
<h3 class="title mb-2 mt-2 is-size-3">1 450</h3>
<span class="tag is-success is-light">+115</span>
<div class="chart" data-type="area-small" data-variant="indigo"></div>
</div>
</div>
<div class="column is-3-desktop is-6-tablet">
<div class="pt-6 has-background-white has-text-centered" style="border-radius: 4px;">
<span class="has-text-grey" style="font-size: 12px;">Total Profit</span>
<h3 class="title mb-2 mt-2 is-size-3">$9,054</h3>
<span class="tag is-danger is-light">-$1,535</span>
<div class="chart" data-type="area-small" data-variant="blue"></div>
</div>
</div>
<div class="column is-3-desktop is-6-tablet">
<div class="pt-6 has-background-white has-text-centered" style="border-radius: 4px;">
<span class="has-text-grey" style="font-size: 12px;">Click Counter</span>
<h3 class="title mb-2 mt-2 is-size-3">73.5%</h3>
<span class="tag is-success is-light">+5.64%</span>
<div class="chart" data-type="area-small" data-variant="green"></div>
</div>
</div>
<div class="column is-3-desktop is-6-tablet">
<div class="pt-6 has-background-white has-text-centered" style="border-radius: 4px;">
<span class="has-text-grey" style="font-size: 12px;">Visit Duration</span>
<h3 class="title mb-2 mt-2 is-size-3">0m 50s</h3>
<span class="tag is-success is-light">+15s</span>
<div class="chart" data-type="area-small" data-variant="orange"></div>
</div>
</div>
</div>
</div>
</section>Framework
Bulma
UI Library
All Libraries
Components
- Alert 80
- Application 60
- Banners 10
- Blog 63
- Call to action 99
- Contact 36
- Content 60
- Cookies 44
- E-commerce (orders) 14
- E-commerce (products) 20
- FAQ 41
- Features 135
- Footers 54
- Graphs 9
- HTTP codes 42
- Hero section 78
- How it works 43
- Logo clouds 85
- Modals 7
- Navbar 28
- Navigation (horizontal) 107
- Navigation (vertical) 2
- Newsletter 40
- Portfolio 46
- Pricing 38
- Reviews 5
- Sign in / Sign up 69
- Stats 44
- Tables 26
- Team 38
- Testimonials 47
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Freedom and clarity in presenting data is a key feature of good desig. Bulma graphs components allow you to choose how to present data in order to reflect key aspects of the data. It is important to vary the appearance of the data presentation if you show more data. This way you will keep the attention of the recipient and the data will be easier to understand. Choose from line graphs, pie charts, bar graphs, and other types of data visualization.
Don't forget to take a look at our stats, tables and workflows components.
On this subpage, you can browse the different Bulma graphs component themes that are available in our UI libraries. You will also find many other types of components that will follow a similar style. Each of these libraries has been developed by experienced designers along with our in-house development team.
Get access to all Bulma graphs components, code and our editor. Test the editor demo for free.
