Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Soft UI Design System Argon Dashboard AdminKit Asteria Dashboard Soft UI Dashboard Motion Landing Library React Riva Dashboard Tailwind Chakra UI Dashboard Motion Landing Library Soft UI Dashboard Tailwind
All 380
Testimonials 9
Navbars 27
Faq 1
Blogs 11
Headers 30
Contents 10
Stats 4
Authentication 7
Features 16
Cards Section 28
Teams 5
Call To Actions 9
Logo Areas 3
Contact Us 2
Pricing 4
Charts 14
Tables 24
Cards 38
Components 27
Forms 9
Sidebars 19
Charts Section 4
Tables Section 11
Projects Section 10
Teams Section 8
Typography 24
Profiles Section 8
Contacts Section 9

Bootstrap Charts

Discover 14 Bootstrap Charts available in Loopple

Requires JavaScript

Chart Bar

Component from Argon Dashboard Builder 
<div class="card draggable">
  <div class="card-header bg-transparent">
    <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
    <h5 class="h3 mb-0">Total orders</h5>
  </div>
  <div class="card-body">
    <div class="chart">
      <canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
    </div>
  </div>
</div>

<script>
var chartsBar = document.querySelectorAll(".chart-bar");

chartsBar.forEach(function(chart) {
   if (!chart.getAttribute('data-chart-initialized')) {
    
    new Chart(chart, {
       type: "bar",
       data: {
         labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
         datasets: [
           {
             label: "Sales",
             tension: 0.4,
             borderWidth: 0,
             pointRadius: 0,
             backgroundColor: "#fb6340",
             data: [25, 20, 30, 22, 17, 29],
             maxBarThickness: 10,
           },
         ],
       },
       options: {
         responsive: true,
         maintainAspectRatio: false,
         legend: {
           display: false,
         },
         tooltips: {
           enabled: true,
           mode: "index",
           intersect: false,
         },
         scales: {
           yAxes: [
             {
               gridLines: {
                 borderDash: [2],
                 borderDashOffset: [2],
                 drawTicks: false,
                 drawBorder: false,
                 lineWidth: 1,
                 zeroLineWidth: 0,
                 zeroLineBorderDash: [0],
                 zeroLineBorderDashOffset: [2],
               },
               ticks: {
                 beginAtZero: true,
                 padding: 10,
                 fontSize: 13,
                 lineHeight: 5,
                 fontColor: "#8898aa",
                 fontFamily: "Open Sans",
               },
             },
           ],
           xAxes: [
             {
               gridLines: {
                 display: false,
                 drawBorder: false,
                 drawOnChartArea: false,
                 drawTicks: false,
               },
               ticks: {
                 padding: 20,
                 fontSize: 13,
                 fontColor: "#8898aa",
                 fontFamily: "Open Sans",
               },
             },
           ],
         },
       },
    }); 
    chart.setAttribute("data-chart-initialized", "true");
  }
});
</script>
Requires JavaScript

Chart Line Nav

Component from Argon Dashboard Builder 
<div class="card bg-default draggable">
  <div class="card-header bg-transparent">
      <div class="row align-items-center">
        <div class="col">
          <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
          <h5 class="h3 text-white mb-0">Sales value</h5>
        </div>
        <div class="col">
        <ul class="nav nav-pills justify-content-end">
          <li class="nav-item mr-2 mr-md-0" data-toggle="chart">
            <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
              <span class="d-none d-md-block">Month</span>
              <span class="d-md-none">M</span>
            </a>
          </li>
          <li class="nav-item" data-toggle="chart">
            <a href="#" class="nav-link py-2 px-3" data-toggle="tab">
              <span class="d-none d-md-block">Week</span>
              <span class="d-md-none">W</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="chart">
      <canvas id="chart-sales-dark" class="chart-line chart-canvas"></canvas>
    </div>
  </div>
</div>

<script>
var chartsLine = document.querySelectorAll(".chart-line");

chartsLine.forEach(function(chart) {
    if (!chart.getAttribute('data-chart-initialized')) {

        new Chart(chart, {
            type: "line",
            data: {
                labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Performance",
                    tension: 0.4,
                    borderWidth: 4,
                    borderColor: "#5e72e4",
                    pointRadius: 0,
                    backgroundColor: "transparent",
                    data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
                }, ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                    mode: "index",
                    intersect: false,
                },
                scales: {
                    yAxes: [{
                        barPercentage: 1.6,
                        gridLines: {
                            drawBorder: false,
                            color: "rgba(29,140,248,0.0)",
                            zeroLineColor: "transparent",
                        },
                        ticks: {
                            padding: 0,
                            fontColor: "#8898aa",
                            fontSize: 13,
                            fontFamily: "Open Sans",
                        },
                    }, ],
                    xAxes: [{
                        barPercentage: 1.6,
                        gridLines: {
                            drawBorder: false,
                            color: "rgba(29,140,248,0.0)",
                            zeroLineColor: "transparent",
                        },
                        ticks: {
                            padding: 10,
                            fontColor: "#8898aa",
                            fontSize: 13,
                            fontFamily: "Open Sans",
                        },
                    }, ],
                },
                layout: {
                    padding: 0,
                },
            },
        });
        chart.setAttribute("data-chart-initialized", "true");
    }
});
</script>
Requires JavaScript

Chart Line

Component from Adminkit Builder 
<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Recent Movement</h5>
    </div>
    <div class="card-body py-3">
        <div class="chart chart-sm"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
            <canvas id="chartjs-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas>
        </div>
    </div>
</div>

<script>
var chartsLine = document.querySelectorAll(".chart-line");

chartsLine.forEach(function(chart) {
  if (!chart.getAttribute('data-chart-initialized')) {
      var ctx = chart.getContext("2d");

      var gradient = ctx.createLinearGradient(0, 0, 0, 225);
      gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
      gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
      // Line chart
      new Chart(ctx, {
          type: "line",
          data: {
              labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                  label: "Sales ($)",
                  fill: true,
                  backgroundColor: gradient,
                  borderColor: window.theme.primary,
                  data: [
                      2115,
                      1562,
                      1584,
                      1892,
                      1587,
                      1923,
                      2566,
                      2448,
                      2805,
                      3438,
                      2917,
                      3327
                  ]
              }]
          },
          options: {
              maintainAspectRatio: false,
              legend: {
                  display: false
              },
              tooltips: {
                  intersect: false
              },
              hover: {
                  intersect: true
              },
              plugins: {
                  filler: {
                      propagate: false
                  }
              },
              scales: {
                  xAxes: [{
                      reverse: true,
                      gridLines: {
                          color: "rgba(0,0,0,0.0)"
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          stepSize: 1000
                      },
                      display: true,
                      borderDash: [3, 3],
                      gridLines: {
                          color: "rgba(0,0,0,0.0)"
                      }
                  }]
              }
          }
      });
      chart.setAttribute("data-chart-initialized", "true");
  }
});
</script>
Requires JavaScript

Chart Pie

Component from Adminkit Builder 
<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Browser Usage</h5>
    </div>
    <div class="card-body d-flex">
        <div class="align-self-center w-100">
            <div class="py-3">
                <div class="chart chart-xs"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                    <canvas id="chartjs-dashboard-pie" width="856" height="400" style="display: block; height: 200px; width: 428px;" class="chart-pie chartjs-render-monitor"></canvas>
                </div>
            </div>

            <table class="table mb-0">
                <tbody>
                    <tr>
                        <td>Chrome</td>
                        <td class="text-end">4306</td>
                    </tr>
                    <tr>
                        <td>Firefox</td>
                        <td class="text-end">3801</td>
                    </tr>
                    <tr>
                        <td>IE</td>
                        <td class="text-end">1689</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
var chartsPie = document.querySelectorAll(".chart-pie");

chartsPie.forEach(function(chart) {
  if (!chart.getAttribute('data-chart-initialized')) {
      new Chart(chart, {
      type: "pie",
        data: {
          labels: ["Chrome", "Firefox", "IE"],
          datasets: [{
            data: [4306, 3801, 1689],
            backgroundColor: [
              window.theme.primary,
              window.theme.warning,
              window.theme.danger
            ],
            borderWidth: 5
          }]
        },
        options: {
          responsive: !window.MSInputMethodContext,
          maintainAspectRatio: false,
          legend: {
            display: false
          },
          cutoutPercentage: 75
        }
      });
      chart.setAttribute("data-chart-initialized", "true");
  }
});
</script>
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>
Requires JavaScript

Chart Bar Stacked

Component from Asteria Dashboard Builder 
<div class="card mb-4 z-index-2 draggable">
    <div class="card-header pb-0">
        <h6 class="mb-1">Stock Available</h6>
    </div>
    <div class="card-body">
        <canvas class="chart-bar-stacked" width="400" height="200"></canvas>
    </div>
</div>

<script>
const ctx3 = document.querySelectorAll('.chart-bar-stacked');

const data = {
  labels: [
    "2015",
    "2016",
    "2017",
    "2018",
    "2019",
    "2020"
  ],
  datasets: [
    {
      label: "Long",
      backgroundColor: "#0dcaf0",

      data: [
        9000,
        5000,
        5240,
        3520,
        2510,
        3652
      ]
    },
    {
      label: "Short",
      backgroundColor: "#5e72e4",
      data: [
        3000,
        4000,
        6000,
        3500,
        3600,
        8060
      ]
    },
    {
      label: "Spreading",
      backgroundColor: "#20c997",
      data: [
        6000,
        7200,
        6500,
        4600,
        3600,
        9200
      ]
    }
  ]
};

const options = {
  scales: {
    yAxes: [
       { 
           stacked: true,  
           ticks: { fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" }, 
           gridLines: { display: false }
     
        }],
    xAxes: [
      {
        stacked: true,
        ticks: {  fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" }
      }
    ]
  }
};

const chart = new Chart(ctx3[ctx3.length-1], {
  // The type of chart we want to create
  type: "bar",
  // The data for our dataset
  data: data,
  // Configuration options go here
  options: options
});
</script>
Requires JavaScript

Chart Lines

Component from Asteria Dashboard Builder 
<div class="card mb-4 draggable">
    <div class="card-header pb-0 d-flex align-items-center">
        <div>
        <h6 class="mb-1">Sales overview</h6>
        <p class="text-sm mb-0">
            (+32%) more in 2021
        </p>
        </div>
        <select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example">
        <option selected>2021</option>
        <option value="2020">2020</option>
        </select>
    </div>
    <div class="card-body p-3">
        <div class="chart">
        <canvas class="chart-line" class="chart-canvas" height="300"></canvas>
        </div>
    </div>
</div>

<script>
var ctx2 = document.querySelectorAll(".chart-line");

    new Chart(ctx2[ctx2.length-1], {
        type: "line",
        data: {
          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          datasets: [{
              label: "Black Friday",
              tension: 0.4,
              borderWidth: 0,
              pointRadius: 0,
              borderColor: "#00ab55",
              borderWidth: 3,
              backgroundColor: "transparent",
              data: [20, 60, 20, 50, 90, 220, 440, 380, 500],
              maxBarThickness: 6
            },
            {
              label: "Autumn Sale",
              tension: 0.4,
              borderWidth: 0,
              pointRadius: 0,
              borderColor: "#212b36",
              borderWidth: 3,
              backgroundColor: "transparent",
              data: [30, 90, 40, 140, 290, 290, 240, 270, 230],
              maxBarThickness: 6
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            display: false,
          },
          tooltips: {
            enabled: true,
            mode: "index",
            intersect: false,
          },
          scales: {
            yAxes: [{
              gridLines: {
                borderDash: [2],
                borderDashOffset: [2],
                color: '#dee2e6',
                zeroLineColor: '#dee2e6',
                zeroLineWidth: 1,
                zeroLineBorderDash: [2],
                drawBorder: false,
              },
              ticks: {
                suggestedMin: 0,
                suggestedMax: 500,
                beginAtZero: true,
                padding: 10,
                fontSize: 11,
                fontColor: '#adb5bd',
                lineHeight: 3,
                fontStyle: 'normal',
                fontFamily: "Public Sans",
              },
            }, ],
            xAxes: [{
              gridLines: {
                zeroLineColor: 'rgba(0,0,0,0)',
                display: false,
              },
              ticks: {
                padding: 10,
                fontSize: 11,
                fontColor: '#adb5bd',
                lineHeight: 3,
                fontStyle: 'normal',
                fontFamily: "Public Sans",
              },
            }, ],
          },
        },
      });
</script>
Requires JavaScript

Chart Interest

Component from Asteria Dashboard Builder
Requires JavaScript

Chart Expenses

Component from Asteria Dashboard Builder
Requires JavaScript

Chart Income

Component from Asteria Dashboard Builder