Charts

Charts provide visual data representations, making complex information easy to understand and analyze at a glance.

Multiple Bar Chart

<!DOCTYPE html>
<html lang="en" dir="" class="relative min-h-full h-full">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Preline UI</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/main.min.css">
    
    <link rel="stylesheet" href="../assets/vendor/apexcharts/dist/apexcharts.css">
    <style type="text/css">
      .apexcharts-tooltip.apexcharts-theme-light {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }
    </style>
  </head>
  <body>
  <div class="w-full max-w-3xl mx-auto">
    <div class="mt-4">
<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
  
  <div class="flex justify-between items-center">
    <div>
      <h2 class="text-sm text-gray-500 dark:text-neutral-500">
        Income
      </h2>
      <p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-neutral-200">
        $126,238.49
      </p>
    </div>

<div id="hs-multiple-bar-charts"></div>
</div>
</div></div>
    <script src="../assets/vendor/preline/dist/index.js?v=2.5.0"></script>
    
    <script src="../assets/vendor/lodash/lodash.min.js"></script>
    <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
    <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
    
    <script>
      window.addEventListener("load", () => {
        (function () {
          buildChart(
            "#hs-multiple-bar-charts",
            (mode) => ({
              chart: {
                type: "bar",
                height: 300,
                toolbar: {
                  show: false,
                },
                zoom: {
                  enabled: false,
                },
              },
              series: [
                {
                  name: "Chosen Period",
                  data: [
                    23000, 44000, 55000, 57000, 56000, 61000, 58000, 63000, 60000,
                    66000, 34000, 78000,
                  ],
                },
                {
                  name: "Last Period",
                  data: [
                    17000, 76000, 85000, 101000, 98000, 87000, 105000, 91000, 114000,
                    94000, 67000, 66000,
                  ],
                },
              ],
              plotOptions: {
                bar: {
                  horizontal: false,
                  columnWidth: "16px",
                  borderRadius: 0,
                },
              },
              legend: {
                show: false,
              },
              dataLabels: {
                enabled: false,
              },
              stroke: {
                show: true,
                width: 8,
                colors: ["transparent"],
              },
              xaxis: {
                categories: [
                  "January",
                  "February",
                  "March",
                  "April",
                  "May",
                  "June",
                  "July",
                  "August",
                  "September",
                  "October",
                  "November",
                  "December",
                ],
                axisBorder: {
                  show: false,
                },
                axisTicks: {
                  show: false,
                },
                crosshairs: {
                  show: false,
                },
                labels: {
                  style: {
                    colors: "#9ca3af",
                    fontSize: "13px",
                    fontFamily: "Inter, ui-sans-serif",
                    fontWeight: 400,
                  },
                  offsetX: -2,
                  formatter: (title) => title.slice(0, 3),
                },
              },
              yaxis: {
                labels: {
                  align: "left",
                  minWidth: 0,
                  maxWidth: 140,
                  style: {
                    colors: "#9ca3af",
                    fontSize: "13px",
                    fontFamily: "Inter, ui-sans-serif",
                    fontWeight: 400,
                  },
                  formatter: (value) => (value >= 1000 ? `${value / 1000}k` : value),
                },
              },
              states: {
                hover: {
                  filter: {
                    type: "darken",
                    value: 0.9,
                  },
                },
              },
              tooltip: {
                y: {
                  formatter: (value) =>
                    `$${value >= 1000 ? `${value / 1000}k` : value}`,
                },
                custom: function (props) {
                  const { categories } = props.ctx.opts.xaxis;
                  const { dataPointIndex } = props;
                  const title = categories[dataPointIndex];
                  const newTitle = `${title}`;

return buildTooltip(props, {
                    title: newTitle,
                    mode,
                    hasTextLabel: true,
                    wrapperExtClasses: "min-w-28",
                    labelDivider: ":",
                    labelExtClasses: "ms-2",
                  });
                },
              },
              responsive: [
                {
                  breakpoint: 568,
                  options: {
                    chart: {
                      height: 300,
                    },
                    plotOptions: {
                      bar: {
                        columnWidth: "14px",
                      },
                    },
                    stroke: {
                      width: 8,
                    },
                    labels: {
                      style: {
                        colors: "#9ca3af",
                        fontSize: "11px",
                        fontFamily: "Inter, ui-sans-serif",
                        fontWeight: 400,
                      },
                      offsetX: -2,
                      formatter: (title) => title.slice(0, 3),
                    },
                    yaxis: {
                      labels: {
                        align: "left",
                        minWidth: 0,
                        maxWidth: 140,
                        style: {
                          colors: "#9ca3af",
                          fontSize: "11px",
                          fontFamily: "Inter, ui-sans-serif",
                          fontWeight: 400,
                        },
                        formatter: (value) =>
                          value >= 1000 ? `${value / 1000}k` : value,
                      },
                    },
                  },
                },
              ],
            }),
            {
              colors: ["#2563eb", "#d1d5db"],
              grid: {
                borderColor: "#e5e7eb",
              },
            },
            {
              colors: ["#6b7280", "#2563eb"],
              grid: {
                borderColor: "#404040",
              },
            }
          );
        })();
      });
    </script>
  </body>
</html>

<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
  
  <div class="flex justify-between items-center">
    <div>
      <h2 class="text-sm text-gray-500 dark:text-neutral-500">
        Income
      </h2>
      <p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-neutral-200">
        $126,238.49
      </p>
    </div>

return buildTooltip(props, {
                          title: newTitle,
                          mode,
                          hasTextLabel: true,
                          wrapperExtClasses: "min-w-28",
                          labelDivider: ":",
                          labelExtClasses: "ms-2",
                        });
                      },
                    },
                    responsive: [
                      {
                        breakpoint: 568,
                        options: {
                          chart: {
                            height: 300,
                          },
                          plotOptions: {
                            bar: {
                              columnWidth: "14px",
                            },
                          },
                          stroke: {
                            width: 8,
                          },
                          labels: {
                            style: {
                              colors: "#9ca3af",
                              fontSize: "11px",
                              fontFamily: "Inter, ui-sans-serif",
                              fontWeight: 400,
                            },
                            offsetX: -2,
                            formatter: (title) => title.slice(0, 3),
                          },
                          yaxis: {
                            labels: {
                              align: "left",
                              minWidth: 0,
                              maxWidth: 140,
                              style: {
                                colors: "#9ca3af",
                                fontSize: "11px",
                                fontFamily: "Inter, ui-sans-serif",
                                fontWeight: 400,
                              },
                              formatter: (value) =>
                                value >= 1000 ? `${value / 1000}k` : value,
                            },
                          },
                        },
                      },
                    ],
                  }),
                  {
                    colors: ["#2563eb", "#d1d5db"],
                    grid: {
                      borderColor: "#e5e7eb",
                    },
                  },
                  {
                    colors: ["#6b7280", "#2563eb"],
                    grid: {
                      borderColor: "#404040",
                    },
                  }
                );
              })();
            });
          </script>

Single Area Chart

<!DOCTYPE html>
<html lang="en" dir="" class="relative min-h-full h-full">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Preline UI</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/main.min.css">
    
    <link rel="stylesheet" href="../assets/vendor/apexcharts/dist/apexcharts.css">
    <style type="text/css">
      .apexcharts-tooltip.apexcharts-theme-light {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }
    </style>
  </head>
  <body>
  <div class="w-full max-w-3xl mx-auto">
    <div class="mt-4">
<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
  
  <div class="flex justify-between items-center">
    <div>
      <h2 class="text-sm text-gray-500 dark:text-neutral-500">
        Visitors
      </h2>
      <p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-neutral-200">
        80.3k
      </p>
    </div>

<div id="hs-single-area-chart"></div>
</div>
</div></div>
    <script src="../assets/vendor/preline/dist/index.js?v=2.5.0"></script>
    
    <script src="../assets/vendor/lodash/lodash.min.js"></script>
    <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
    <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
    
    <script>
      window.addEventListener("load", () => {
        (function () {
          buildChart(
            "#hs-single-area-chart",
            (mode) => ({
              chart: {
                height: 300,
                type: "area",
                toolbar: {
                  show: false,
                },
                zoom: {
                  enabled: false,
                },
              },
              series: [
                {
                  name: "Visitors",
                  data: [180, 51, 60, 38, 88, 50, 40, 52, 88, 80, 60, 70],
                },
              ],
              legend: {
                show: false,
              },
              dataLabels: {
                enabled: false,
              },
              stroke: {
                curve: "straight",
                width: 2,
              },
              grid: {
                strokeDashArray: 2,
              },
              fill: {
                type: "gradient",
                gradient: {
                  type: "vertical",
                  shadeIntensity: 1,
                  opacityFrom: 0.1,
                  opacityTo: 0.8,
                },
              },
              xaxis: {
                type: "category",
                tickPlacement: "on",
                categories: [
                  "25 January 2023",
                  "26 January 2023",
                  "27 January 2023",
                  "28 January 2023",
                  "29 January 2023",
                  "30 January 2023",
                  "31 January 2023",
                  "1 February 2023",
                  "2 February 2023",
                  "3 February 2023",
                  "4 February 2023",
                  "5 February 2023",
                ],
                axisBorder: {
                  show: false,
                },
                axisTicks: {
                  show: false,
                },
                crosshairs: {
                  stroke: {
                    dashArray: 0,
                  },
                  dropShadow: {
                    show: false,
                  },
                },
                tooltip: {
                  enabled: false,
                },
                labels: {
                  style: {
                    colors: "#9ca3af",
                    fontSize: "13px",
                    fontFamily: "Inter, ui-sans-serif",
                    fontWeight: 400,
                  },
                  formatter: (title) => {
                    let t = title;

if (t) {
                      const newT = t.split(" ");
                      t = `${newT[0]} ${newT[1].slice(0, 3)}`;
                    }

return t;
                  },
                },
              },
              yaxis: {
                labels: {
                  align: "left",
                  minWidth: 0,
                  maxWidth: 140,
                  style: {
                    colors: "#9ca3af",
                    fontSize: "13px",
                    fontFamily: "Inter, ui-sans-serif",
                    fontWeight: 400,
                  },
                  formatter: (value) => (value >= 1000 ? `${value / 1000}k` : value),
                },
              },
              tooltip: {
                x: {
                  format: "MMMM yyyy",
                },
                y: {
                  formatter: (value) =>
                    `${value >= 1000 ? `${value / 1000}k` : value}`,
                },
                custom: function (props) {
                  const { categories } = props.ctx.opts.xaxis;
                  const { dataPointIndex } = props;
                  const title = categories[dataPointIndex].split(" ");
                  const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                    title: newTitle,
                    mode,
                    valuePrefix: "",
                    hasTextLabel: true,
                    markerExtClasses: "!rounded-sm",
                    wrapperExtClasses: "min-w-28",
                  });
                },
              },
              responsive: [
                {
                  breakpoint: 568,
                  options: {
                    chart: {
                      height: 300,
                    },
                    labels: {
                      style: {
                        colors: "#9ca3af",
                        fontSize: "11px",
                        fontFamily: "Inter, ui-sans-serif",
                        fontWeight: 400,
                      },
                      offsetX: -2,
                      formatter: (title) => title.slice(0, 3),
                    },
                    yaxis: {
                      labels: {
                        align: "left",
                        minWidth: 0,
                        maxWidth: 140,
                        style: {
                          colors: "#9ca3af",
                          fontSize: "11px",
                          fontFamily: "Inter, ui-sans-serif",
                          fontWeight: 400,
                        },
                        formatter: (value) =>
                          value >= 1000 ? `${value / 1000}k` : value,
                      },
                    },
                  },
                },
              ],
            }),
            {
              colors: ["#2563eb", "#9333ea"],
              fill: {
                gradient: {
                  stops: [0, 90, 100],
                },
              },
              grid: {
                borderColor: "#e5e7eb",
              },
            },
            {
              colors: ["#3b82f6", "#a855f7"],
              fill: {
                gradient: {
                  stops: [100, 90, 0],
                },
              },
              grid: {
                borderColor: "#404040",
              },
            }
          );
        })();
      });
    </script>
  </body>
</html>

<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
  
  <div class="flex justify-between items-center">
    <div>
      <h2 class="text-sm text-gray-500 dark:text-neutral-500">
        Visitors
      </h2>
      <p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-neutral-200">
        80.3k
      </p>
    </div>

if (t) {
                            const newT = t.split(" ");
                            t = `${newT[0]} ${newT[1].slice(0, 3)}`;
                          }

return t;
                        },
                      },
                    },
                    yaxis: {
                      labels: {
                        align: "left",
                        minWidth: 0,
                        maxWidth: 140,
                        style: {
                          colors: "#9ca3af",
                          fontSize: "13px",
                          fontFamily: "Inter, ui-sans-serif",
                          fontWeight: 400,
                        },
                        formatter: (value) => (value >= 1000 ? `${value / 1000}k` : value),
                      },
                    },
                    tooltip: {
                      x: {
                        format: "MMMM yyyy",
                      },
                      y: {
                        formatter: (value) =>
                          `${value >= 1000 ? `${value / 1000}k` : value}`,
                      },
                      custom: function (props) {
                        const { categories } = props.ctx.opts.xaxis;
                        const { dataPointIndex } = props;
                        const title = categories[dataPointIndex].split(" ");
                        const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
                          title: newTitle,
                          mode,
                          valuePrefix: "",
                          hasTextLabel: true,
                          markerExtClasses: "!rounded-sm",
                          wrapperExtClasses: "min-w-28",
                        });
                      },
                    },
                    responsive: [
                      {
                        breakpoint: 568,
                        options: {
                          chart: {
                            height: 300,
                          },
                          labels: {
                            style: {
                              colors: "#9ca3af",
                              fontSize: "11px",
                              fontFamily: "Inter, ui-sans-serif",
                              fontWeight: 400,
                            },
                            offsetX: -2,
                            formatter: (title) => title.slice(0, 3),
                          },
                          yaxis: {
                            labels: {
                              align: "left",
                              minWidth: 0,
                              maxWidth: 140,
                              style: {
                                colors: "#9ca3af",
                                fontSize: "11px",
                                fontFamily: "Inter, ui-sans-serif",
                                fontWeight: 400,
                              },
                              formatter: (value) =>
                                value >= 1000 ? `${value / 1000}k` : value,
                            },
                          },
                        },
                      },
                    ],
                  }),
                  {
                    colors: ["#2563eb", "#9333ea"],
                    fill: {
                      gradient: {
                        stops: [0, 90, 100],
                      },
                    },
                    grid: {
                      borderColor: "#e5e7eb",
                    },
                  },
                  {
                    colors: ["#3b82f6", "#a855f7"],
                    fill: {
                      gradient: {
                        stops: [100, 90, 0],
                      },
                    },
                    grid: {
                      borderColor: "#404040",
                    },
                  }
                );
              })();
            });
          </script>

Charts

Multiple Bar Chart

Single Area Chart

Download Preline UI

Subscribe

All examples