Overview Official Website

ApexCharts is loaded with powerful features to fulfill your data-visualization needs.

Usage

Find the JS file for the following chart at: resources/js/components/apexchart-area.js

Basic Area Chart#

html

                                                
                                                    <div dir="ltr" class="mb-3">
                                                        <div id="basic-area" class="apex-charts"></div>
                                                    </div>

Spline Area#

html

                                                
                                                    <div dir="ltr">
                                                        <div id="spline-area" class="apex-charts"></div>
                                                    </div>

Area Chart - Datetime X-axis#

html

                                                
                                                    <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#

html

                                                
                                                    <div dir="ltr" class="mb-3">
                                                        <div id="area-chart-negative" class="apex-charts"></div>
                                                    </div>

Irregular TimeSeries#

html

                                                
                                                    <div dir="ltr">
                                                        <div id="area-timeSeries" class="apex-charts"></div>
                                                    </div>