Argon Dashboard Components

Discover 88 components available in Argon Dashboard

Input

Component from Argon Dashboard Builder

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>

Input Group

Component from Argon Dashboard Builder

<div class="form-group draggable">
    <div class="input-group">
      <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
</div>

Modal

Component from Argon Dashboard Builder

<button type="button" class="btn btn-primary draggable" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>