Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Reback Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size

Area Charts

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#
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>
                                                
                                            
Selection - Github Style#
html
                                                
                                                    <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>
                                                
                                            
Stacked Area#
html
                                                
                                                    <div dir="ltr">
                                                        <div id="stacked-area" class="apex-charts"></div>
                                                    </div>
                                                
                                            
Irregular TimeSeries#
html
                                                
                                                    <div dir="ltr">
                                                        <div id="area-timeSeries" class="apex-charts"></div>
                                                    </div>
                                                
                                            
Area Chart with Null values#
html
                                                
                                                    <div dir="ltr">
                                                        <div id="area-chart-nullvalues" class="apex-charts"></div>
                                                    </div>
                                                
                                            
© Reback. Crafted by Techzaa