Overview Official Website
ApexCharts is loaded with powerful features to fulfill your data-visualization needs.
Usage
Apexcharts's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.
Find the JS file for the following chart at: ../src/assets/js/components/apexchart-area.js
Basic Area Chart#
<div dir="ltr" class="mb-3">
<div id="basic-area" class="apex-charts"></div>
</div>
Area Chart - Datetime X-axis#
<div class="mb-3">
<div class="toolbar apex-toolbar">
<button id="one_month" class="btn btn-sm btn-light">1M</button>
<button id="six_months" class="btn btn-sm btn-light">6M</button>
<button id="one_year" class="btn btn-sm btn-light active">1Y</button>
<button id="ytd" class="btn btn-sm btn-light">YTD</button>
<button id="all" class="btn btn-sm btn-light">ALL</button>
</div>
<div dir="ltr">
<div id="area-chart-datetime" class="apex-charts"></div>
</div>
</div>
Area with Negative Values#
<div dir="ltr" class="mb-3">
<div id="area-chart-negative" class="apex-charts"></div>
</div>
Selection - Github Style#
<div class="mb-3">
<div id="area-chart-github" class="apex-charts"></div>
<div class="pt-2 pb-2">
<div class="row align-items-center">
<div class="col-auto">
<img src="assets/images/users/avatar-2.jpg" class="avatar-xs rounded" alt="file-image">
</div>
<div class="col ps-0">
<a href="javascript:void(0);" class="text-muted fw-bold">Techzaa</a>
</div>
</div>
</div>
<div id="area-chart-github2" class="apex-charts"></div>
</div>
Area Chart with Null values#
<div dir="ltr">
<div id="area-chart-nullvalues" class="apex-charts"></div>
</div>