tabler-apexcharts.svelte

<script lang="ts">
  import ApexCharts from "apexcharts";

  let chartCpu: HTMLDivElement | null;

  $: if (chartCpu) {
    new ApexCharts(chartCpu, {
      // styling
      chart: {
        type: "area",
        fontFamily: "inherit",
        height: 40.0,
        sparkline: { enabled: true },
        animations: { enabled: false },
      },
      dataLabels: { enabled: false },
      fill: { opacity: 0.16, type: "solid" },
      stroke: { width: 2, lineCap: "round", curve: "smooth" },
      tooltip: { theme: "dark" },
      grid: { strokeDashArray: 4 },
      xaxis: {
        labels: { padding: 0 },
        tooltip: { enabled: false },
        axisBorder: { show: false },
        type: "datetime",
      },
      yaxis: { labels: { padding: 4 } },
      legend: { show: false },
      colors: ["#206bc4"],

      // data
      series: [
        {
          name: "Usage",
          data: [
            37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43,
            19, 46, 39, 62, 51, 35, 41, 67,
          ],
        },
      ],
      labels: [
        "2020-06-21", "2020-06-22", "2020-06-23", "2020-06-24", "2020-06-25", "2020-06-26", "2020-06-27",
        "2020-06-28", "2020-06-29", "2020-06-30", "2020-07-01", "2020-07-02", "2020-07-03", "2020-07-04",
        "2020-07-05", "2020-07-06", "2020-07-07", "2020-07-08", "2020-07-09", "2020-07-10", "2020-07-11",
        "2020-07-12", "2020-07-13", "2020-07-14", "2020-07-15",  "2020-07-16",  "2020-07-17",  "2020-07-18",
        "2020-07-19", "2020-07-20",
      ],
    }).render();
  }
</script>

<div class="row row-deck row-cards">
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="subheader">CPU</div>
        </div>
        <div class="d-flex align-items-baseline">
          <div class="h1 mb-0 me-2">56%</div>
        </div>
      </div>
      <div bind:this={chartCpu} class="chart-sm" />
    </div>
  </div>
</div>