Components
Charts

Third-Party Plugins

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

How to use

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 area chart

Theme:

<!DOCTYPE html>
                    <html lang="en" dir="" class="relative min-h-full h-full">
                      <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                        <title>Preline UI</title>
                        <link rel="shortcut icon" href="../favicon.ico">
                        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                        <link rel="stylesheet" href="../assets/css/main.min.css">
                      </head>
                      <link rel="stylesheet" href="../assets/vendor/apexcharts/dist/apexcharts.css">
                      <style type="text/css">
                        .apexcharts-tooltip.apexcharts-theme-light {
                          background-color: transparent !important;
                          border: none !important;
                          box-shadow: none !important;
                        }

.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>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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>

Multiple area chart

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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>

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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-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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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>

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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-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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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>

Curved area charts

Use curve: 'smooth' to make the chart lines curved.

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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-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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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 bar chart

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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>

Multiple bar charts

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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 line chart

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
                      
                      <script>
                        window.addEventListener('load', () => {
                          // Apex Single Line Charts
                          (function () {
                            buildChart('#hs-single-line-chart', (mode) => ({
                              chart: {
                                height: 250,
                                type: 'line',
                                toolbar: {
                                  show: false
                                },
                                zoom: {
                                  enabled: false
                                }
                              },
                              series: [
                                {
                                  name: 'Sales',
                                  data: [0, 27000, 25000, 27000, 40000]
                                }
                              ],
                              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-28',
                                    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>

Multiple line charts

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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>

Curved line charts

Use curve: 'smooth' to make the chart lines curved.

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></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>

Horizontal bar chart

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
                      
                      <script>
                        window.addEventListener('load', () => {
                          // Apex Horizontal Bar Chart
                          (function () {
                            buildChart('#hs-horizontal-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: true,
                                  columnWidth: '16px',
                                  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'
                                ],
                                crosshairs: {
                                  show: false
                                },
                                labels: {
                                  style: {
                                    colors: varToColor('--chart-colors-xaxis-labels'),
                                    fontSize: '13px',
                                    fontFamily: 'Inter, ui-sans-serif',
                                    fontWeight: 400
                                  },
                                  offsetX: -2,
                                  formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                                }
                              },
                              yaxis: {
                                crosshairs: {
                                  show: false
                                },
                                labels: {
                                  align: 'left',
                                  minWidth: 0,
                                  maxWidth: 140,
                                  style: {
                                    colors: varToColor('--chart-colors-yaxis-labels'),
                                    fontSize: '13px',
                                    fontFamily: 'Inter, ui-sans-serif',
                                    fontWeight: 400
                                  },
                                  offsetX: -10,
                                  formatter: (title) => typeof title === 'string' ? title.slice(0, 3) : title
                                }
                              },
                              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'
                                  });
                                }
                              }
                            }), () => ({
                              colors: [varToColor('--chart-colors-primary')],
                              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')],
                              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>

Doughnut chart

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
                      
                      <script>
                        window.addEventListener('load', () => {
                          // Apex Doughnut Chart
                          (function () {
                            buildChart('#hs-doughnut-chart', (mode) => ({
                              chart: {
                                height: 230,
                                width: 230,
                                type: 'donut',
                                zoom: {
                                  enabled: false
                                }
                              },
                              plotOptions: {
                                pie: {
                                  donut: {
                                    size: '76%'
                                  }
                                }
                              },
                              series: [47, 23, 30],
                              labels: ['Tailwind CSS', 'Preline UI', 'Others'],
                              legend: {
                                show: false
                              },
                              dataLabels: {
                                enabled: false
                              },
                              stroke: {
                                width: 5
                              },
                              grid: {
                                padding: {
                                  top: -12,
                                  bottom: -11,
                                  left: -12,
                                  right: -12
                                }
                              },
                              states: {
                                hover: {
                                  filter: {
                                    type: 'none'
                                  }
                                }
                              },
                              tooltip: {
                                enabled: true,
                                custom: function (props) {
                                  return buildTooltipForDonut(
                                    props,
                                    mode === 'dark' ? ['#fff', '#fff', '#000'] : ['#fff', '#fff', '#000']
                                  );
                                }
                              }
                            }), () => ({
                              colors: [varToColor('--chart-colors-primary-inverse'), 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'),
                              }
                            }));
                          })();
                        });
                      </script>
                    </body>
                    </html>

Bubble chart

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
                      
                      <script>
                        window.addEventListener('load', () => {
                          // Apex Bubble Chart
                          (function () {
                            buildChart('#hs-bubble-chart', () => ({
                              chart: {
                                height: '100%',
                                type: 'bubble',
                                toolbar: {
                                  show: false
                                },
                                zoom: {
                                  enabled: false
                                }
                              },
                              series: [
                                {data: [[5, 6, 70]]},
                                {data: [[8, 4, 45]]},
                                {data: [[10, 9, 90]]}
                              ],
                              dataLabels: {
                                style: {
                                  fontSize: '20px',
                                  fontFamily: 'Inter, ui-sans-serif',
                                  fontWeight: '400',
                                },
                                formatter: (value) => value ? `${value}%` : ''
                              },
                              fill: {
                                opacity: 1
                              },
                              legend: {
                                show: false
                              },
                              stroke: {
                                width: 5
                              },
                              plotOptions: {
                                bubble: {
                                  zScaling: false,
                                  minBubbleRadius: 40
                                }
                              },
                              grid: {
                                show: false,
                                padding: {
                                  top: 0,
                                  bottom: 0,
                                  left: 0,
                                  right: 0
                                }
                              },
                              xaxis: {
                                min: 0,
                                max: 15,
                                labels: {
                                  show: false
                                },
                                axisBorder: {
                                  show: false
                                },
                                axisTicks: {
                                  show: false
                                }
                              },
                              yaxis: {
                                min: 0,
                                max: 15,
                                labels: {
                                  show: false
                                }
                              },
                              tooltip: {
                                enabled: false
                              },
                              states: {
                                hover: {
                                  filter: {
                                    type: 'none'
                                  }
                                }
                              }
                            }), () => ({
                              colors: [varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-9'), varToColor('--chart-colors-primary')],
                              markers: {
                                strokeColors: varToColor('--chart-colors-background')
                              },
                              dataLabels: {
                                style: {
                                  colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground'), varToColor('--chart-colors-foreground-inverse')],
                                },
                              },
                            }), () => ({
                              colors: [varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-9-inverse'), varToColor('--chart-colors-primary-inverse')],
                              markers: {
                                strokeColors: varToColor('--chart-colors-background-inverse')
                              },
                              dataLabels: {
                                style: {
                                  colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse')],
                                },
                              },
                            }));
                          })();
                        });
                      </script>
                    </body>
                    </html>

Pie chart

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
                      
                      <script>
                        window.addEventListener('load', () => {
                          // Apex Pie Chart
                          (function () {
                            buildChart('#hs-pie-chart', () => ({
                              chart: {
                                height: '100%',
                                type: 'pie',
                                zoom: {
                                  enabled: false
                                }
                              },
                              series: [70, 18, 12],
                              labels: ['Direct', 'Organic search', 'Referral'],
                              title: {
                                show: false
                              },
                              dataLabels: {
                                style: {
                                  fontSize: '20px',
                                  fontFamily: 'Inter, ui-sans-serif',
                                  fontWeight: '400',
                                },
                                dropShadow: {
                                  enabled: false
                                },
                                formatter: (value) => `${value.toFixed(1)} %`
                              },
                              plotOptions: {
                                pie: {
                                  dataLabels: {
                                    offset: -15
                                  }
                                }
                              },
                              legend: {
                                show: false
                              },
                              stroke: {
                                width: 4
                              },
                              grid: {
                                padding: {
                                  top: -10,
                                  bottom: -14,
                                  left: -9,
                                  right: -9
                                }
                              },
                              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'),
                              },
                              dataLabels: {
                                style: {
                                  colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground')],
                                },
                              },
                            }), () => ({
                              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'),
                              },
                              dataLabels: {
                                style: {
                                  colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse')],
                                },
                              },
                            }));
                          })();
                        });
                      </script>
                    </body>
                    </html>

Small sized sparklines

Theme:

.apexcharts-xaxistooltip:after,
                        .apexcharts-xaxistooltip:before {
                          border-bottom-color: var(--color-primary-600) !important;
                        }
                      </style>
                      <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.0.0"></script>
                      <script src="../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      <script src="../assets/vendor/preline/dist/helper-shared.js"></script>
                        <script src="../assets/vendor/preline/dist/helper-apexcharts.js"></script>
                      
                      <script>
                        window.addEventListener("load", () => {
                          // Apex Mix Charts Sparklines
                          (function () {
                            buildChart(
                              "#hs-sparklines-area-chart",
                              (mode) => ({
                                series: [
                                  {
                                    name: "Sales",
                                    data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40],
                                  },
                                ],
                                chart: {
                                  width: 100,
                                  height: 30,
                                  type: "area",
                                  sparkline: {
                                    enabled: true,
                                  },
                                },
                                stroke: {
                                  curve: "smooth",
                                  width: 0,
                                },
                                fill: {
                                  type: "solid",
                                },
                                xaxis: {
                                  type: "category",
                                  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",
                                  ],
                                  crosshairs: {
                                    show: false,
                                  },
                                },
                                yaxis: {
                                  labels: {
                                    show: false,
                                  },
                                  axisTicks: {
                                    show: false,
                                  },
                                  axisBorder: {
                                    show: false,
                                  },
                                },
                                markers: {
                                  hover: {
                                    size: 0,
                                  },
                                },
                                tooltip: {
                                  marker: {
                                    show: false,
                                  },
                                  fixed: {
                                    enabled: true,
                                    position: "bottomLeft",
                                    offsetX: 10,
                                    offsetY: -15,
                                  },
                                  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",
                                      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"),
                              },
                            }),
                          );
                        })();

Tailwind CSS Charts

Requires Additional Installation

How to use

Install Apexcharts

Add the Apexcharts CSS

Add the Apexcharts JavaScript

Add the Preline Helper JavaScript

Single area chart

Multiple area chart

Multiple area chart (Compare Two Tooltip)

Multiple area chart (Compare Two Tooltip Alternative)

Curved area charts

Single bar chart

Multiple bar charts

Single line chart

Multiple line charts

Curved line charts

Horizontal bar chart

Doughnut chart

Bubble chart

Pie chart

Small sized sparklines

On this page