Bootstrap Charts Section - Adminkit

Discover 1 Bootstrap Charts Section 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>