Black Friday! Up to 90% OFF
<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>
<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>
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();
<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>
<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>
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 });
<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>
<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>
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", }, }, ], }, }, });