Pixelstrap - Admin Document

Charts

Chartjs charts Offical link Preview link

<!-- Html code for display chartjs chart -->
<canvas id="myDonutChart"></canvas>

To use chartjs chart you have to add the following script files

<!-- Chart JS-->
<script src="../assets/js/vendors/chart.js/dist/chart.umd.js"></script>
<script src="../assets/js/chartjs/chartjs-custom.js"></script>

Custom script added in chart.custom.js file for this chart display and your html code id should be matchwith your custom script js

custom chart.custom.js file

// Donut chart
var ctx3 = document.getElementById("myDonutChart").getContext('2d');
var myChart3 = new Chart(ctx3, {
    type: 'doughnut',
    data: {
        labels: ["Tokyo",	"Mumbai",	"Mexico City",	"Shanghai"],
        datasets: [{    
            data: [1424, 250,	500,	1040],
            borderColor: ["#43B9B2", "#C280D2", "#FD7E40", "#2E8DD3"],
            backgroundColor: ["#43B9B2", "#C280D2", "#FD7E40", "#2E8DD3"],
            borderWidth: 1
        }]},         
    options: {
      responsive: true,
      maintainAspectRatio: false,
    }
});

Chartist charts Offical link Preview link

<!-- Html code for display chart -->
<div class="chartist-container" id="ct-4"></div>

To use chartist chart you have to add the following script files

<!-- Chartist -->
<script src="../assets/js/chart/chartist/chartist.js"></script>
<script src="../assets/js/chart/chartist/chartist-custom.js"></script>

To use chartist chart you have to add the following style file

<!-- Chartist -->
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/chartist/dist/index.css">

Custom script added in chartist-custom.js file for this chart display and your html code class should be match with your custom script js

custom chartist-custom.js file

// Line chart with area
new Chartist.Line(
  "#ct-4",
  {
    labels: [1, 2, 3, 4, 5, 6, 7, 8],
    series: [[5, 9, 7, 8, 5, 3, 5, 4]],
  },
  {
    low: 0,
    showArea: true,
  }
  );

Apex charts Offical link Preview link

<!-- Html code for display apex chart -->
<div id="line-chart"></div>

To use apex chart you have to add the following script files

<!-- Apex Chart JS-->
<script src="../assets/js/vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/js/apexchart/apexchart-custom.js"></script>

Custom script added in chart-custom.js file for this chart display and your html code id should be matchwith your custom script js

custom chart-custom.js file

// basic area chart
// basic line chart
var options = {
  series: [
    {
      name: "Desktop",
      data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
    },
  ],
  chart: {
    height: 350,
    type: "line",
    toolbar: {
      show: false,
    },
    zoom: {
      enabled: false,
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: "straight",
  },
  title: {
    text: "Product Trends by Month",
    align: "left",
  },
  grid: {
    row: {
      colors: ["var(--light-color)", "transparent"], // takes an array which will be repeated on columns
      opacity: 0.5,
    },
  },
  colors: ["#43B9B2"],,
  xaxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
  },
};
var chart = new ApexCharts(document.querySelector("#line-chart"), options);
chart.render();