Charts

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

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

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