Charts

Charts on this page use Chart.js - Simple yet flexible JavaScript charting for designers & developers.

Bar chart

                    
                      <canvas class="max-w-100" id="ChartGender"></canvas>

Horizontal Bar chart

                    
                      <canvas class="max-w-100" id="ChartReferral"></canvas>

Vertical Bar chart 2

                    
                      <canvas class="max-w-100" id="Operating"></canvas>

Horizontal Bar chart 2

                    
                      <canvas class="max-w-100" id="Growth"></canvas>

Bar chart combo

                    
                      <canvas class="max-w-100" id="TrafficChart"></canvas>

Line chart

                    
                      <canvas class="max-w-100" id="SalesTargetLine"></canvas>

Line chart interpolation

                    
                      <canvas class="max-w-100" id="LineChart"></canvas>

Line chart area

                    
                      <canvas class="max-w-100" id="SalestargetArea"></canvas>

Line chart thin

                    
                      <canvas class="max-w-100" id="UserChart"></canvas>

Plain chart

                    
                      <canvas class="max-w-100" id="LineAreaSm"></canvas>
                      <canvas class="max-w-100" id="BarChartSm"></canvas>

Gauge chart

                    
                      <div class="flex justify-center px-12">
                        <canvas id="Gauge" class="max-w-100"></canvas>
                      </div>

Mixed chart

                    
                      <canvas class="max-w-100" id="SalesTarget"></canvas>

Doughnut chart

                    
                      <canvas class="max-w-100" id="BrowserChart"></canvas>

Pie chart

                    
                      <canvas class="max-w-100" id="Statement"></canvas>

All demo chart config is available in src/js/chart/**.js. Please read more documentaion about chart in https://www.chartjs.org/