Tailwind CSS Charts

Charts are graphical representations used to showcase and simplify complex data sets, making information more comprehensible and visually appealing. They vary in types-from line to bar to pie-each highlighting specific data patterns and trends.

Requires Additional Installation

Note that this component requires the use of the third-party Apexcharts plugin. Preline uses ApexCharts v4.7, which was released before the June 2025 licensing change. Please review ApexCharts licensing terms if you plan to use newer versions.

Learn more

Installation

Install Apexcharts

Install apexcharts via npm

Terminal

                          
                            npm i apexcharts

Add the Apexcharts CSS

Include the CSS <script> near the end of your </head> tag:
<link rel="stylesheet" href="./assets/vendor/apexcharts/dist/apexcharts.css">
HTML
```
                          
                        
```
Add the Apexcharts JavaScript

Include the JavaScript <script> near the end of your </body> tag:
<script src="./assets/vendor/lodash/lodash.min.js"></script> <script src="./assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
HTML
```
                          
                        
```
Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash
Add the Preline Helper JavaScript

Include the JavaScript <script> after the helper-apexcharts.js file. If you also need to use the varToColor function, include the helper-shared.js file as well.
 <script src="./assets/vendor/preline/dist/helper-apexcharts.js"></script>
HTML
```
                          
                        
```

Single-series area chart

Use an area chart to show one data series with a filled region beneath the line.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" 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>
                            .apexcharts-tooltip.apexcharts-theme-light {
                              background-color: transparent !important;
                              border: none !important;
                              box-shadow: none !important;
                            }

.apexcharts-xaxistooltip {    
                              background: var(--color-primary-600) !important; 
                              border-color: var(--color-primary-600) !important; 
                            }

.apexcharts-xaxistooltip:after,
                            .apexcharts-xaxistooltip:before {
                              border-bottom-color: var(--color-primary-600) !important;
                            }
                          </style>

</head>
                          <body class="mt-3"><div id="hs-single-area-chart"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

html.classList.toggle("dark", resolvedAppearance === "dark");
                              html.setAttribute("data-theme", `theme-${colorTheme}`);
                              if (brand) html.setAttribute("data-brand", brand);
                              if (font) html.setAttribute("data-font", font);
                            })();
                          </script>

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              // Apex Single Area Chart
                              (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: varToColor('--chart-colors-xaxis-labels'),
                                        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: varToColor('--chart-colors-yaxis-labels'),
                                        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,
                                        wrapperExtClasses: 'min-w-28'
                                      });
                                    }
                                  },
                                  responsive: [{
                                    breakpoint: 568,
                                    options: {
                                      chart: {
                                        height: 300
                                      },
                                      labels: {
                                        style: {
                                          colors: varToColor('--chart-colors-labels'),
                                          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: varToColor('--chart-colors-yaxis-labels'),
                                            fontSize: '11px',
                                            fontFamily: 'Inter, ui-sans-serif',
                                            fontWeight: 400
                                          },
                                          formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                        }
                                      },
                                    },
                                  }]
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels')
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border')
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex-inverse')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse')
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

Multi-series area chart

Plot multiple area series on the same axes to compare trends over the same period.

</head>
                          <body class="mt-3">
                        <div class="flex justify-center sm:justify-end items-center gap-x-4 mb-3 sm:mb-6">
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Income
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-5 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Outcome
                            </span>
                          </div>
                        </div>

<div id="hs-multiple-area-charts"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              // Apex Multiple Area Charts
                              (function () {
                                buildChart('#hs-multiple-area-charts', (mode) => ({
                                  chart: {
                                    height: 300,
                                    type: 'area',
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: 'Income',
                                      data: [18000, 51000, 60000, 38000, 88000, 50000, 40000, 52000, 88000, 80000, 60000, 70000]
                                    },
                                    {
                                      name: 'Outcome',
                                      data: [27000, 38000, 60000, 77000, 40000, 50000, 49000, 29000, 42000, 27000, 42000, 50000]
                                    }
                                  ],
                                  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: varToColor('--chart-colors-xaxis-labels'),
                                        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: varToColor('--chart-colors-yaxis-labels'),
                                        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,
                                        hasTextLabel: true,
                                        wrapperExtClasses: 'min-w-28',
                                        labelDivider: ':',
                                        labelExtClasses: 'ms-2'
                                      });
                                    }
                                  },
                                  responsive: [{
                                    breakpoint: 568,
                                    options: {
                                      chart: {
                                        height: 300
                                      },
                                      labels: {
                                        style: {
                                          colors: varToColor('--chart-colors-labels'),
                                          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: varToColor('--chart-colors-yaxis-labels'),
                                            fontSize: '11px',
                                            fontFamily: 'Inter, ui-sans-serif',
                                            fontWeight: 400
                                          },
                                          formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                        }
                                      },
                                    },
                                  }]
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels')
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border')
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse')
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

Synchronize hover tooltips across two related area charts for side-by-side comparison.

<div id="hs-multiple-area-charts-compare-two-tooltip"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              (function () {
                                buildChart('#hs-multiple-area-charts-compare-two-tooltip', (mode) => ({
                                  chart: {
                                    height: 300,
                                    type: 'area',
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: '2023',
                                      data: [18000, 51000, 60000, 38000, 88000, 50000, 40000, 52000, 88000, 80000, 60000, 70000]
                                    },
                                    {
                                      name: '2022',
                                      data: [27000, 38000, 60000, 77000, 40000, 50000, 49000, 29000, 42000, 27000, 42000, 50000]
                                    }
                                  ],
                                  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: [
                                      '15 January',
                                      '15 February',
                                      '15 March',
                                      '15 April',
                                      '15 May',
                                      '15 June',
                                      '15 July',
                                      '15 August',
                                      '15 September',
                                      '15 October',
                                      '15 November',
                                      '15 December'
                                    ],
                                    axisBorder: {
                                      show: false
                                    },
                                    axisTicks: {
                                      show: false
                                    },
                                    crosshairs: {
                                      stroke: {
                                        dashArray: 0
                                      },
                                      dropShadow: {
                                        show: false
                                      }
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                    labels: {
                                      style: {
                                        fontSize: '13px',
                                        fontFamily: 'Inter, ui-sans-serif',
                                        fontWeight: 400
                                      },
                                      formatter: (title) => {
                                        let t = title;
              
                                        if (t) {
                                          const newT = t.split(' ');
                                          t = `${newT[1].slice(0, 3)}`;
                                        }
              
                                        return t;
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      align: 'left',
                                      minWidth: 0,
                                      maxWidth: 140,
                                      style: {
                                        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) {
                                      return buildTooltipCompareTwo(props, {
                                        title: 'Revenue',
                                        mode,
                                        hasTextLabel: true,
                                        wrapperExtClasses: 'min-w-48'
                                      });
                                    }
                                  },
                                  responsive: [{
                                    breakpoint: 568,
                                    options: {
                                      chart: {
                                        height: 300
                                      },
                                      labels: {
                                        style: {
                                          colors: varToColor('--chart-colors-labels'),
                                          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: varToColor('--chart-colors-yaxis-labels'),
                                            fontSize: '11px',
                                            fontFamily: 'Inter, ui-sans-serif',
                                            fontWeight: 400
                                          },
                                          formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                        }
                                      },
                                    },
                                  }]
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels')
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border')
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse')
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

<div class="flex justify-center sm:justify-end items-center gap-x-4 mb-3 sm:mb-6">
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Income
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-5 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Outcome
                            </span>
                          </div>
                        </div>

Use an alternative synced-tooltip layout when comparing two area charts with shared hover states.

<div id="hs-multiple-area-charts-compare-two-tooltip-alternative"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              (function () {
                                buildChart('#hs-multiple-area-charts-compare-two-tooltip-alternative', (mode) => ({
                                  chart: {
                                    height: 300,
                                    type: 'area',
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: '2023',
                                      data: [18000, 51000, 60000, 38000, 88000, 50000, 40000, 52000, 88000, 80000, 60000, 70000]
                                    },
                                    {
                                      name: '2022',
                                      data: [27000, 38000, 60000, 77000, 40000, 50000, 49000, 29000, 42000, 27000, 42000, 50000]
                                    }
                                  ],
                                  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: [
                                      '15 January',
                                      '15 February',
                                      '15 March',
                                      '15 April',
                                      '15 May',
                                      '15 June',
                                      '15 July',
                                      '15 August',
                                      '15 September',
                                      '15 October',
                                      '15 November',
                                      '15 December'
                                    ],
                                    axisBorder: {
                                      show: false
                                    },
                                    axisTicks: {
                                      show: false
                                    },
                                    crosshairs: {
                                      stroke: {
                                        dashArray: 0
                                      },
                                      dropShadow: {
                                        show: false
                                      }
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels'),
                                        fontSize: '13px',
                                        fontFamily: 'Inter, ui-sans-serif',
                                        fontWeight: 400
                                      },
                                      formatter: (title) => {
                                        let t = title;
              
                                        if (t) {
                                          const newT = t.split(' ');
                                          t = `${newT[1].slice(0, 3)}`;
                                        }
              
                                        return t;
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      align: 'left',
                                      minWidth: 0,
                                      maxWidth: 140,
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                        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) {
                                      return buildTooltipCompareTwoAlt(props, {
                                        title: 'Spend per customer',
                                        mode,
                                        valuePrefix: 'US$',
                                        hasTextLabel: true,
                                        wrapperExtClasses: 'min-w-48'
                                      });
                                    }
                                  },
                                  responsive: [{
                                    breakpoint: 568,
                                    options: {
                                      chart: {
                                        height: 300
                                      },
                                      labels: {
                                        style: {
                                          colors: varToColor('--chart-colors-labels'),
                                          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: varToColor('--chart-colors-yaxis-labels'),
                                            fontSize: '11px',
                                            fontFamily: 'Inter, ui-sans-serif',
                                            fontWeight: 400
                                          },
                                          formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                        }
                                      },
                                    },
                                  }]
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels')
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border')
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse')
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

Smoothed area chart

Use curve: 'smooth' to render softer area-chart lines and transitions.

<div id="hs-curved-area-charts"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              // Apex Line Chart
                              (function () {
                                buildChart('#hs-curved-area-charts', (mode) => ({
                                  chart: {
                                    height: 300,
                                    type: 'area',
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: 'Income',
                                      data: [18000, 51000, 60000, 38000, 88000, 50000, 40000, 52000, 88000, 80000, 60000, 70000]
                                    },
                                    {
                                      name: 'Outcome',
                                      data: [27000, 38000, 60000, 77000, 40000, 50000, 49000, 29000, 42000, 27000, 42000, 50000]
                                    }
                                  ],
                                  legend: {
                                    show: false
                                  },
                                  dataLabels: {
                                    enabled: false
                                  },
                                  stroke: {
                                    curve: 'smooth',
                                    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: varToColor('--chart-colors-xaxis-labels'),
                                        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: varToColor('--chart-colors-yaxis-labels'),
                                        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,
                                        hasTextLabel: true,
                                        wrapperExtClasses: 'min-w-28',
                                        labelDivider: ':',
                                        labelExtClasses: 'ms-2'
                                      });
                                    }
                                  },
                                  responsive: [{
                                    breakpoint: 568,
                                    options: {
                                      chart: {
                                        height: 300
                                      },
                                      labels: {
                                        style: {
                                          colors: varToColor('--chart-colors-labels'),
                                          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: varToColor('--chart-colors-yaxis-labels'),
                                            fontSize: '11px',
                                            fontFamily: 'Inter, ui-sans-serif',
                                            fontWeight: 400
                                          },
                                          formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                        }
                                      },
                                    },
                                  }]
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels')
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border')
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
                                  fill: {
                                    gradient: {
                                      shadeIntensity: .1,
                                      opacityFrom: .5,
                                      opacityTo: 0,
                                      stops: [50, 100, 100, 100]
                                    }
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse')
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse')
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

Single-series bar chart

Use a bar chart to display one series across a set of categories.

</head>
                          <body class="mt-3"><div id="hs-single-bar-chart"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              // Apex Single Bar Charts
                              (function () {
                                buildChart('#hs-single-bar-chart', (mode) => ({
                                  chart: {
                                    type: 'bar',
                                    height: 300,
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: 'Sales',
                                      data: [23000, 44000, 55000, 57000, 56000, 61000, 58000, 63000, 60000, 66000, 34000, 78000]
                                    }
                                  ],
                                  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: varToColor('--chart-colors-xaxis-labels'),
                                        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: varToColor('--chart-colors-yaxis-labels'),
                                        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: varToColor('--chart-colors-labels'),
                                          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: varToColor('--chart-colors-yaxis-labels'),
                                            fontSize: '11px',
                                            fontFamily: 'Inter, ui-sans-serif',
                                            fontWeight: 400
                                          },
                                          formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                        }
                                      },
                                    },
                                  }]
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-10')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border'),
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-primary')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse'),
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

Multi-series bar chart

Compare multiple bar series within the same category groups.

</head>
                          <body class="mt-3">
                        <div class="flex justify-center sm:justify-end items-center gap-x-4 mb-3 sm:mb-6">
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Income
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Outcome
                            </span>
                          </div>
                        </div>

<div id="hs-multiple-bar-charts"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              // Apex Multiple Bar Charts
                              (function () {
                                buildChart('#hs-multiple-bar-charts', (mode) => ({
                                  chart: {
                                    type: 'bar',
                                    height: 300,
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: 'Income',
                                      data: [23000, 44000, 55000, 57000, 56000, 61000, 58000, 63000, 60000, 66000, 34000, 78000]
                                    }, {
                                      name: 'Outcome',
                                      data: [17000, 76000, 85000, 101000, 98000, 87000, 105000, 91000, 114000, 94000, 67000, 66000]
                                    }
                                  ],
                                  plotOptions: {
                                    bar: {
                                      horizontal: false,
                                      columnWidth: '14px',
                                      borderRadius: 0
                                    }
                                  },
                                  legend: {
                                    show: false
                                  },
                                  dataLabels: {
                                    enabled: false
                                  },
                                  stroke: {
                                    show: true,
                                    width: 2,
                                    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: varToColor('--chart-colors-xaxis-labels'),
                                        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: varToColor('--chart-colors-yaxis-labels'),
                                        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: varToColor('--chart-colors-labels'),
                                          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: varToColor('--chart-colors-yaxis-labels'),
                                            fontSize: '11px',
                                            fontFamily: 'Inter, ui-sans-serif',
                                            fontWeight: 400
                                          },
                                          formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                        }
                                      },
                                    },
                                  }]
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-10')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border'),
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-10-inverse')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse'),
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

Single-series line chart

Use a line chart to show how a single series changes over time.

</head>
                          <body class="mt-3"><div id="hs-single-line-chart"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

Multi-series line chart

Compare several line series on the same chart to spot differences in trend.

</head>
                          <body class="mt-3">
                        <div class="flex justify-center sm:justify-end items-center gap-x-4 mb-3 sm:mb-6">
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Income
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-6 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Outcome
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Others
                            </span>
                          </div>
                        </div>

<div id="hs-multiple-line-charts"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              // Apex Multiple Line Charts
                              (function () {
                                buildChart('#hs-multiple-line-charts', (mode) => ({
                                  chart: {
                                    height: 250,
                                    type: 'line',
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: 'Income',
                                      data: [0, 27000, 25000, 27000, 40000]
                                    },
                                    {
                                      name: 'Outcome',
                                      data: [19500, 10000, 19000, 17500, 26000]
                                    },
                                    {
                                      name: 'Others',
                                      data: [8000, 2200, 6000, 9000, 10000]
                                    }
                                  ],
                                  dataLabels: {
                                    enabled: false
                                  },
                                  stroke: {
                                    curve: 'straight',
                                    width: [4, 4, 4],
                                    dashArray: [0, 0, 4]
                                  },
                                  title: {
                                    show: false
                                  },
                                  legend: {
                                    show: false
                                  },
                                  grid: {
                                    strokeDashArray: 0,
                                    borderColor: varToColor('--chart-colors-grid-border'),
                                    padding: {
                                      top: -20,
                                      right: 0
                                    }
                                  },
                                  xaxis: {
                                    type: 'category',
                                    categories: [
                                      '25 January 2023',
                                      '28 January 2023',
                                      '31 January 2023',
                                      '1 February 2023',
                                      '3 February 2023'
                                    ],
                                    axisBorder: {
                                      show: false
                                    },
                                    axisTicks: {
                                      show: false
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                    labels: {
                                      offsetY: 5,
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels'),
                                        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: {
                                    min: 0,
                                    max: 40000,
                                    tickAmount: 4,
                                    labels: {
                                      align: 'left',
                                      minWidth: 0,
                                      maxWidth: 140,
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                        fontSize: '12px',
                                        fontFamily: 'Inter, ui-sans-serif',
                                        fontWeight: 400
                                      },
                                      formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                    }
                                  },
                                  tooltip: {
                                    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,
                                        hasTextLabel: true,
                                        wrapperExtClasses: 'min-w-36',
                                        labelDivider: ':',
                                        labelExtClasses: 'ms-2'
                                      });
                                    }
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-10')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border'),
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-10-inverse')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse'),
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

<div class="flex justify-center sm:justify-end items-center gap-x-4 mb-3 sm:mb-6">
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Income
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-6 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Outcome
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Others
                            </span>
                          </div>
                        </div>

Smoothed line chart

Use curve: 'smooth' to render line-chart paths with softer transitions.

</head>
                          <body class="mt-3">
                        <div class="flex justify-center sm:justify-end items-center gap-x-4 mb-3 sm:mb-6">
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Income
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-6 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Outcome
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Others
                            </span>
                          </div>
                        </div>

<div id="hs-curved-line-charts"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

if (!data.type) return false;
                              if (data.type === "hs:color-theme-change") {
                                window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                                  detail: {
                                    target: document.documentElement,
                                    value: data.value
                                  }
                                }));
                              }
                            });
                          </script>
                          <script>
                            window.addEventListener('load', () => {
                              // Apex Curved Line Charts
                              (function () {
                                buildChart('#hs-curved-line-charts', (mode) => ({
                                  chart: {
                                    height: 250,
                                    type: 'line',
                                    toolbar: {
                                      show: false
                                    },
                                    zoom: {
                                      enabled: false
                                    }
                                  },
                                  series: [
                                    {
                                      name: 'Income',
                                      data: [0, 27000, 25000, 27000, 40000]
                                    },
                                    {
                                      name: 'Outcome',
                                      data: [19500, 10000, 19000, 17500, 26000]
                                    },
                                    {
                                      name: 'Others',
                                      data: [8000, 2200, 6000, 9000, 10000]
                                    }
                                  ],
                                  dataLabels: {
                                    enabled: false
                                  },
                                  stroke: {
                                    curve: 'smooth',
                                    width: [4, 4, 4],
                                    dashArray: [0, 0, 4]
                                  },
                                  title: {
                                    show: false
                                  },
                                  legend: {
                                    show: false
                                  },
                                  grid: {
                                    strokeDashArray: 0,
                                    borderColor: varToColor('--chart-colors-grid-border'),
                                    padding: {
                                      top: -20,
                                      right: 0
                                    }
                                  },
                                  xaxis: {
                                    type: 'category',
                                    categories: [
                                      '25 January 2023',
                                      '28 January 2023',
                                      '31 January 2023',
                                      '1 February 2023',
                                      '3 February 2023'
                                    ],
                                    axisBorder: {
                                      show: false
                                    },
                                    axisTicks: {
                                      show: false
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                    labels: {
                                      offsetY: 5,
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels'),
                                        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: {
                                    min: 0,
                                    max: 40000,
                                    tickAmount: 4,
                                    labels: {
                                      align: 'left',
                                      minWidth: 0,
                                      maxWidth: 140,
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                        fontSize: '12px',
                                        fontFamily: 'Inter, ui-sans-serif',
                                        fontWeight: 400
                                      },
                                      formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                    }
                                  },
                                  tooltip: {
                                    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,
                                        hasTextLabel: true,
                                        wrapperExtClasses: 'min-w-36',
                                        labelDivider: ':',
                                        labelExtClasses: 'ms-2'
                                      });
                                    }
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-10')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border'),
                                  }
                                }), () => ({
                                  colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-10-inverse')],
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                                      }
                                    }
                                  },
                                  grid: {
                                    borderColor: varToColor('--chart-colors-grid-border-inverse'),
                                  }
                                }));
                              })();
                            });
                          </script>
                        </body>
                        </html>

<div class="flex justify-center sm:justify-end items-center gap-x-4 mb-3 sm:mb-6">
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Income
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-6 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Outcome
                            </span>
                          </div>
                          <div class="inline-flex items-center">
                            <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                            <span class="text-[13px] text-muted-foreground-2">
                              Others
                            </span>
                          </div>
                        </div>

Horizontal bar chart

Flip the bars horizontally when labels are long or when you want a ranking-style layout.

</head>
                          <body class="mt-3"><div id="hs-horizontal-bar-chart"></div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

Doughnut chart

Use a doughnut chart to show how segments contribute to a whole while leaving room for center content.

</head>
                          <body class="mt-3"><div class="flex flex-col justify-center items-center">
                          <div id="hs-doughnut-chart"></div>

<div class="flex justify-center sm:justify-end items-center gap-x-4 mt-3 sm:mt-6">
                            <div class="inline-flex items-center">
                              <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                              <span class="text-[13px] text-muted-foreground-2">
                                Income
                              </span>
                            </div>
                            <div class="inline-flex items-center">
                              <span class="size-2.5 inline-block bg-chart-6 rounded-xs me-2"></span>
                              <span class="text-[13px] text-muted-foreground-2">
                                Outcome
                              </span>
                            </div>
                            <div class="inline-flex items-center">
                              <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                              <span class="text-[13px] text-muted-foreground-2">
                                Others
                              </span>
                            </div>
                          </div>
                          
                        </div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

Bubble chart

Use a bubble chart to compare values across two axes and a third value through bubble size.

</head>
                          <body><div class="h-85 flex flex-col justify-center items-center">
                          <div id="hs-bubble-chart"></div>

<div class="flex justify-center sm:justify-end items-center gap-x-4">
                            <div class="inline-flex items-center">
                              <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                              <span class="text-[13px] text-muted-foreground-2">
                                Income
                              </span>
                            </div>
                            <div class="inline-flex items-center">
                              <span class="size-2.5 inline-block bg-chart-6 rounded-xs me-2"></span>
                              <span class="text-[13px] text-muted-foreground-2">
                                Outcome
                              </span>
                            </div>
                            <div class="inline-flex items-center">
                              <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                              <span class="text-[13px] text-muted-foreground-2">
                                Others
                              </span>
                            </div>
                          </div>
                          
                        </div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

Pie chart

Use a pie chart to show how each category contributes to the total.

</head>
                          <body class="mt-3"><div class="p-4">
                          <div class="h-75 flex flex-col justify-center items-center">
                            <div id="hs-pie-chart"></div>

<div class="flex justify-center sm:justify-end items-center gap-x-4 mt-3 sm:mt-6">
                              <div class="inline-flex items-center">
                                <span class="size-2.5 inline-block bg-chart-primary rounded-xs me-2"></span>
                                <span class="text-[13px] text-muted-foreground-2">
                                  Income
                                </span>
                              </div>
                              <div class="inline-flex items-center">
                                <span class="size-2.5 inline-block bg-chart-6 rounded-xs me-2"></span>
                                <span class="text-[13px] text-muted-foreground-2">
                                  Outcome
                                </span>
                              </div>
                              <div class="inline-flex items-center">
                                <span class="size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
                                <span class="text-[13px] text-muted-foreground-2">
                                  Others
                                </span>
                              </div>
                            </div>
                            
                          </div>
                        </div>
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

Compact sparklines

Use small sparkline charts when you need compact trend indicators inside cards, tables, or dashboards.

</head>
                          <body class="mt-3">
                        <ul class="flex flex-col">
                          <li class="py-3 px-4 text-sm font-semibold bg-muted border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <span>Chart</span>
                              <span>Types</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-area-chart"></div>
                              <span>Inline area chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-bar-chart"></div>
                              <span>Inline bar chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-pie-chart"></div>
                              <span>Inline pie chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-line-chart"></div>
                              <span>Inline line chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-candles-chart"></div>
                              <span>Inline candles chart</span>
                            </div>
                          </li>
                        </ul>
                        
                          <script src="https://preline.co/assets/js/hs-shared-helpers.js"></script>
                          <script src="https://preline.co/assets/js/hs-apexcharts-helpers.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            (function () {
                              const html = document.documentElement;
                              const appearance = localStorage.getItem("hs_theme") || "default";
                              const resolvedAppearance = appearance === "auto"
                                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
                                : appearance;
                              const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
                              const brand = localStorage.getItem("hs-clipboard-brand");
                              const font = localStorage.getItem("hs-clipboard-font");

return buildTooltip(props, {
                                          title: newTitle,
                                          mode,
                                          hasTextLabel: true,
                                          wrapperExtClasses: "min-w-28",
                                          titleExtClasses: "text-left",
                                          labelDivider: ":",
                                          labelExtClasses: "ms-2",
                                        });
                                      },
                                    },
                                  }),
                                  () => ({
                                    colors: [varToColor("--chart-colors-primary")],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [
                                            {
                                              from: -45,
                                              to: 0,
                                              color: varToColor("--chart-colors-bar-ranges"),
                                            },
                                          ],
                                        },
                                      },
                                    },
                                    xaxis: {
                                      labels: {
                                        style: {
                                          colors: varToColor("--chart-colors-xaxis-labels"),
                                        },
                                      },
                                    },
                                    yaxis: {
                                      labels: {
                                        style: {
                                          colors: varToColor("--chart-colors-yaxis-labels"),
                                        },
                                      },
                                    },
                                    grid: {
                                      borderColor: varToColor("--chart-colors-grid-border"),
                                    },
                                  }),
                                  () => ({
                                    colors: [varToColor("--chart-colors-primary-inverse")],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [
                                            {
                                              from: -45,
                                              to: 0,
                                              color: varToColor("--chart-colors-bar-ranges-inverse"),
                                            },
                                          ],
                                        },
                                      },
                                    },
                                    xaxis: {
                                      labels: {
                                        style: {
                                          colors: varToColor("--chart-colors-xaxis-labels-inverse"),
                                        },
                                      },
                                    },
                                    yaxis: {
                                      labels: {
                                        style: {
                                          colors: varToColor("--chart-colors-yaxis-labels-inverse"),
                                        },
                                      },
                                    },
                                    grid: {
                                      borderColor: varToColor("--chart-colors-grid-border-inverse"),
                                    },
                                  }),
                                );
                              })();

(function () {
                                buildChart(
                                  "#hs-sparklines-pie-chart",
                                  () => ({
                                    chart: {
                                      width: 30,
                                      height: 30,
                                      type: "pie",
                                      sparkline: {
                                        enabled: true,
                                      },
                                    },
                                    series: [70, 18, 12],
                                    labels: ["Direct", "Organic search", "Referral"],
                                    plotOptions: {
                                      pie: {
                                        expandOnClick: false,
                                      },
                                    },
                                    stroke: {
                                      width: 0,
                                    },
                                    tooltip: {
                                      enabled: false,
                                    },
                                    states: {
                                      hover: {
                                        filter: {
                                          type: "none",
                                        },
                                      },
                                    },
                                  }),
                                  () => ({
                                    colors: [
                                      varToColor("--chart-colors-primary"),
                                      varToColor("--chart-colors-chart-6"),
                                      varToColor("--chart-colors-chart-9"),
                                    ],
                                    stroke: {
                                      colors: varToColor("--chart-colors-background"),
                                    },
                                  }),
                                  () => ({
                                    colors: [
                                      varToColor("--chart-colors-primary-inverse"),
                                      varToColor("--chart-colors-chart-6-inverse"),
                                      varToColor("--chart-colors-chart-9-inverse"),
                                    ],
                                    stroke: {
                                      colors: varToColor("--chart-colors-background-inverse"),
                                    },
                                  }),
                                );
                              })();

</body>
                        </html>

<ul class="flex flex-col">
                          <li class="py-3 px-4 text-sm font-semibold bg-muted border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <span>Chart</span>
                              <span>Types</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-area-chart"></div>
                              <span>Inline area chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-bar-chart"></div>
                              <span>Inline bar chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-pie-chart"></div>
                              <span>Inline pie chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-line-chart"></div>
                              <span>Inline line chart</span>
                            </div>
                          </li>
                          <li class="py-3 px-4 text-sm border border-line-2 text-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                            <div class="grid grid-cols-2 items-center gap-x-2">
                              <div id="hs-sparklines-candles-chart"></div>
                              <span>Inline candles chart</span>
                            </div>
                          </li>
                        </ul>

return buildTooltip(props, {
                                        title: newTitle,
                                        mode,
                                        hasTextLabel: true,
                                        wrapperExtClasses: "min-w-28",
                                        titleExtClasses: "text-left",
                                        labelDivider: ":",
                                        labelExtClasses: "ms-2",
                                      });
                                    },
                                  },
                                }),
                                () => ({
                                  colors: [varToColor("--chart-colors-primary")],
                                  plotOptions: {
                                    bar: {
                                      colors: {
                                        ranges: [
                                          {
                                            from: -45,
                                            to: 0,
                                            color: varToColor("--chart-colors-bar-ranges"),
                                          },
                                        ],
                                      },
                                    },
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor("--chart-colors-xaxis-labels"),
                                      },
                                    },
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor("--chart-colors-yaxis-labels"),
                                      },
                                    },
                                  },
                                  grid: {
                                    borderColor: varToColor("--chart-colors-grid-border"),
                                  },
                                }),
                                () => ({
                                  colors: [varToColor("--chart-colors-primary-inverse")],
                                  plotOptions: {
                                    bar: {
                                      colors: {
                                        ranges: [
                                          {
                                            from: -45,
                                            to: 0,
                                            color: varToColor("--chart-colors-bar-ranges-inverse"),
                                          },
                                        ],
                                      },
                                    },
                                  },
                                  xaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor("--chart-colors-xaxis-labels-inverse"),
                                      },
                                    },
                                  },
                                  yaxis: {
                                    labels: {
                                      style: {
                                        colors: varToColor("--chart-colors-yaxis-labels-inverse"),
                                      },
                                    },
                                  },
                                  grid: {
                                    borderColor: varToColor("--chart-colors-grid-border-inverse"),
                                  },
                                }),
                              );
                            })();

(function () {
                              buildChart(
                                "#hs-sparklines-pie-chart",
                                () => ({
                                  chart: {
                                    width: 30,
                                    height: 30,
                                    type: "pie",
                                    sparkline: {
                                      enabled: true,
                                    },
                                  },
                                  series: [70, 18, 12],
                                  labels: ["Direct", "Organic search", "Referral"],
                                  plotOptions: {
                                    pie: {
                                      expandOnClick: false,
                                    },
                                  },
                                  stroke: {
                                    width: 0,
                                  },
                                  tooltip: {
                                    enabled: false,
                                  },
                                  states: {
                                    hover: {
                                      filter: {
                                        type: "none",
                                      },
                                    },
                                  },
                                }),
                                () => ({
                                  colors: [
                                    varToColor("--chart-colors-primary"),
                                    varToColor("--chart-colors-chart-6"),
                                    varToColor("--chart-colors-chart-9"),
                                  ],
                                  stroke: {
                                    colors: varToColor("--chart-colors-background"),
                                  },
                                }),
                                () => ({
                                  colors: [
                                    varToColor("--chart-colors-primary-inverse"),
                                    varToColor("--chart-colors-chart-6-inverse"),
                                    varToColor("--chart-colors-chart-9-inverse"),
                                  ],
                                  stroke: {
                                    colors: varToColor("--chart-colors-background-inverse"),
                                  },
                                }),
                              );
                            })();