Bootstrap Charts - Argon Dashboard

Discover 2 Bootstrap Charts available in Argon Dashboard

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>