Framework
Theme
All
689
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
General
6
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
UI Components Library
Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer
Typography H1
Typography H2
Typography H3
Typography H4
Typography H5
Typography H6
Requires JavaScript
Chart Pie
Component from
Asteria Dashboard
Builder
<div class="card mb-4 z-index-2 draggable"> <div class="card-header pb-0"> <h6 class="mb-1">Market Distribution</h6> </div> <div class="card-body card-body px-3 pt-lg-6 pb-lg-5"> <div class="row h-100"> <div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center"> <div id="chart-pie" class="chart-pie"> </div> </div> </div> </div> </div>
<script>
var ctx = document.getElementById("chart-pie"); var chartPie = new ApexCharts(ctx, { chart: { width: 380, type: 'donut', }, dataLabels: { enabled: false }, plotOptions: { pie: { customScale: 1, expandOnClick: false, donut: { size: "80%", } }, }, legend: { position: "right", verticalAlign: "center", containerMargin: { left: 35, right: 60 } }, series: [66, 55, 13, 33], labels: ['Asia', 'USA', 'China', 'Africa'], colors: ['#00ab5599', '#00ab55', '#00ab5535', '#00ab5550'], donut: { size: "100%" }, responsive: [ { breakpoint: 1550, options: { chart: { width: 340, }, legend: { position: "bottom", verticalAlign: "bottom", containerMargin: { left: 'auto', right: 'auto' } }, } }, { breakpoint: 1450, options: { chart: { width: 300, }, } } ] }); chartPie.render();
</script>
