Adminkit Components

Discover 1 components available in Adminkit

Requires JavaScript

Section Charts

Component from Adminkit Builder
<div class="row removable">
  <div class="col-12 col-lg-6 drop-zone">
    <div class="card flex-fill w-100 draggable">
      <div class="card-header">
        <h5 class="card-title">Line Chart</h5>
        <h6 class="card-subtitle text-muted">A line chart is a way of plotting data points on a line.</h6>
      </div>
      <div class="card-body">
        <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="chartjs-line" style="display: block; height: 300px; width: 428px;" width="856" height="600" class="chart-line-double chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6 drop-zone">
    <div class="card draggable">
      <div class="card-header">
        <h5 class="card-title">Bar Chart</h5>
        <h6 class="card-subtitle text-muted">A bar chart provides a way of showing data values represented as vertical bars.</h6>
      </div>
      <div class="card-body">
        <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="chartjs-bar" width="856" height="600" style="display: block; height: 300px; width: 428px;" class="chart-bar chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

var chartsLineDouble = document.querySelectorAll(".chart-line-double"); chartsLineDouble.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Sales ($)", fill: true, backgroundColor: "transparent", borderColor: window.theme.primary, data: [2115, 1562, 1584, 1892, 1487, 2223, 2966, 2448, 2905, 3838, 2917, 3327] }, { label: "Orders", fill: true, backgroundColor: "transparent", borderColor: "#adb5bd", borderDash: [4, 4], data: [958, 724, 629, 883, 915, 1214, 1476, 1212, 1554, 2128, 1466, 1827] }] }, 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.05)" } }], yAxes: [{ ticks: { stepSize: 500 }, display: true, borderDash: [5, 5], gridLines: { color: "rgba(0,0,0,0)", fontColor: "#fff" } }] } } }); 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: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Last year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }, { label: "This year", backgroundColor: "#dee2e6", borderColor: "#dee2e6", hoverBackgroundColor: "#dee2e6", hoverBorderColor: "#dee2e6", data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } }); chart.setAttribute("data-chart-initialized", "true"); } });

</script>