Argon Dashboard Components

Discover 1 components available in Argon Dashboard

Requires JavaScript

Section Charts

Component from Argon Dashboard Builder
<div class="row removable">
  <div class="col-xl-8 drop-zone">
    <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" data-target="#chart-sales-dark" data-update="{&quot;data&quot;:{&quot;datasets&quot;:[{&quot;data&quot;:[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}" data-prefix="$" data-suffix="k">
                <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" data-target="#chart-sales-dark" data-update="{&quot;data&quot;:{&quot;datasets&quot;:[{&quot;data&quot;:[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}" data-prefix="$" data-suffix="k">
                <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">
        <!-- Chart -->
        <div class="chart">
          <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>
          <!-- Chart wrapper -->
          <canvas id="chart-sales-dark" class="chart-line chart-canvas chartjs-render-monitor" width="1342" height="700" style="display: block; height: 350px; width: 671px;"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 drop-zone">
    <div class="card draggable">
      <div class="card-header bg-transparent">
        <div class="row align-items-center">
          <div class="col">
            <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
            <h5 class="h3 mb-0">Total orders</h5>
          </div>
        </div>
      </div>
      <div class="card-body">
        <!-- Chart -->
        <div class="chart">
          <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="chart-bars" class="chart-bar chart-canvas chartjs-render-monitor" style="display: block; height: 350px; width: 297px;" width="594" height="700"></canvas>
        </div>
      </div>
    </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"); } }); 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>