چارت جی اس توضیح هدر در این قسمت قرار دارد...

<!-- required js -->
<script src="assets/plugins/chart.js/dist/chart.min.js"/></script>

<!-- html -->
<canvas id="lineChart"></canvas>

<!-- script -->
<script>
  var ctx = document.getElementById('lineChart');
  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
      datasets: [{
        color: COLOR_THEME,
        backgroundColor: hexToRgba(COLOR_THEME, .2),
        borderColor: COLOR_THEME,
        borderWidth: 1.5,
        pointBackgroundColor: COLOR_WHITE,
        pointBorderWidth: 1.5,
        pointRadius: 4,
        pointHoverBackgroundColor: COLOR_THEME,
        pointHoverBorderColor: COLOR_WHITE,
        pointHoverRadius: 7,
        label: 'فروش کلی',
        data: [12, 19, 4, 5, 2, 3]
      }]
    }
  });
</script>

<!-- required js -->
<script src="assets/plugins/chart.js/dist/chart.min.js"/></script>

<!-- html -->
<canvas id="barChart"></canvas>

<!-- script -->
<script>
  var ctx2 = document.getElementById('barChart');
  var barChart = new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: ['مهر','آبان','آذر','دی','بهمن','اسفند'],
      datasets: [{
        label: 'مشاهده کنندگان',
        data: [37,31,36,34,43,31],
        backgroundColor: hexToRgba(COLOR_THEME, .2),
        borderColor: COLOR_THEME,
        borderWidth: 1.5
      },{
        label: ' مشاهده‌کنندگان جدید',
        data: [12,16,20,14,23,21],
        backgroundColor: hexToRgba(COLOR_GRAY_500, .2),
        borderColor: COLOR_GRAY_500,
        borderWidth: 1.5
      }]
    }
  });
</script>

<!-- required js -->
<script src="assets/plugins/chart.js/dist/chart.min.js"/></script>

<!-- html -->
<canvas id="radarChart"></canvas>

<!-- script -->
<script>
  var ctx3 = document.getElementById('radarChart');
  var radarChart = new Chart(ctx3, {
    type: 'radar',
    data: {
      labels: ['آمریکا', 'کانادا', 'استرالیا', 'هلند', 'آلمان', 'نیوزلند', 'سنگاپور'],
      datasets: [
        {
          label: 'موبایل',
          backgroundColor: hexToRgba(COLOR_THEME, .2),
          borderColor: COLOR_THEME,
          pointBackgroundColor: COLOR_WHITE,
          pointBorderColor: COLOR_THEME,
          pointHoverBackgroundColor: COLOR_THEME,
          pointHoverBorderColor: COLOR_WHITE,
          data: [65, 59, 90, 81, 56, 55, 40],
          borderWidth: 1.5
        },
        {
          label: 'دسکتاپ',
          backgroundColor: hexToRgba(COLOR_GRAY_500, .2),
          borderColor: COLOR_GRAY_500,
          pointBackgroundColor: COLOR_WHITE,
          pointBorderColor: COLOR_GRAY_500,
          pointHoverBackgroundColor: COLOR_GRAY_500,
          pointHoverBorderColor: COLOR_WHITE,
          data: [28, 48, 40, 19, 96, 27, 100],
          borderWidth: 1.5
        }
      ]
    }
  });
</script>

<!-- required js -->
<script src="assets/plugins/chart.js/dist/chart.min.js"/></script>

<!-- html -->
<canvas id="polarAreaChart"></canvas>

<!-- script -->
<script>
  var ctx4 = document.getElementById('polarAreaChart');
  var polarAreaChart = new Chart(ctx4, {
    type: 'polarArea',
    data: {
      datasets: [{
        data: [11, 16, 7, 3, 14],
        backgroundColor: [hexToRgba(COLOR_THEME, .85), hexToRgba(COLOR_INDIGO, .85), hexToRgba(COLOR_CYAN, .85), hexToRgba(COLOR_GRAY_500, .85), hexToRgba(COLOR_GRAY_800, .85)],
        borderWidth: 1.5
      }],
      labels: ['آی ای', 'سافاری', 'کروم', 'فایرفاکس', 'اوپرا']
    }
  });
</script>

<!-- required js -->
<script src="assets/plugins/chart.js/dist/chart.min.js"/></script>

<!-- html -->
<canvas id="pieChart"></canvas>

<!-- script -->
<script>
  var ctx5 = document.getElementById('pieChart');
  var pieChart = new Chart(ctx5, {
    type: 'pie',
    data: {
      labels: ['همه بازدیدکنندگان', 'بازدیدکننده جدید', ' بازدیدکننده سابق'],
      datasets: [{
        data: [300, 50, 100],
        backgroundColor: [COLOR_THEME, COLOR_WHITE, COLOR_GRAY_900],
        hoverBackgroundColor: [COLOR_THEME, COLOR_WHITE, COLOR_GRAY_900],
        borderWidth: 0
      }]
    }
  });
</script>

<!-- required js -->
<script src="assets/plugins/chart.js/dist/chart.min.js"/></script>

<!-- html -->
<canvas id="doughnutChart"></canvas>

<!-- script -->
<script>
  var ctx6 = document.getElementById('doughnutChart');
  var doughnutChart = new Chart(ctx6, {
    type: 'doughnut',
    data: {
      labels: ['همه بازدیدکنندگان', 'بازدیدکننده جدید', ' بازدیدکننده سابق'],
      datasets: [{
        data: [300, 50, 100],
        backgroundColor: [COLOR_THEME, COLOR_WHITE, COLOR_GRAY_900],
        hoverBackgroundColor: [COLOR_THEME, COLOR_WHITE, COLOR_GRAY_900],
        borderWidth: 0
      }]
    }
  });
</script>