Stats Charts

The Card Stats section features interactive charts and visual data representations, providing a clear and concise overview of key statistics and metrics at a glance.

Stats with Line Charts Preview

<div class="apqjg">
                <div class="ln4ij">
                  <!DOCTYPE html>
                  <html lang="en" dir="" class="relative kby5p ly3m4">
                    <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/obfuscated.min.css">
                      
                      <link rel="stylesheet" href="../../assets/vendor/apexcharts/dist/apexcharts.css">
                      <style type="text/css">
                        .apexcharts-tooltip.apexcharts-theme-light {
                          background-color: transparent !important;
                          border: none !important;
                          box-shadow: none !important;
                        }
                      </style>
                    </head>
                    <body>
                  <div class="dsir7 edesr i80r8 rlefu r8pzl wn51l gmtca">
                    
                    <div class="flex pz3xv lc5w1 m9vu4 efs5t kq7zk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] dxf1r dark:bg-neutral-800 dark:border-neutral-700">
                      <div class="rkm5u">
                        <h2 class="bqo3s yf7yl z1v6e dark:text-neutral-400">
                          Users
                        </h2>

<div class="flex pz3xv lc5w1 m9vu4 efs5t kq7zk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] dxf1r dark:bg-neutral-800 dark:border-neutral-700">
                      <div class="rkm5u">
                        <h2 class="bqo3s yf7yl z1v6e dark:text-neutral-400">
                          Avg. click rate
                        </h2>

<div class="flex items-center dsp0o">
                          <span class="hmhrw k3en6 s2k2k items-center ernqe bqo3s ac0xq p9tun ngy7c dark:bg-neutral-500/20 dark:text-neutral-400">
                            0.0%
                          </span>
                          <p class="bqo3s z1v6e dark:text-neutral-400">
                            from 5m 10s
                          </p>
                        </div>
                      </div>
                    </div>
                    
                  </div>
                  
                      <script src="../../assets/vendor/preline/dist/index.js?v=2.5.0"></script>
                      <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                      <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                      
                      <script>
                        function buildTooltip(props, options) {
                          const {
                            title,
                            mode,
                            valuePrefix = '$',
                            isValueDivided = true,
                            valuePostfix = '',
                            hasTextLabel = false,
                            invertGroup = false,
                            labelDivider = '',
                            wrapperClasses = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700',
                            wrapperExtClasses = '',
                            seriesClasses = 'd92b5',
                            seriesExtClasses = '',
                            titleClasses = 'rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                            titleExtClasses = '',
                            markerClasses = 'js5sw x3v98 uxli5',
                            markerExtClasses = 'xdtqp',
                            valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400',
                            valueExtClasses = '',
                            labelClasses = 'z1v6e dark:text-neutral-400',
                            labelExtClasses = ''
                          } = options;
                          const { dataPointIndex } = props;
                          const { colors } = props.ctx.opts;
                          const series = props.ctx.opts.series;
                          let seriesGroups = '';

series.forEach((single, i) => {
                            const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                            const label = series[i].name;
                            const groupData = invertGroup ? {
                              left: `${hasTextLabel ? label : ''}${labelDivider}`,
                              right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                            } : {
                              left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                              right: `${hasTextLabel ? label : ''}${labelDivider}`
                            }
                            const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group lp4ru ${hasTextLabel ? 'yhauy' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                            <span class="flex items-center">
                              <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                              <div class="apexcharts-tooltip-text">
                                <div class="apexcharts-tooltip-y-group pyszz">
                                  <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                                </div>
                              </div>
                            </span>
                            ${labelMarkup}
                          </div>`
                          });

const {
                            title,
                            mode,
                            valuePrefix = '$',
                            isValueDivided = true,
                            valuePostfix = '',
                            hasCategory = true,
                            hasTextLabel = false,
                            labelDivider = '',
                            wrapperClasses = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700',
                            wrapperExtClasses = '',
                            seriesClasses = 'yhauy qaxp8 d92b5',
                            seriesExtClasses = '',
                            titleClasses = 'flex m0bgt rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                            titleExtClasses = '',
                            markerClasses = 'js5sw x3v98 uxli5',
                            markerExtClasses = 'xdtqp',
                            valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400',
                            valueExtClasses = '',
                            labelClasses = 'z1v6e dark:text-neutral-400 vzx5m',
                            labelExtClasses = ''
                          } = options;

series.forEach((_, i) => {
                            const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                            const label = series[i].name;
                            const altValue = series[i].altValue || null;
                            const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                            const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} lp4ru order-${i + 1} ${seriesExtClasses}">
                            <span class="flex items-center">
                              <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                              <div class="apexcharts-tooltip-text">
                                <div class="apexcharts-tooltip-y-group pyszz">
                                  ${valueMarkup}
                                </div>
                              </div>
                            </span>
                            ${hasTextLabel ? labelMarkup : ''}
                          </div>`
                          });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                          <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                            <span>${title}</span>
                            <span class="flex items-center ernqe ${!isDifferenceIsNull ? (isGrowing ? 'fq7i5' : 'f5ifd') : ''} vzx5m">
                              ${!isDifferenceIsNull ? icon : ''}
                              <span class="ykxda pdak6">
                                ${difference.toFixed(1)}%
                              </span>
                            </span>
                          </div>
                          ${seriesGroups}
                        </div>`;
                        }

seriesGroups += `<div class="apexcharts-tooltip-series-group lp4ru ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                            <span class="flex items-center">
                              <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                              <div class="apexcharts-tooltip-text d92b5 ">
                                <div class="apexcharts-tooltip-y-group pyszz">
                                  <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                                </div>
                              </div>
                            </span>
                            ${hasTextLabel ? labelMarkup : ''}
                          </div>`
                          });

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                          const { globals } = w;
                          const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                          <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                            <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                              <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                              <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                            </div>
                          </div>
                        </div>`;
                        }

function buildChart(id, shared, light, dark) {
                          const $chart = document.querySelector(id);
                          let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                          let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                            if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                          });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                            chart = new ApexCharts($chart, optionsFn());
                            chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                          }

return chart;
                        }
                      </script>
                      <script>
                      	window.addEventListener('load', () => {
                      	  // Apex Line Charts
                      	  (function () {
                      	    const lineCharts = [
                      	      {
                      	        id: '#hs-users-line-chart',
                      	        data: [21, 20, 24, 20, 18, 17, 11, 17, 18, 30, 31, 30, 30, 35, 25, 35, 35, 40, 60, 90, 90, 90, 85, 70, 75, 70, 30, 30, 30, 50, 72],
                      	        name: 'Users',
                      	        valuePostfix: ''
                      	      }, {
                      	        id: '#hs-avg-click-rate-line-chart',
                      	        data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
                      	        name: 'Clicks',
                      	        valuePostfix: ''
                      	      }, {
                      	        id: '#hs-sessions-line-chart',
                      	        data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
                      	        name: 'Sessions',
                      	        valuePostfix: ''
                      	      }, {
                      	        id: '#hs-session-duration-line-chart',
                      	        data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40, 60, 42, 90, 90, 85, 70, 75, 43, 75, 90, 22, 120, 120, 90, 85, 100, 92, 92, 92, 92],
                      	        name: 'Avg. duration',
                      	        valuePostfix: 'min'
                      	      }
                      	    ];
	    
                      	    lineCharts.forEach(({ id, data, name, valuePostfix }) => {
                      	      buildChart(id, (mode) => ({
                      	        series: [{
                      	          name,
                      	          data
                      	        }],
                      	        chart: {
                      	          height: 30,
                      	          type: 'line',
                      	          sparkline: {
                      	            enabled: true
                      	          }
                      	        },
                      	        stroke: {
                      	          curve: 'straight',
                      	          width: 2
                      	        },
                      	        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',
                      	            '5 February 2023',
                      	            '6 February 2023',
                      	            '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',
                      	            '6 February 2023',
                      	            '25 January 2023',
                      	            '26 January 2023',
                      	            '27 January 2023',
                      	            '28 January 2023',
                      	            '29 January 2023'
                      	          ],
                      	          crosshairs: {
                      	            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: 'uheuq',
                      	              valuePrefix: '',
                      	              labelDivider: ':',
                      	              labelExtClasses: 'vzx5m',
                      	              valuePostfix
                      	            });
                      	          }
                      	        }
                      	      }), {
                      	        colors: ['#8b5cf6']
                      	      }, {
                      	        colors: ['#8b5cf6']
                      	      });
                      	    });
                      	  })();
                      	});
                      </script>
                    </body>
                  </html>
                </div>
              </div>

<div class="dsir7 edesr i80r8 rlefu r8pzl wn51l gmtca">
                
                <div class="flex pz3xv lc5w1 m9vu4 efs5t kq7zk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] dxf1r dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="rkm5u">
                    <h2 class="bqo3s yf7yl z1v6e dark:text-neutral-400">
                      Users
                    </h2>

<div class="flex pz3xv lc5w1 m9vu4 efs5t kq7zk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] dxf1r dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="rkm5u">
                    <h2 class="bqo3s yf7yl z1v6e dark:text-neutral-400">
                      Avg. click rate
                    </h2>

<div class="flex pz3xv lc5w1 m9vu4 efs5t kq7zk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] dxf1r dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="rkm5u">
                    <h2 class="bqo3s yf7yl z1v6e dark:text-neutral-400">
                      Sessions
                    </h2>

<div class="flex pz3xv lc5w1 m9vu4 efs5t kq7zk shadow-[0_4px_6px_0px_rgba(0,0,0,0.03)] dxf1r dark:bg-neutral-800 dark:border-neutral-700">
                  <div class="rkm5u">
                    <h2 class="bqo3s yf7yl z1v6e dark:text-neutral-400">
                      Session duration
                    </h2>

series.forEach((single, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const groupData = invertGroup ? {
                      left: `${hasTextLabel ? label : ''}${labelDivider}`,
                      right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                    } : {
                      left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                      right: `${hasTextLabel ? label : ''}${labelDivider}`
                    }
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group lp4ru ${hasTextLabel ? 'yhauy' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group pyszz">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                        </div>
                      </div>
                    </span>
                    ${labelMarkup}
                  </div>`
                  });

const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasCategory = true,
                    hasTextLabel = false,
                    labelDivider = '',
                    wrapperClasses = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'yhauy qaxp8 d92b5',
                    seriesExtClasses = '',
                    titleClasses = 'flex m0bgt rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'js5sw x3v98 uxli5',
                    markerExtClasses = 'xdtqp',
                    valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'z1v6e dark:text-neutral-400 vzx5m',
                    labelExtClasses = ''
                  } = options;

series.forEach((_, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const altValue = series[i].altValue || null;
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                    const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} lp4ru order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group pyszz">
                          ${valueMarkup}
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center ernqe ${!isDifferenceIsNull ? (isGrowing ? 'fq7i5' : 'f5ifd') : ''} vzx5m">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="ykxda pdak6">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
                }

const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasCategory = true,
                    hasTextLabel = false,
                    labelDivider = '',
                    wrapperClasses = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'yhauy qaxp8 d92b5',
                    seriesExtClasses = '',
                    titleClasses = 'flex m0bgt rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'js5sw x3v98 uxli5',
                    markerExtClasses = 'xdtqp',
                    valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'z1v6e dark:text-neutral-400 vzx5m',
                    labelExtClasses = ''
                  } = options;

seriesGroups += `<div class="apexcharts-tooltip-series-group lp4ru ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text d92b5 ">
                        <div class="apexcharts-tooltip-y-group pyszz">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center ernqe ${!isDifferenceIsNull ? (isGrowing ? 'fq7i5' : 'f5ifd') : ''} vzx5m">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="ykxda pdak6">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
                }

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                  const { globals } = w;
                  const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                  <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                    <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                      <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                      <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                    </div>
                  </div>
                </div>`;
                }

function buildChart(id, shared, light, dark) {
                  const $chart = document.querySelector(id);
                  let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                  let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                    if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                  });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                    chart = new ApexCharts($chart, optionsFn());
                    chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                  }

return chart;
                }
              </script>
              <script>
              	window.addEventListener('load', () => {
              	  // Apex Line Charts
              	  (function () {
              	    const lineCharts = [
              	      {
              	        id: '#hs-users-line-chart',
              	        data: [21, 20, 24, 20, 18, 17, 11, 17, 18, 30, 31, 30, 30, 35, 25, 35, 35, 40, 60, 90, 90, 90, 85, 70, 75, 70, 30, 30, 30, 50, 72],
              	        name: 'Users',
              	        valuePostfix: ''
              	      }, {
              	        id: '#hs-avg-click-rate-line-chart',
              	        data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
              	        name: 'Clicks',
              	        valuePostfix: ''
              	      }, {
              	        id: '#hs-sessions-line-chart',
              	        data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
              	        name: 'Sessions',
              	        valuePostfix: ''
              	      }, {
              	        id: '#hs-session-duration-line-chart',
              	        data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40, 60, 42, 90, 90, 85, 70, 75, 43, 75, 90, 22, 120, 120, 90, 85, 100, 92, 92, 92, 92],
              	        name: 'Avg. duration',
              	        valuePostfix: 'min'
              	      }
              	    ];
	    
              	    lineCharts.forEach(({ id, data, name, valuePostfix }) => {
              	      buildChart(id, (mode) => ({
              	        series: [{
              	          name,
              	          data
              	        }],
              	        chart: {
              	          height: 30,
              	          type: 'line',
              	          sparkline: {
              	            enabled: true
              	          }
              	        },
              	        stroke: {
              	          curve: 'straight',
              	          width: 2
              	        },
              	        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',
              	            '5 February 2023',
              	            '6 February 2023',
              	            '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',
              	            '6 February 2023',
              	            '25 January 2023',
              	            '26 January 2023',
              	            '27 January 2023',
              	            '28 January 2023',
              	            '29 January 2023'
              	          ],
              	          crosshairs: {
              	            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: 'uheuq',
              	              valuePrefix: '',
              	              labelDivider: ':',
              	              labelExtClasses: 'vzx5m',
              	              valuePostfix
              	            });
              	          }
              	        }
              	      }), {
              	        colors: ['#8b5cf6']
              	      }, {
              	        colors: ['#8b5cf6']
              	      });
              	    });
              	  })();
              	});
              </script>

Attached Card Group Preview

<!DOCTYPE html>
<html lang="en" dir="" class="relative kby5p ly3m4">
  <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/obfuscated.min.css">
    
    <link rel="stylesheet" href="../../assets/vendor/apexcharts/dist/apexcharts.css">
    <style type="text/css">
      .apexcharts-tooltip.apexcharts-theme-light {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }
    </style>
  </head>
  <body>
<div class="i80r8 rlefu r8pzl efs5t kq7zk ycht7 dxf1r apqjg dark:border-neutral-700">
  
  <div class="flex pz3xv lc5w1 m9vu4 dark:bg-neutral-800">
    <div class="btpd5">
      <div class="flex m0bgt items-center">
        <h2 class="z1v6e dark:text-neutral-400">
          Users
        </h2>
        <span class="hmhrw k3en6 s2k2k items-center ernqe bqo3s f4yq1 eo7sj ek1cm lli30 dark:bg-teal-500/10 dark:text-teal-500">
          <svg class="n34ak sb879" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 3.55649C9.39508 3.4089 9.45413 3.26735 9.55924 3.16299C9.66436 3.05863 9.80692 3 9.95557 3H14.4395C14.5882 3 14.7307 3.05863 14.8358 3.16299C14.9409 3.26735 15 3.4089 15 3.55649V8.00839C15 8.15598 14.9409 8.29753 14.8358 8.40189C14.7307 8.50625 14.5882 8.56488 14.4395 8.56488C14.2909 8.56488 14.1483 8.50625 14.0432 8.40189C13.9381 8.29753 13.879 8.15598 13.879 8.00839V5.11465L9.8289 10.0307C9.77932 10.0908 9.71762 10.1399 9.64777 10.1749C9.57792 10.2098 9.50146 10.2299 9.42333 10.2338C9.34519 10.2377 9.2671 10.2253 9.19409 10.1974C9.12107 10.1695 9.05474 10.1267 8.99937 10.0719L6.09939 7.19258L2.00107 12.7875C1.91141 12.9007 1.78106 12.975 1.6374 12.9947C1.49374 13.0145 1.34796 12.9782 1.2307 12.8935C1.11343 12.8087 1.03381 12.6822 1.00856 12.5404C0.983313 12.3986 1.01441 12.2526 1.09531 12.1331L5.57925 6.01171C5.62684 5.94662 5.68808 5.89254 5.75875 5.85321C5.82942 5.81388 5.90784 5.79022 5.9886 5.78388C6.06936 5.77753 6.15055 5.78864 6.22657 5.81645C6.30259 5.84425 6.37164 5.88809 6.42895 5.94493L9.3536 8.8498L13.2569 4.11298H9.95557C9.80692 4.11298 9.66436 4.05435 9.55924 3.94998C9.45413 3.84562 9.39508 3.70408 9.39508 3.55649Z"/>
          </svg>
          22%
        </span>
      </div>

<div class="qaxp8">
      
      <div id="hs-users-line-chart"></div>
      <div class="flex m0bgt bqo3s pal0s jatgu dark:text-neutral-400">
        <span>25 Jan</span>
        <span>25 Feb</span>
      </div>
    </div>
    
  </div>

<div class="flex pz3xv lc5w1 m9vu4 vu37r batcw vucz7 zummt dark:bg-neutral-800 dark:border-neutral-700">
    <div class="btpd5">
      <div class="flex m0bgt items-center">
        <h2 class="z1v6e dark:text-neutral-400">
          Avg. click rate
        </h2>
        <span class="hmhrw k3en6 s2k2k items-center ernqe bqo3s f4yq1 eo7sj ek1cm lli30 dark:bg-teal-500/10 dark:text-teal-500">
          <svg class="n34ak sb879" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 3.55649C9.39508 3.4089 9.45413 3.26735 9.55924 3.16299C9.66436 3.05863 9.80692 3 9.95557 3H14.4395C14.5882 3 14.7307 3.05863 14.8358 3.16299C14.9409 3.26735 15 3.4089 15 3.55649V8.00839C15 8.15598 14.9409 8.29753 14.8358 8.40189C14.7307 8.50625 14.5882 8.56488 14.4395 8.56488C14.2909 8.56488 14.1483 8.50625 14.0432 8.40189C13.9381 8.29753 13.879 8.15598 13.879 8.00839V5.11465L9.8289 10.0307C9.77932 10.0908 9.71762 10.1399 9.64777 10.1749C9.57792 10.2098 9.50146 10.2299 9.42333 10.2338C9.34519 10.2377 9.2671 10.2253 9.19409 10.1974C9.12107 10.1695 9.05474 10.1267 8.99937 10.0719L6.09939 7.19258L2.00107 12.7875C1.91141 12.9007 1.78106 12.975 1.6374 12.9947C1.49374 13.0145 1.34796 12.9782 1.2307 12.8935C1.11343 12.8087 1.03381 12.6822 1.00856 12.5404C0.983313 12.3986 1.01441 12.2526 1.09531 12.1331L5.57925 6.01171C5.62684 5.94662 5.68808 5.89254 5.75875 5.85321C5.82942 5.81388 5.90784 5.79022 5.9886 5.78388C6.06936 5.77753 6.15055 5.78864 6.22657 5.81645C6.30259 5.84425 6.37164 5.88809 6.42895 5.94493L9.3536 8.8498L13.2569 4.11298H9.95557C9.80692 4.11298 9.66436 4.05435 9.55924 3.94998C9.45413 3.84562 9.39508 3.70408 9.39508 3.55649Z"/>
          </svg>
          11.9%
        </span>
      </div>

<div class="qaxp8">
      
      <div id="hs-avg-click-rate-line-chart"></div>
      <div class="flex m0bgt bqo3s pal0s jatgu dark:text-neutral-400">
        <span>25 Jan</span>
        <span>25 Feb</span>
      </div>
    </div>
    
  </div>

<div class="flex pz3xv lc5w1 m9vu4 lb604 qhoi7 batcw cutis yoxta zummt dark:bg-neutral-800 dark:border-neutral-700">
    <div class="btpd5">
      <div class="flex m0bgt items-center">
        <h2 class="z1v6e dark:text-neutral-400">
          Sessions
        </h2>
        <span class="hmhrw k3en6 s2k2k items-center ernqe bqo3s f4yq1 gcnpw o7hjc lli30 dark:bg-red-500/10 dark:text-red-500">
          <svg class="n34ak sb879" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 12.4435C9.39508 12.5911 9.45413 12.7326 9.55924 12.837C9.66436 12.9414 9.80692 13 9.95557 13H14.4395C14.5882 13 14.7307 12.9414 14.8358 12.837C14.9409 12.7326 15 12.5911 15 12.4435V7.99161C15 7.84402 14.9409 7.70247 14.8358 7.59811C14.7307 7.49375 14.5882 7.43512 14.4395 7.43512C14.2909 7.43512 14.1483 7.49375 14.0432 7.59811C13.9381 7.70247 13.879 7.84402 13.879 7.99161V10.8853L9.8289 5.96933C9.77932 5.90924 9.71762 5.86013 9.64777 5.82515C9.57792 5.79017 9.50146 5.77009 9.42333 5.76621C9.34519 5.76233 9.2671 5.77474 9.19409 5.80263C9.12107 5.83052 9.05474 5.87327 8.99937 5.92815L6.09939 8.80742L2.00107 3.21249C1.91141 3.0993 1.78106 3.02502 1.6374 3.00527C1.49374 2.98551 1.34796 3.02181 1.2307 3.10653C1.11343 3.19126 1.03381 3.31782 1.00856 3.45962C0.983313 3.60142 1.01441 3.74741 1.09531 3.86692L5.57925 9.98829C5.62684 10.0534 5.68808 10.1075 5.75875 10.1468C5.82942 10.1861 5.90784 10.2098 5.9886 10.2161C6.06936 10.2225 6.15055 10.2114 6.22657 10.1836C6.30259 10.1557 6.37164 10.1119 6.42895 10.0551L9.3536 7.1502L13.2569 11.887H9.95557C9.80692 11.887 9.66436 11.9457 9.55924 12.05C9.45413 12.1544 9.39508 12.2959 9.39508 12.4435Z"></path>
          </svg>
          4.1%
        </span>
      </div>

<div class="qaxp8">
      
      <div id="hs-sessions-line-chart"></div>
      <div class="flex m0bgt bqo3s pal0s jatgu dark:text-neutral-400">
        <span>25 Jan</span>
        <span>25 Feb</span>
      </div>
    </div>
    
  </div>

<div class="flex pz3xv lc5w1 m9vu4 vu37r batcw cutis yoxta zummt dark:bg-neutral-800 dark:border-neutral-700">
    <div class="btpd5">
      <div class="flex m0bgt items-center">
        <h2 class="z1v6e dark:text-neutral-400">
          Session duration
        </h2>
        <span class="hmhrw k3en6 s2k2k items-center ernqe bqo3s f4yq1 eo7sj ek1cm lli30 dark:bg-teal-500/10 dark:text-teal-500">
          <svg class="n34ak sb879" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 3.55649C9.39508 3.4089 9.45413 3.26735 9.55924 3.16299C9.66436 3.05863 9.80692 3 9.95557 3H14.4395C14.5882 3 14.7307 3.05863 14.8358 3.16299C14.9409 3.26735 15 3.4089 15 3.55649V8.00839C15 8.15598 14.9409 8.29753 14.8358 8.40189C14.7307 8.50625 14.5882 8.56488 14.4395 8.56488C14.2909 8.56488 14.1483 8.50625 14.0432 8.40189C13.9381 8.29753 13.879 8.15598 13.879 8.00839V5.11465L9.8289 10.0307C9.77932 10.0908 9.71762 10.1399 9.64777 10.1749C9.57792 10.2098 9.50146 10.2299 9.42333 10.2338C9.34519 10.2377 9.2671 10.2253 9.19409 10.1974C9.12107 10.1695 9.05474 10.1267 8.99937 10.0719L6.09939 7.19258L2.00107 12.7875C1.91141 12.9007 1.78106 12.975 1.6374 12.9947C1.49374 13.0145 1.34796 12.9782 1.2307 12.8935C1.11343 12.8087 1.03381 12.6822 1.00856 12.5404C0.983313 12.3986 1.01441 12.2526 1.09531 12.1331L5.57925 6.01171C5.62684 5.94662 5.68808 5.89254 5.75875 5.85321C5.82942 5.81388 5.90784 5.79022 5.9886 5.78388C6.06936 5.77753 6.15055 5.78864 6.22657 5.81645C6.30259 5.84425 6.37164 5.88809 6.42895 5.94493L9.3536 8.8498L13.2569 4.11298H9.95557C9.80692 4.11298 9.66436 4.05435 9.55924 3.94998C9.45413 3.84562 9.39508 3.70408 9.39508 3.55649Z"/>
          </svg>
          5%
        </span>
      </div>

<div class="qaxp8">
      
      <div id="hs-session-duration-line-chart"></div>
      <div class="flex m0bgt bqo3s pal0s jatgu dark:text-neutral-400">
        <span>25 Jan</span>
        <span>25 Feb</span>
      </div>
    </div>
    
  </div>
  
</div>

    <script src="../../assets/vendor/preline/dist/index.js?v=2.5.0"></script>
    <script src="../../assets/vendor/lodash/lodash.min.js"></script>
    <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
    
    <script>
      function buildTooltip(props, options) {
        const {
          title,
          mode,
          valuePrefix = '$',
          isValueDivided = true,
          valuePostfix = '',
          hasTextLabel = false,
          invertGroup = false,
          labelDivider = '',
          wrapperClasses = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700',
          wrapperExtClasses = '',
          seriesClasses = 'd92b5',
          seriesExtClasses = '',
          titleClasses = 'rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
          titleExtClasses = '',
          markerClasses = 'js5sw x3v98 uxli5',
          markerExtClasses = 'xdtqp',
          valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400',
          valueExtClasses = '',
          labelClasses = 'z1v6e dark:text-neutral-400',
          labelExtClasses = ''
        } = options;
        const { dataPointIndex } = props;
        const { colors } = props.ctx.opts;
        const series = props.ctx.opts.series;
        let seriesGroups = '';

series.forEach((single, i) => {
          const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
          const label = series[i].name;
          const groupData = invertGroup ? {
            left: `${hasTextLabel ? label : ''}${labelDivider}`,
            right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
          } : {
            left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
            right: `${hasTextLabel ? label : ''}${labelDivider}`
          }
          const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group lp4ru ${hasTextLabel ? 'yhauy' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
          <span class="flex items-center">
            <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
            <div class="apexcharts-tooltip-text">
              <div class="apexcharts-tooltip-y-group pyszz">
                <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
              </div>
            </div>
          </span>
          ${labelMarkup}
        </div>`
        });

const {
          title,
          mode,
          valuePrefix = '$',
          isValueDivided = true,
          valuePostfix = '',
          hasCategory = true,
          hasTextLabel = false,
          labelDivider = '',
          wrapperClasses = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700',
          wrapperExtClasses = '',
          seriesClasses = 'yhauy qaxp8 d92b5',
          seriesExtClasses = '',
          titleClasses = 'flex m0bgt rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
          titleExtClasses = '',
          markerClasses = 'js5sw x3v98 uxli5',
          markerExtClasses = 'xdtqp',
          valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400',
          valueExtClasses = '',
          labelClasses = 'z1v6e dark:text-neutral-400 vzx5m',
          labelExtClasses = ''
        } = options;

series.forEach((_, i) => {
          const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
          const label = series[i].name;
          const altValue = series[i].altValue || null;
          const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
          const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} lp4ru order-${i + 1} ${seriesExtClasses}">
          <span class="flex items-center">
            <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
            <div class="apexcharts-tooltip-text">
              <div class="apexcharts-tooltip-y-group pyszz">
                ${valueMarkup}
              </div>
            </div>
          </span>
          ${hasTextLabel ? labelMarkup : ''}
        </div>`
        });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
        <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
          <span>${title}</span>
          <span class="flex items-center ernqe ${!isDifferenceIsNull ? (isGrowing ? 'fq7i5' : 'f5ifd') : ''} vzx5m">
            ${!isDifferenceIsNull ? icon : ''}
            <span class="ykxda pdak6">
              ${difference.toFixed(1)}%
            </span>
          </span>
        </div>
        ${seriesGroups}
      </div>`;
      }

const {
          title,
          mode,
          valuePrefix = '$',
          isValueDivided = true,
          valuePostfix = '',
          hasCategory = true,
          hasTextLabel = false,
          labelDivider = '',
          wrapperClasses = 'uo3aj dsir7 m9vu4 efs5t kq7zk p9tun awdil jr7bp dark:bg-neutral-800 dark:border-neutral-700',
          wrapperExtClasses = '',
          seriesClasses = 'yhauy qaxp8 d92b5',
          seriesExtClasses = '',
          titleClasses = 'flex m0bgt rozsb h7cjz zhcbf dhiec p9tun fbqsg dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
          titleExtClasses = '',
          markerClasses = 'js5sw x3v98 uxli5',
          markerExtClasses = 'xdtqp',
          valueClasses = 'yhjlq z1v6e g6xpd dark:text-neutral-400',
          valueExtClasses = '',
          labelClasses = 'z1v6e dark:text-neutral-400 vzx5m',
          labelExtClasses = ''
        } = options;

seriesGroups += `<div class="apexcharts-tooltip-series-group lp4ru ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
          <span class="flex items-center">
            <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
            <div class="apexcharts-tooltip-text d92b5 ">
              <div class="apexcharts-tooltip-y-group pyszz">
                <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
              </div>
            </div>
          </span>
          ${hasTextLabel ? labelMarkup : ''}
        </div>`
        });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
        <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
          <span>${title}</span>
          <span class="flex items-center ernqe ${!isDifferenceIsNull ? (isGrowing ? 'fq7i5' : 'f5ifd') : ''} vzx5m">
            ${!isDifferenceIsNull ? icon : ''}
            <span class="ykxda pdak6">
              ${difference.toFixed(1)}%
            </span>
          </span>
        </div>
        ${seriesGroups}
      </div>`;
      }

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
        const { globals } = w;
        const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
        <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
          <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
            <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
            <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
          </div>
        </div>
      </div>`;
      }

function buildChart(id, shared, light, dark) {
        const $chart = document.querySelector(id);
        let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
        let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
          if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
        });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
          chart = new ApexCharts($chart, optionsFn());
          chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
        }

return chart;
      }
    </script>
    <script>
    	window.addEventListener('load', () => {
    		// Apex Bar Charts
    		(function () {
    		  const barCharts = [
    		    {
    		      id: '#hs-users-line-chart',
    		      data: [21, 20, 24, 20, 18, 17, 11, 17, 18, 30, 31, 30, 30, 35, 25, 35, 35, 40, 60, 90, 90, 90, 85, 70, 75, 70, 30, 30, 30, 50, 72],
    		      name: 'Users',
    		      valuePostfix: ''
    		    }, {
    		      id: '#hs-avg-click-rate-line-chart',
    		      data: [21, 20, 24, 20, 18, 27, 25, 27, 30, 30, 35, 25, 18, 30, 31, 35, 35, 90, 90, 90, 85, 100, 120, 120, 120, 100, 90, 75, 75, 75, 90],
    		      name: 'Clicks',
    		      valuePostfix: ''
    		    }, {
    		      id: '#hs-sessions-line-chart',
    		      data: [25, 48, 10, 11, 11, 15, 60, 60, 60, 75, 21, 20, 24, 20, 38, 37, 35, 37, 30, 120, 120, 120, 100, 90, 75, 90, 90, 90, 75, 70, 60],
    		      name: 'Sessions',
    		      valuePostfix: ''
    		    }, {
    		      id: '#hs-session-duration-line-chart',
    		      data: [21, 20, 24, 45, 47, 30, 30, 35, 35, 35, 40, 60, 42, 90, 90, 85, 70, 75, 43, 75, 90, 22, 120, 120, 90, 85, 100, 92, 92, 92, 92],
    		      name: 'Avg. duration',
    		      valuePostfix: 'min'
    		    }
    		  ];

barCharts.forEach(({ id, data, name, valuePostfix }) => {
    		    buildChart(id, (mode) => ({
    		      series: [{
    		        name,
    		        data
    		      }],
    		      chart: {
    		        height: 30,
    		        type: 'bar',
    		        sparkline: {
    		          enabled: true
    		        }
    		      },
    		      stroke: {
    		        curve: 'straight',
    		        width: 2
    		      },
    		      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',
    		          '5 February 2023',
    		          '6 February 2023',
    		          '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',
    		          '6 February 2023',
    		          '25 January 2023',
    		          '26 January 2023',
    		          '27 January 2023',
    		          '28 January 2023',
    		          '29 January 2023'
    		        ],
    		        crosshairs: {
    		          show: false
    		        }
    		      },
    		      markers: {
    		        hover: {
    		          size: 0
    		        }
    		      },
    		      tooltip: {
    		        marker: {
    		          show: false
    		        },
    		        fixed: {
    	            enabled: true,
    	            position: 'bottomLeft',
    	            offsetX: 100,
    	            offsetY: -10,
    	          },
    		        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: 'uheuq',
    		            valuePrefix: '',
    		            labelDivider: ':',
    		            labelExtClasses: 'vzx5m',
    		            valuePostfix
    		          });
    		        }
    		      }
    		    }), {
    		      colors: ['#2563eb']
    		    }, {
    		      colors: ['#2563eb']
    		    });
    	    });
    	  })();
    	});
    </script>
  </body>
</html>

<div class="i80r8 rlefu r8pzl efs5t kq7zk ycht7 dxf1r apqjg dark:border-neutral-700">
  
  <div class="flex pz3xv lc5w1 m9vu4 dark:bg-neutral-800">
    <div class="btpd5">
      <div class="flex m0bgt items-center">
        <h2 class="z1v6e dark:text-neutral-400">
          Users
        </h2>
        <span class="hmhrw k3en6 s2k2k items-center ernqe bqo3s f4yq1 eo7sj ek1cm lli30 dark:bg-teal-500/10 dark:text-teal-500">
          <svg class="n34ak sb879" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 3.55649C9.39508 3.4089 9.45413 3.26735 9.55924 3.16299C9.66436 3.05863 9.80692 3 9.95557 3H14.4395C14.5882 3 14.7307 3.05863 14.8358 3.16299C14.9409 3.26735 15 3.4089 15 3.55649V8.00839C15 8.15598 14.9409 8.29753 14.8358 8.40189C14.7307 8.50625 14.5882 8.56488 14.4395 8.56488C14.2909 8.56488 14.1483 8.50625 14.0432 8.40189C13.9381 8.29753 13.879 8.15598 13.879 8.00839V5.11465L9.8289 10.0307C9.77932 10.0908 9.71762 10.1399 9.64777 10.1749C9.57792 10.2098 9.50146 10.2299 9.42333 10.2338C9.34519 10.2377 9.2671 10.2253 9.19409 10.1974C9.12107 10.1695 9.05474 10.1267 8.99937 10.0719L6.09939 7.19258L2.00107 12.7875C1.91141 12.9007 1.78106 12.975 1.6374 12.9947C1.49374 13.0145 1.34796 12.9782 1.2307 12.8935C1.11343 12.8087 1.03381 12.6822 1.00856 12.5404C0.983313 12.3986 1.01441 12.2526 1.09531 12.1331L5.57925 6.01171C5.62684 5.94662 5.68808 5.89254 5.75875 5.85321C5.82942 5.81388 5.90784 5.79022 5.9886 5.78388C6.06936 5.77753 6.15055 5.78864 6.22657 5.81645C6.30259 5.84425 6.37164 5.88809 6.42895 5.94493L9.3536 8.8498L13.2569 4.11298H9.95557C9.80692 4.11298 9.66436 4.05435 9.55924 3.94998C9.45413 3.84562 9.39508 3.70408 9.39508 3.55649Z"/>
          </svg>
          22%
        </span>
      </div>