Bootstrap Charts - Asteria Dashboard

Discover 8 Bootstrap Charts available in Asteria Dashboard

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>