Bootstrap Charts

Discover 14 Bootstrap Charts available in Loopple

Requires JavaScript

Chart Line

Component from Adminkit Builder

<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Recent Movement</h5>
    </div>
    <div class="card-body py-3">
        <div class="chart chart-sm"><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-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas>
        </div>
    </div>
</div>

<script>
var chartsLine = document.querySelectorAll(".chart-line");

chartsLine.forEach(function(chart) {
  if (!chart.getAttribute('data-chart-initialized')) {
      var ctx = chart.getContext("2d");

      var gradient = ctx.createLinearGradient(0, 0, 0, 225);
      gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
      gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
      // Line chart
      new Chart(ctx, {
          type: "line",
          data: {
              labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                  label: "Sales ($)",
                  fill: true,
                  backgroundColor: gradient,
                  borderColor: window.theme.primary,
                  data: [
                      2115,
                      1562,
                      1584,
                      1892,
                      1587,
                      1923,
                      2566,
                      2448,
                      2805,
                      3438,
                      2917,
                      3327
                  ]
              }]
          },
          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.0)"
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          stepSize: 1000
                      },
                      display: true,
                      borderDash: [3, 3],
                      gridLines: {
                          color: "rgba(0,0,0,0.0)"
                      }
                  }]
              }
          }
      });
      chart.setAttribute("data-chart-initialized", "true");
  }
});
</script>

Requires JavaScript

Chart Pie

Component from Adminkit Builder

<div class="card flex-fill w-100 draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Browser Usage</h5>
    </div>
    <div class="card-body d-flex">
        <div class="align-self-center w-100">
            <div class="py-3">
                <div class="chart chart-xs"><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-dashboard-pie" width="856" height="400" style="display: block; height: 200px; width: 428px;" class="chart-pie chartjs-render-monitor"></canvas>
                </div>
            </div>

            <table class="table mb-0">
                <tbody>
                    <tr>
                        <td>Chrome</td>
                        <td class="text-end">4306</td>
                    </tr>
                    <tr>
                        <td>Firefox</td>
                        <td class="text-end">3801</td>
                    </tr>
                    <tr>
                        <td>IE</td>
                        <td class="text-end">1689</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
var chartsPie = document.querySelectorAll(".chart-pie");

chartsPie.forEach(function(chart) {
  if (!chart.getAttribute('data-chart-initialized')) {
      new Chart(chart, {
      type: "pie",
        data: {
          labels: ["Chrome", "Firefox", "IE"],
          datasets: [{
            data: [4306, 3801, 1689],
            backgroundColor: [
              window.theme.primary,
              window.theme.warning,
              window.theme.danger
            ],
            borderWidth: 5
          }]
        },
        options: {
          responsive: !window.MSInputMethodContext,
          maintainAspectRatio: false,
          legend: {
            display: false
          },
          cutoutPercentage: 75
        }
      });
      chart.setAttribute("data-chart-initialized", "true");
  }
});
</script>

Requires JavaScript

Chart Pie

Component from Asteria Dashboard Builder

<div class="card mb-4 z-index-2 draggable">
    <div class="card-header pb-0">
        <h6 class="mb-1">Market Distribution</h6>
    </div>
    <div class="card-body card-body px-3 pt-lg-6 pb-lg-5">
        <div class="row h-100">
        <div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center">
            <div id="chart-pie" class="chart-pie">
            </div>
        </div>
        </div>
    </div>
</div>

<script>
var ctx = document.getElementById("chart-pie");

  var chartPie = new ApexCharts(ctx, {
    chart: {
       width: 380,
       type: 'donut',
     },
     dataLabels: {
       enabled: false
     },
     plotOptions: {
        pie: {
          customScale: 1,
          expandOnClick: false,
          donut: {
            size: "80%",
          }
        },
      },
    legend: {
        position: "right",
        verticalAlign: "center",
        containerMargin: {
          left: 35,
          right: 60
        }
      },
     series: [66, 55, 13, 33],
     labels: ['Asia', 'USA', 'China', 'Africa'],
     colors: ['#00ab5599', '#00ab55', '#00ab5535', '#00ab5550'],
     donut: {
       size: "100%"
     },
     responsive: [
        {
           breakpoint: 1550,
           options: {
             chart: {
                width: 340,
             },
             legend: {
                 position: "bottom",
                 verticalAlign: "bottom",
                 containerMargin: {
                   left: 'auto',
                   right: 'auto'
                 }
               },
           }
        },
        {
           breakpoint: 1450,
           options: {
             chart: {
                width: 300,
             },
           }
        }
      ]
  });

  chartPie.render();
</script>

Requires JavaScript

Chart Bar Stacked

Component from Asteria Dashboard Builder

<div class="card mb-4 z-index-2 draggable">
    <div class="card-header pb-0">
        <h6 class="mb-1">Stock Available</h6>
    </div>
    <div class="card-body">
        <canvas class="chart-bar-stacked" width="400" height="200"></canvas>
    </div>
</div>

<script>
const ctx3 = document.querySelectorAll('.chart-bar-stacked');

const data = {
  labels: [
    "2015",
    "2016",
    "2017",
    "2018",
    "2019",
    "2020"
  ],
  datasets: [
    {
      label: "Long",
      backgroundColor: "#0dcaf0",

      data: [
        9000,
        5000,
        5240,
        3520,
        2510,
        3652
      ]
    },
    {
      label: "Short",
      backgroundColor: "#5e72e4",
      data: [
        3000,
        4000,
        6000,
        3500,
        3600,
        8060
      ]
    },
    {
      label: "Spreading",
      backgroundColor: "#20c997",
      data: [
        6000,
        7200,
        6500,
        4600,
        3600,
        9200
      ]
    }
  ]
};

const options = {
  scales: {
    yAxes: [
       { 
           stacked: true,  
           ticks: { fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" }, 
           gridLines: { display: false }
     
        }],
    xAxes: [
      {
        stacked: true,
        ticks: {  fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" }
      }
    ]
  }
};

const chart = new Chart(ctx3[ctx3.length-1], {
  // The type of chart we want to create
  type: "bar",
  // The data for our dataset
  data: data,
  // Configuration options go here
  options: options
});
</script>

Requires JavaScript

Chart Lines

Component from Asteria Dashboard Builder

<div class="card mb-4 draggable">
    <div class="card-header pb-0 d-flex align-items-center">
        <div>
        <h6 class="mb-1">Sales overview</h6>
        <p class="text-sm mb-0">
            (+32%) more in 2021
        </p>
        </div>
        <select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example">
        <option selected>2021</option>
        <option value="2020">2020</option>
        </select>
    </div>
    <div class="card-body p-3">
        <div class="chart">
        <canvas class="chart-line" class="chart-canvas" height="300"></canvas>
        </div>
    </div>
</div>

<script>
var ctx2 = document.querySelectorAll(".chart-line");

    new Chart(ctx2[ctx2.length-1], {
        type: "line",
        data: {
          labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          datasets: [{
              label: "Black Friday",
              tension: 0.4,
              borderWidth: 0,
              pointRadius: 0,
              borderColor: "#00ab55",
              borderWidth: 3,
              backgroundColor: "transparent",
              data: [20, 60, 20, 50, 90, 220, 440, 380, 500],
              maxBarThickness: 6
            },
            {
              label: "Autumn Sale",
              tension: 0.4,
              borderWidth: 0,
              pointRadius: 0,
              borderColor: "#212b36",
              borderWidth: 3,
              backgroundColor: "transparent",
              data: [30, 90, 40, 140, 290, 290, 240, 270, 230],
              maxBarThickness: 6
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            display: false,
          },
          tooltips: {
            enabled: true,
            mode: "index",
            intersect: false,
          },
          scales: {
            yAxes: [{
              gridLines: {
                borderDash: [2],
                borderDashOffset: [2],
                color: '#dee2e6',
                zeroLineColor: '#dee2e6',
                zeroLineWidth: 1,
                zeroLineBorderDash: [2],
                drawBorder: false,
              },
              ticks: {
                suggestedMin: 0,
                suggestedMax: 500,
                beginAtZero: true,
                padding: 10,
                fontSize: 11,
                fontColor: '#adb5bd',
                lineHeight: 3,
                fontStyle: 'normal',
                fontFamily: "Public Sans",
              },
            }, ],
            xAxes: [{
              gridLines: {
                zeroLineColor: 'rgba(0,0,0,0)',
                display: false,
              },
              ticks: {
                padding: 10,
                fontSize: 11,
                fontColor: '#adb5bd',
                lineHeight: 3,
                fontStyle: 'normal',
                fontFamily: "Public Sans",
              },
            }, ],
          },
        },
      });
</script>