Charts & Graphs

Inbox Demo: Stacked Column Chart Preview

Theme:

<!DOCTYPE html>
            <html lang="en" dir="" class="relative z469n vaohh">
              <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;
                  }

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

.apexcharts-xaxistooltip:after,
                  .apexcharts-xaxistooltip:before {
                    border-bottom-color: var(--color-primary-600) !important;
                  }
                </style>
              </head>
              <body>
                <div class="w-full snqpv mx-auto">
            <div class="flex flex-col u64n3 t8tjb u0h0i dao1f hua1b">
              
              <div class="jvyn5 ehn35">
                <div class="xyt5v x2v9d flex flex-wrap tah6m items-center uqtnu zzhmg">
                  <h2 class="jet6l l2bgt">
                    Your email stats
                  </h2>

<div class="flex wzdcx items-center c3em3">
                    <p class="uhey0 q95gx">
                      Your performance <span class="ue9hi esl90 amldq hd03z fb2rt wblp7 uhey0 x66be dark:bg-green-500/10 dark:text-green-400">Exceeds range</span> to last month
                    </p>
                  </div>
                </div>
              </div>

<div class="gs9zt thlss jggmm">
                <div class="dpnda o1q3m 2xl:col-span-9">
                  <div class="wme6b x2v9d">
                    
                    <div class="bipfe flex flex-wrap wzdcx ql23z oszr5">
                      
                      <div class="flex items-center g2np1">
                        <span class="f832y o8wc8 inline-block t4h4j wcr2t"></span>
                        <div class="xkklm">
                          <span class="block zao2n l2bgt">
                            Leads
                          </span>
                        </div>
                      </div>

<div class="flex items-center g2np1">
                        <span class="f832y o8wc8 inline-block gg9nj wcr2t"></span>
                        <div class="xkklm">
                          <span class="block zao2n l2bgt">
                            Users
                          </span>
                        </div>
                      </div>
                      
                    </div>

<div id="hs-pro-iresscch" class="min-h-[255px] -mx-2"></div>
                  </div>
                </div>
                
    
                <div class="dpnda fmrog 2xl:col-span-3 bgvr9 gsv03 e999b kb3o9">
                  <div class="hpidb">
                    <h3 class="qjp7i zao2n l2bgt">
                      Breakdown
                    </h3>

<div class="flex flex-col ql23z">
                      <div class="qjp7i">
                        
                        <div class="flex gap-x-[3px] w-full cihxr">
                          <div class="flex flex-col gaa3v overflow-hidden euhj6 uhey0 jr0cl x66be tfcfu" style="width: 42%" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                          <div class="flex flex-col gaa3v overflow-hidden h5ln8 uhey0 jr0cl x66be tfcfu" style="width: 27%" role="progressbar" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100"></div>
                          <div class="flex flex-col gaa3v overflow-hidden x7b89 uhey0 jr0cl x66be tfcfu" style="width: 16%" role="progressbar" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"></div>
                          <div class="flex flex-col gaa3v overflow-hidden kbntc uhey0 jr0cl x66be tfcfu" style="width: 6%" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
                          <div class="flex flex-col gaa3v overflow-hidden g4iir uhey0 jr0cl x66be tfcfu" style="width: 9%" role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        
                      </div>

<ul>
                        
                        <li class="flex tah6m l8c01 k85z8 efq8x wer7x gd0j4 bgvr9 xx8yd y87u5">
                          <div class="xkklm">
                            <div class="flex items-center c3em3">
                              <span class="f832y o8wc8 inline-block euhj6 x66be"></span>
                              <span class="zao2n l2bgt">
                                Emails sent
                              </span>
                            </div>
                          </div>
                          <div class="n33lg">
                            <span class="zao2n q95gx">
                              164
                            </span>
                          </div>
                        </li>

<li class="flex tah6m l8c01 k85z8 efq8x wer7x gd0j4 bgvr9 xx8yd y87u5">
                          <div class="xkklm">
                            <div class="flex items-center c3em3">
                              <span class="f832y o8wc8 inline-block h5ln8 x66be"></span>
                              <span class="zao2n l2bgt">
                                Emails delivered
                              </span>
                            </div>
                          </div>
                          <div class="n33lg">
                            <span class="zao2n q95gx">
                              49
                            </span>
                          </div>
                        </li>

<li class="flex tah6m l8c01 k85z8 efq8x wer7x gd0j4 bgvr9 xx8yd y87u5">
                          <div class="xkklm">
                            <div class="flex items-center c3em3">
                              <span class="f832y o8wc8 inline-block x7b89 x66be"></span>
                              <span class="zao2n l2bgt">
                                Emails opened
                              </span>
                            </div>
                          </div>
                          <div class="n33lg">
                            <span class="zao2n q95gx">
                              26
                            </span>
                          </div>
                        </li>

<li class="flex tah6m l8c01 k85z8 efq8x wer7x gd0j4 bgvr9 xx8yd y87u5">
                          <div class="xkklm">
                            <div class="flex items-center c3em3">
                              <span class="f832y o8wc8 inline-block kbntc x66be"></span>
                              <span class="zao2n l2bgt">
                                Emails replied
                              </span>
                            </div>
                          </div>
                          <div class="n33lg">
                            <span class="zao2n q95gx">
                              8
                            </span>
                          </div>
                        </li>

<li class="flex tah6m l8c01 k85z8 efq8x wer7x gd0j4 bgvr9 xx8yd y87u5">
                          <div class="xkklm">
                            <div class="flex items-center c3em3">
                              <span class="f832y o8wc8 inline-block g4iir x66be"></span>
                              <span class="zao2n l2bgt">
                                Emails interested
                              </span>
                            </div>
                          </div>
                          <div class="n33lg">
                            <span class="zao2n q95gx">
                              12
                            </span>
                          </div>
                        </li>
                        
                      </ul>
                      
                    </div>
                    
                  </div>
                </div>
                
              </div>
              
            </div>
            </div>
                <script src="../../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                
                <script src="https://cdn.jsdelivr.net/npm/culori@4.0.2/bundled/culori.umd.min.js"></script>

<!--<script>
                  function varToColor(
                    name,
                    forceHex = false,
                    scope = document.documentElement,
                  ) {
                    if (name.startsWith("#") || name.startsWith("rgba")) return name;

const raw = getComputedStyle(scope).getPropertyValue(name).trim();

if (!raw) return null;

if (raw.startsWith("oklch") || forceHex) return raw;

const probe = document.createElement("div");
                    probe.style.position = "fixed";
                    probe.style.left = "-9999px";
                    probe.style.backgroundColor = raw.replace(/\s*!important\s*$/i, "");

document.body.appendChild(probe);

const computed = getComputedStyle(probe).backgroundColor;
                    probe.remove();

if (!computed) return null;
                    if (computed.startsWith("rgba(")) return computed;
                    if (computed.startsWith("rgb(")) return `rgba(${computed.slice(4, -1)}, 1)`;

window.addEventListener("on-hs-color-theme-change", () => {
                      return varToColor(name, forceHex, scope);
                    });

window.addEventListener("on-hs-brand-change", () => {
                      return varToColor(name, forceHex, scope);
                    });

return null;
                  }
                </script>-->
                <script>
                  function buildTooltip(props, options) {
                  	const {
                  		title,
                  		mode,
                  		valuePrefix = '$',
                  		isValueDivided = true,
                  		valuePostfix = '',
                  		hasTextLabel = false,
                  		invertGroup = false,
                  		labelDivider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		seriesClasses = 'uhey0',
                  		seriesExtClasses = '',
                  		titleClasses = 'eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                  		titleExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  		labelClasses = 'l6pjp dark:text-neutral-400',
                  		labelExtClasses = '',
                  		thousandsShortName = 'k',
                  	} = options;
                  	const { dataPointIndex } = props;
                  	// const { colors } = props.ctx.opts;
                  	const { colors } = props.w.globals;
                  	const series = props.ctx.opts.series;
                  	let seriesGroups = '';
  
                  	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 groupData = invertGroup
                  			? {
                  					left: `${hasTextLabel ? label : ''}${labelDivider}`,
  
                  					right: `${valuePrefix}${
                  						val >= 1000 && isValueDivided
                  							? `${val / 1000}${thousandsShortName}`
                  							: val
                  					}${valuePostfix}`,
                  				}
                  			: {
                  					left: `${valuePrefix}${
                  						val >= 1000 && isValueDivided
                  							? `${val / 1000}${thousandsShortName}`
                  							: 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 !flex ${
                  			hasTextLabel ? 'unru1' : ''
                  		} 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 eqzhk">
                              <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                            </div>
                          </div>
                        </span>
                        ${labelMarkup}
                      </div>`;
                  	});
  
                  	return `<div class="${
                  		mode === 'dark' ? 'dark ' : ''
                  	}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">${title}</div>
                      ${seriesGroups}
                    </div>`;
                  }
  
                  function buildHeatmapTooltip(
                  	props,
                  	options,
                  ) {
                  	const {
                  		mode,
                  		valuePrefix = '$',
                  		valuePostfix = '',
                  		divider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerStyles = '',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  	} = options;
                  	const { dataPointIndex, seriesIndex, series } = props;
                  	const { name } = props.ctx.opts.series[seriesIndex];
                  	const val = `${valuePrefix}${
                  		series[seriesIndex][dataPointIndex]
                  	}${valuePostfix}`;
  
                  	return `<div class="${
                  		mode === 'dark' ? 'dark ' : ''
                  	}${wrapperClasses} ${wrapperExtClasses}">
                      <div class="apexcharts-tooltip-series-group !flex">
                  			<span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="${markerStyles}"></span>
                        <span class="flex items-center">
                          <div class="apexcharts-tooltip-text">
                            <div class="apexcharts-tooltip-y-group eqzhk">
                              <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${name}${divider}</span>
                            </div>
                          </div>
                        </span>
                  			<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${val}</span>
                      </div>
                    </div>`;
                  }
  
                  function buildTooltipCompareTwo(
                  	props,
                  	options,
                  ) {
                  	const {
                  		title,
                  		mode,
                  		valuePrefix = '$',
                  		isValueDivided = true,
                  		valuePostfix = '',
                  		hasCategory = true,
                  		hasTextLabel = false,
                  		labelDivider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		seriesClasses = 'unru1 w-full uhey0',
                  		seriesExtClasses = '',
                  		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                  		titleExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
                  		labelExtClasses = '',
                  		thousandsShortName = 'k',
                  	} = options;
                  	const { dataPointIndex } = props;
                  	const { categories } = props.ctx.opts.xaxis;
                  	// const { colors } = props.ctx.opts;
                  	const { colors } = props.w.globals;
                  	const series = props.ctx.opts.series;
  
                  	let seriesGroups = '';
                  	const s0 = series[0].data[dataPointIndex];
                  	const s1 = series[1].data[dataPointIndex];
                  	const category = categories[dataPointIndex].split(' ');
                  	const newCategory = hasCategory
                  		? `${category[0]}${category[1] ? ' ' : ''}${
                  				category[1] ? category[1].slice(0, 3) : ''
                  			}`
                  		: '';
                  	// const isGrowing = s0 > s1;
                  	// const isDifferenceIsNull = s0 / s1 === 1;
                  	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
                  	// TODO: test this before deleting the code above
                  	const isPrevZero = s1 === 0;
                  	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                  	const isDifferenceIsNull = difference === 0;
                  	const isGrowing = difference > 0;
                  	const icon = isGrowing
                  		? `<svg class="inline-block krmzt gghqq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`
                  		: `<svg class="inline-block krmzt gghqq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7" /><polyline points="16 17 22 17 22 11" /></svg>`;
  
                  	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}${thousandsShortName}`
                  					: val
                  			}${valuePostfix}${labelDivider}</span>`;
  
                  		seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} !flex 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 eqzhk">
                              ${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 n68jf ${
                  				!isDifferenceIsNull
                  					? isGrowing
                  						? 'tj1si'
                  						: 'rvs8c'
                  					: ''
                  			} a5dlz">
                          ${!isDifferenceIsNull ? icon : ''}
                          <span class="inline-block zao2n">
                            ${difference.toFixed(1)}%
                          </span>
                        </span>
                      </div>
                      ${seriesGroups}
                    </div>`;
                  }
  
                  function buildTooltipCompareTwoAlt(
                  	props,
                  	options,
                  ) {
                  	const {
                  		title,
                  		mode,
                  		valuePrefix = '$',
                  		isValueDivided = true,
                  		valuePostfix = '',
                  		hasCategory = true,
                  		hasTextLabel = false,
                  		labelDivider = '',
                  		wrapperClasses = 'w9rr4 bipfe nlr7x t8tjb hyae6 bzjng tp74o w04j3 dark:bg-neutral-800 dark:border-neutral-700',
                  		wrapperExtClasses = '',
                  		seriesClasses = 'unru1 w-full uhey0',
                  		seriesExtClasses = '',
                  		titleClasses = 'flex tah6m eitz2 n3y2v ta9dt l2fft bzjng g8fkv dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                  		titleExtClasses = '',
                  		markerClasses = 'vys1g wbmur nzmav',
                  		markerExtClasses = 'fquu1',
                  		valueClasses = 'wyq6m l6pjp !ms-auto dark:text-neutral-400',
                  		valueExtClasses = '',
                  		labelClasses = 'l6pjp dark:text-neutral-400 a5dlz',
                  		labelExtClasses = '',
                  		thousandsShortName = 'k',
                  	} = options;
                  	const { dataPointIndex } = props;
                  	const { categories } = props.ctx.opts.xaxis;
                  	// const { colors } = props.ctx.opts;
                  	const { colors } = props.w.globals;
                  	const series = props.ctx.opts.series;
  
                  	let seriesGroups = '';
                  	const s0 = series[0].data[dataPointIndex];
                  	const s1 = series[1].data[dataPointIndex];
                  	const category = categories[dataPointIndex].split(' ');
                  	const newCategory = hasCategory
                  		? `${category[0]}${category[1] ? ' ' : ''}${
                  				category[1] ? category[1].slice(0, 3) : ''
                  			}`
                  		: '';
                  	// const isGrowing = s0 > s1;
                  	// const isDifferenceIsNull = s0 / s1 === 1;
                  	// const difference = isDifferenceIsNull ? 0 : (s0 / s1) * 100;
                  	// TODO: test this before deleting the code above
                  	const isPrevZero = s1 === 0;
                  	const difference = isPrevZero ? 0 : ((s0 - s1) / Math.abs(s1)) * 100;
                  	const isDifferenceIsNull = difference === 0;
                  	const isGrowing = difference > 0;
                  	const icon = isGrowing
                  		? `<svg class="inline-block krmzt gghqq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`
                  		: `<svg class="inline-block krmzt gghqq" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7" /><polyline points="16 17 22 17 22 11" /></svg>`;
  
                  	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 labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${valuePrefix}${
                  			val >= 1000 && isValueDivided ? `${val / 1000}${thousandsShortName}` : val
                  		}${valuePostfix}</span>`;
  
                  		seriesGroups += `<div class="apexcharts-tooltip-series-group !flex ${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 uhey0">
                            <div class="apexcharts-tooltip-y-group eqzhk">
                              <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 n68jf ${
                  				!isDifferenceIsNull
                  					? isGrowing
                  						? 'tj1si'
                  						: 'rvs8c'
                  					: ''
                  			} a5dlz">
                          ${!isDifferenceIsNull ? icon : ''}
                          <span class="inline-block zao2n">
                            ${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 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'),
                  	) => {
                  		if (
                  			mode === 'dark' ||
                  			(mode === 'auto' &&
                  				window.matchMedia('(prefers-color-scheme: dark)').matches)
                  		) {
                  			return window._.merge(
                  				shared('dark'),
                  				typeof dark === 'function' ? dark() : dark,
                  			);
                  		} else {
                  			return window._.merge(
                  				shared('light'),
                  				typeof light === 'function' ? light() : light,
                  			);
                  		}
                  	};
  
                  	if ($chart) {
                  		let isInitialLoad = true;
                  		chart = new ApexCharts($chart, optionsFn());
                  		chart.render();
  
                  		setTimeout(() => {
                  			isInitialLoad = false;
                  		}, 100);
  
                  		let hasInitProgressApplied = false;
  
                  		const handleThemeChange = (evt) => {
                  			if (isInitialLoad) return;
  
                  			chart.updateOptions(optionsFn(evt.detail));
                  		};
                  		const applyOptionsChange = (detail) => {
                  			let modeFromBodyClass;
                  			const target = detail?.target ?? document.querySelector('html');
  
                  			Array.from(target.classList).forEach((cl) => {
                  				if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                  			});
  
                  			handleThemeChange({
                  				detail: modeFromBodyClass || localStorage.getItem('hs_theme'),
                  			});
                  		};
                  		const handleOptionsChange = (evt) => {
                  			const detail = evt.detail;
                  			if (detail && detail.isClipboardInit) return;
                  			applyOptionsChange(detail);
                  		};
                  		const handleClipboardInitProgress = (evt) => {
                  			if (hasInitProgressApplied) return;
  
                  			const detail = evt.detail;
                  			const target = detail?.target;
  
                  			if (!target || !$chart || !target.contains($chart)) return;
  
                  			hasInitProgressApplied = true;
  
                  			if (isInitialLoad) {
                  				setTimeout(() => applyOptionsChange(detail), 120);
                  			} else {
                  				applyOptionsChange(detail);
                  			}
                  		};
  
                  		window.addEventListener('on-hs-appearance-change', handleThemeChange);
                  		window.addEventListener(
                  			'on-hs-color-theme-change',
                  			(evt) => {
                  				setTimeout(() => handleOptionsChange(evt), 50);
                  			},
                  		);
                  		window.addEventListener('on-hs-font-change', (evt) => {
                  			setTimeout(() => handleOptionsChange(evt), 50);
                  		});
                  		window.addEventListener('on-hs-brand-change', (evt) => {
                  			setTimeout(() => handleOptionsChange(evt), 50);
                  		});
                  		window.addEventListener(
                  			'on-hs-clipboard-init-progress',
                  			handleClipboardInitProgress,
                  		);
  
                  		if (tabpanel) {
                  			tabpanel.addEventListener('on-hs-appearance-change', handleThemeChange);
                  		}
                  	}
  
                  	return chart;
                  }
  
                  function fullBarHoverEffect(
                  	chartCtx,
                  	{ shadowClasses = 'ck3kr' } = {},
                  ) {
                  	const gs9zt = chartCtx.el.querySelector<HTMLElement>('.apexcharts-grid');
                  	const svg = chartCtx.el.querySelector('svg');
                  	if (!grid || !svg) return;
  
                  	const categories = chartCtx.w.config.xaxis?.categories || [];
                  	if (categories.length === 0) return;
  
                  	let shadowRect = null;
                  	let isVisible = false;
                  	let isRemoving = false;
  
                  	function cleanup() {
                  		shadowRect?.remove();
                  		shadowRect = null;
                  		isVisible = false;
                  		isRemoving = false;
                  	}
  
                  	function showForIndex(index) {
                  		const seriesGroup = chartCtx.el.querySelector('.apexcharts-bar-series');
                  		if (!seriesGroup) return;
  
                  		const bars = seriesGroup.querySelectorAll<SVGPathElement>('path');
                  		const bar = bars[index];
                  		if (!bar) return;
  
                  		const bbox = bar.getBBox();
                  		const x = bbox.x;
                  		const y = bbox.y;
                  		const width = bbox.width;
                  		if (y <= 0) return;
  
                  		if (!shadowRect) {
                  			shadowRect = document.createElementNS(
                  				'http://www.w3.org/2000/svg',
                  				'rect',
                  			);
                  			shadowRect.setAttribute('y', '0');
                  			shadowRect.setAttribute('class', shadowClasses);
                  			bar.parentNode?.insertBefore(shadowRect, bar);
                  		}
  
                  		shadowRect.setAttribute('x', x.toString());
                  		shadowRect.setAttribute('width', width.toString());
                  		shadowRect.setAttribute('height', y.toString());
  
                  		requestAnimationFrame(() => {
                  			shadowRect?.classList.add('qqzdp');
                  		});
  
                  		isVisible = true;
                  		isRemoving = false;
                  	}
  
                  	function hide() {
                  		if (!shadowRect || !isVisible || isRemoving) return;
                  		isRemoving = true;
                  		shadowRect.classList.remove('qqzdp');
                  		cleanup();
                  	}
  
                  	svg.addEventListener('mousemove', (e) => {
                  		const gridRect = grid.getBoundingClientRect();
                  		if (
                  			e.clientX < gridRect.left ||
                  			e.clientX > gridRect.right ||
                  			e.clientY < gridRect.top ||
                  			e.clientY > gridRect.bottom
                  		) {
                  			hide();
                  			return;
                  		}
  
                  		const relativeX = e.clientX - gridRect.left;
                  		const ratio = relativeX / gridRect.width;
                  		const index = Math.floor(ratio * categories.length);
  
                  		if (index < 0 || index >= categories.length) {
                  			hide();
                  			return;
                  		}
  
                  		showForIndex(index);
                  	});
  
                  	svg.addEventListener('mouseleave', hide);
                  }
  
                  function cssVarToValue(name, context = document.documentElement) {
                    const value = getComputedStyle(context).getPropertyValue(name);
  	
                    if (!value) return null;
  	
                  	return value.trim();
                  }
                </script>

if (!data.type) return false;
                  if (data.type === "hs:color-theme-change") {
                    window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                      detail: {
                        target: document.documentElement,
                        value: data.value
                      }
                    }));
                  }
                });
                </script>
                <script>
                  window.addEventListener('load', () => {
                    // Apex Stacked Column Chart
                    (function () {
                      buildChart('#hs-pro-iresscch', (mode) => ({
                        chart: {
                          type: 'bar',
                          height: 240,
                          stacked: true,
                          toolbar: {
                            show: false
                          },
                          zoom: {
                            enabled: false
                          }
                        },
                        series: [
                          {
                            name: 'Leads',
                            data: [5, 8, 3, 2, 6, 4, 7, 1]
                          },
                          {
                            name: 'Users',
                            data: [4, 6, 2, 3, 5, 3, 6, 2]
                          }
                        ],
                        plotOptions: {
                          bar: {
                            horizontal: false,
                            columnWidth: '50%',
                            borderRadius: 3,
                          }
                        },
                        legend: {
                          show: false,
                          position: 'top',
                          horizontalAlign: 'left',
                          offsetX: 0
                        },
                        dataLabels: {
                          enabled: false
                        },
                        stroke: {
                          show: true,
                          width: 0,
                          colors: ['transparent']
                        },
                        xaxis: {
                          categories: [
                            '25 July',
                            '26 July',
                            '27 July',
                            '28 July',
                            '29 July', 
                            '30 July',
                            '31 July',
                            '1 June'
                          ],
                          axisBorder: {
                            show: false
                          },
                          axisTicks: {
                            show: false
                          },
                          crosshairs: {
                            show: false
                          },
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-xaxis-labels'),
                              fontSize: '13px',
                              fontFamily: cssVarToValue('--font-sans'),
                              fontWeight: 400
                            },
                          }
                        },
                        yaxis: {
                          labels: {
                            align: 'left',
                            minWidth: 0,
                            maxWidth: 140,
                            style: {
                              colors: varToColor('--chart-colors-yaxis-labels'),
                              fontSize: '13px',
                              fontFamily: cssVarToValue('--font-sans'),
                              fontWeight: 400
                            },
                            formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                          }
                        },
                        tooltip: {
                          custom: function (props) {
                            const { categories } = props.ctx.opts.xaxis;
                            const { dataPointIndex } = props;

return buildTooltip(props, {
                              title: categories[dataPointIndex],
                              mode,
                              valuePrefix: '',
                              hasCategory: false,
                              hasTextLabel: true,
                              wrapperExtClasses: 'r2dqb',
                              labelDivider: ':',
                              labelExtClasses: 'a5dlz'
                            });
                          }
                        },
                        states: {
                          hover: {
                            filter: {
                              type: 'darken',
                              value: 0.9
                            }
                          }
                        },
                      }), () => ({
                        colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-3')],
                        grid: {
                          borderColor: varToColor('--chart-colors-grid-border')
                        },
                        xaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-xaxis-labels')
                            }
                          }
                        },
                        yaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-yaxis-labels')
                            }
                          }
                        }
                      }), () => ({
                        colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-3-inverse')],
                        grid: {
                          borderColor: varToColor('--chart-colors-grid-border-inverse')
                        },
                        xaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                            }
                          }
                        },
                        yaxis: {
                          labels: {
                            style: {
                              colors: varToColor('--chart-colors-yaxis-labels-inverse'),
                            }
                          }
                        }
                      }));
                    })();
                  });
                </script>
              </body>
            </html>

<div class="flex flex-col u64n3 t8tjb u0h0i dao1f hua1b">
              
              <div class="jvyn5 ehn35">
                <div class="xyt5v x2v9d flex flex-wrap tah6m items-center uqtnu zzhmg">
                  <h2 class="jet6l l2bgt">
                    Your email stats
                  </h2>