Line Chart

Line charts are a typical pictorial representation that depicts trends and behaviors over time.

Chart.js example

new Chart(document.getElementById("chartjs-line"), {
  type: "line",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Sales ($)",
      fill: true,
      backgroundColor: "transparent",
      borderColor: window.theme.primary,
      data: [2115, 1562, 1584, 1892, 1487, 2223, 2966, 2448, 2905, 3838, 2917, 3327]
    }, {
      label: "Orders",
      fill: true,
      backgroundColor: "transparent",
      borderColor: "#adb5bd",
      borderDash: [4, 4],
      data: [958, 724, 629, 883, 915, 1214, 1476, 1212, 1554, 2128, 1466, 1827]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        reverse: true,
        gridLines: {
          color: "rgba(0,0,0,0.05)"
        }
      }],
      yAxes: [{
        borderDash: [5, 5],
        gridLines: {
          color: "rgba(0,0,0,0)",
          fontColor: "#fff"
        }
      }]
    }
  }
});

ApexCharts example

WARNING

This feature is only available in AdminKit PRO. Learn more.

var options = {
  chart: {
    height: 350,
    type: "line",
    zoom: {
      enabled: false
    },
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    width: [5, 7, 5],
    curve: "straight",
    dashArray: [0, 8, 5]
  },
  series: [{
      name: "Session Duration",
      data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
    },
    {
      name: "Page Views",
      data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
    },
    {
      name: "Total Visits",
      data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
    }
  ],
  markers: {
    size: 0,
    style: "hollow", // full, hollow, inverted
  },
  xaxis: {
    categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan", "05 Jan", "06 Jan", "07 Jan", "08 Jan", "09 Jan", "10 Jan", "11 Jan", "12 Jan"],
  },
  tooltip: {
    y: [{
      title: {
        formatter: function(val) {
          return val + " (mins)"
        }
      }
    }, {
      title: {
        formatter: function(val) {
          return val + " per session"
        }
      }
    }, {
      title: {
        formatter: function(val) {
          return val;
        }
      }
    }]
  },
  grid: {
    borderColor: "#f1f1f1",
  }
}
var chart = new ApexCharts(
  document.querySelector("#apexcharts-line"),
  options
);
chart.render();