Charts

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

Bar chart

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

Bar chart horizontal

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

Bar chart combo

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

Line chart

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

Line chart interpolation

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

Line chart area

                    
                      <canvas class="max-w-100" id="LineArea"></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="relative" style="margin-top: -18%;margin-bottom:-18%">
                        <canvas id="GaugeChart" class="max-w-100"></canvas>
                      </div>

Mixed chart

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

Doughnut chart

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

Pie chart

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

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