Tailwind CSS Spark Charts Blocks

Spark Charts

Tailwind CSS KPI cards with sparkline and compact chart visualizations for quick metric scanning.

KPI Cards with Line Sparklines Pro

Each KPI tile pairs a headline value with a small line spark in the lower half of the card.

<div class="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-5">
      
      <div class="flex flex-col p-5 bg-card border border-card-line shadow-xs rounded-2xl">
        <div class="space-y-4">
          <h2 class="text-xs uppercase text-muted-foreground-1">
            Open deals
          </h2>

<div class="flex flex-col p-5 bg-card border border-card-line shadow-xs rounded-2xl">
        <div class="space-y-4">
          <h2 class="text-xs uppercase text-muted-foreground-1">
            Untouched deals
          </h2>

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

if (!data.type) return false;
        if (data.type === "hs:color-theme-change") {
          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
            detail: {
              target: document.documentElement,
              value: data.value
            }
          }));
        }
      });
    </script>
    <script>
    	window.addEventListener('load', () => {
    	  // Apex Line Charts
    	  (function () {
    	    const lineCharts = [
    	      {
    	        id: '#hs-open-deals-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: 'Open deals',
    	        valuePostfix: ''
    	      }, {
    	        id: '#hs-untouched-deals-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: 'Untouched deals',
    	        valuePostfix: ''
    	      }, {
    	        id: '#hs-calls-today-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: 'Calls today',
    	        valuePostfix: ''
    	      }, {
    	        id: '#hs-leads-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: 'Leads',
    	        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: 'min-w-28',
    	              valuePrefix: '',
    	              labelDivider: ':',
    	              labelExtClasses: 'ms-2',
    	              valuePostfix
    	            });
    	          }
    	        }
    	      }), () => ({
    	        colors: [varToColor('--chart-colors-primary')],
    	      }), () => ({
    	        colors: [varToColor('--chart-colors-primary-inverse')],
    	      }));
    	    });
    	  })();
    	});
    </script>

Open related CRM dashboard page

Line Spark Metric Card Stack Pro

A vertical stack of metric cards repeats the same layout, with a value block beside a compact line spark.

<div>
      
      <div class="p-4 pb-0">
        <div class="pb-2 flex flex-wrap justify-between items-center gap-2 border-b border-dashed border-line-2">
          <h2 class="font-medium text-sm text-foreground">
            Analytics
          </h2>

<a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
            Reports
            <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
          </a>
        </div>
      </div>

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-1 md:divide-x lg:divide-x-0 divide-line-2">
        
        <div class="p-4 border-b border-line-2">
          <div class="flex flex-col">
            
            <div class="relative">
              <div class="pe-20">
                <h3 class="text-sm text-muted-foreground-1">
                  Total posts
                </h3>
        
                <div class="flex items-center gap-2">
                  <p class="text-xl text-foreground">
                    459
                  </p>
                  <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                    <svg class="shrink-0 size-4" 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"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                    7.8%
                  </span>
                </div>
              </div>

<div class="absolute top-1/2 inset-e-0 -translate-y-1/2">
                <button type="button" class="group size-7 lg:size-auto lg:py-1.5 lg:px-2 flex items-center justify-center border border-layer-line text-layer-foreground text-xs rounded-full py-1 hover:bg-primary-50 hover:border-primary-100 hover:text-primary-700 focus:outline-none focus:bg-primary-50 focus:border-primary-100 focus:text-primary-700 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
                  <span class="lg:block hidden max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                    View all
                  </span>
                  <svg class="shrink-0 size-3" 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"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></svg>
                </button>
              </div>
              
            </div>

<div id="hs-pro-abchsm" class="min-h-42.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="flex flex-col">
            
            <div class="relative">
              <div class="pe-20">
                <h3 class="text-sm text-muted-foreground-1">
                  Repeated visitors
                </h3>
        
                <div class="flex items-center gap-2">
                  <p class="text-xl text-foreground">
                    427
                  </p>
                  <span class="flex justify-center items-center gap-x-1 text-sm text-destructive">
                    <svg class="shrink-0 size-4" 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"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                    0.2%
                  </span>
                </div>
              </div>

<div id="hs-pro-abchs1" class="min-h-12.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="flex flex-col">
            
            <div class="relative">
              <div class="pe-20">
                <h3 class="text-sm text-muted-foreground-1">
                  New visitors
                </h3>
        
                <div class="flex items-center gap-2">
                  <p class="text-xl text-foreground">
                    103
                  </p>
                  <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                    <svg class="shrink-0 size-4" 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"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                    9%
                  </span>
                </div>
              </div>

<div id="hs-pro-abchs2" class="min-h-12.5"></div>
          </div>
        </div>
        
      </div>
      
    </div>

if (!data.type) return false;
        if (data.type === "hs:color-theme-change") {
          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
            detail: {
              target: document.documentElement,
              value: data.value
            }
          }));
        }
      });
    </script>
    <script>
    	window.addEventListener('load', () => {
    	  (function () {
    	    buildChart('#hs-pro-abchsm', (mode) => ({
    	      chart: {
    	        height: 170,
    	        type: 'area',
    	        toolbar: {
    	          show: false
    	        },
    	        sparkline: {
    	          enabled: true
    	        },
    	        zoom: {
    	          enabled: false
    	        }
    	      },
    	      series: [
              {
                name: 'Total posts',
                data: [250, 260, 270, 220, 255, 265, 375, 360, 350, 330, 355, 360, 370, 355, 440, 465, 470, 460, 455, 445, 460, 470, 450, 455, 465, 460, 470, 450, 455, 465, 459],
                valuePostfix: ''
              },
              {
                name: 'Total views',
                data: [780, 770, 760, 790, 775, 765, 755, 870, 880, 890, 875, 870, 860, 975, 990, 965, 960, 970, 975, 1085, 1070, 1060, 1080, 1075, 1065, 1070, 1060, 1080, 1075, 1065, 1071],
                valuePostfix: ''
              }
            ],
    	      legend: {
    	        show: false
    	      },
    	      dataLabels: {
    	        enabled: false
    	      },
    	      stroke: {
    	        curve: 'straight',
    	        width: 2
    	      },
    	      fill: {
    	        type: 'gradient',
    	        gradient: {
    	          type: 'vertical',
    	          shadeIntensity: 1,
    	          opacityFrom: 0.2,
    	          opacityTo: 0.8
    	        }
    	      },
    	      xaxis: {
              type: 'category',
              categories: [
                '1 Jun 2025',
                '2 Jun 2025',
                '3 Jun 2025',
                '4 Jun 2025',
                '5 Jun 2025',
                '6 Jun 2025',
                '7 Jun 2025',
                '8 Jun 2025',
                '9 Jun 2025',
                '10 Jun 2025',
                '11 Jun 2025',
                '12 Jun 2025',
                '13 Jun 2025',
                '14 Jun 2025',
                '15 Jun 2025',
                '16 Jun 2025',
                '17 Jun 2025',
                '18 Jun 2025',
                '19 Jun 2025',
                '20 Jun 2025',
                '21 Jun 2025',
                '22 Jun 2025',
                '23 Jun 2025',
                '24 Jun 2025',
                '25 Jun 2025',
                '26 Jun 2025',
                '27 Jun 2025',
                '28 Jun 2025',
                '29 Jun 2025',
                '30 Jun 2025',
                '31 Jun 2025',
              ],
              crosshairs: {
                show: false
              }
            },
    	      tooltip: {
    	        x: {
    	          format: 'MMMM yyyy'
    	        },
    	        y: {
    	          formatter: (value) => `$${value >= 1000 ? `${value / 1000}k` : value}`
    	        },
    	        custom: function (props) {
    	          return buildTooltipCompareTwoAlt(props, {
    	            title: 'Members',
    	            mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-36',
                  isValueDivided: false,
                  valuePrefix: '',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
    	          });
    	        }
    	      },
    	      responsive: [{
    	        breakpoint: 568,
    	        options: {
    	          chart: {
    	            height: 300
    	          },
    	          labels: {
    	            style: {
    	              colors: varToColor('--chart-colors-labels'),
    	              fontSize: '11px',
    	              fontFamily: cssVarToValue('--font-sans'),
    	              fontWeight: 400
    	            },
    	            offsetX: -2,
    	            formatter: (title) => title.slice(0, 3)
    	          },
    	          yaxis: {
    	            labels: {
    	              align: 'left',
    	              minWidth: 0,
    	              maxWidth: 140,
    	              style: {
    	                colors: varToColor('--chart-colors-yaxis-labels'),
    	                fontSize: '11px',
    	                fontFamily: cssVarToValue('--font-sans'),
    	                fontWeight: 400
    	              },
    	              formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
    	            }
    	          },
    	        },
    	      }]
    	    }), () => ({
    	      colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
    	      fill: {
    	        gradient: {
    	          stops: [0, 90, 100]
    	        }
    	      },
    	      grid: {
    	        strokeDashArray: 2,
    	        borderColor: varToColor('--chart-colors-grid-border'),
    					padding: {
    						bottom: 4
    					},
    	      }
    	    }), () => ({
    	      colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
    	      fill: {
    	        gradient: {
    	          stops: [100, 90, 0]
    	        },
    	      },
    	      grid: {
    	        strokeDashArray: 2,
    	        borderColor: varToColor('--chart-colors-grid-border-inverse'),
    					padding: {
    						bottom: 4
    					}
    	      }
    	    }));
    	  })();
    	});
    </script>
    <script>
    	window.addEventListener('load', () => {
    		// Apex Bar Charts
    		(function () {
    		  const barCharts = [
    		    {
    		      id: '#hs-pro-abchs1',
    		      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: 'Repeated visitors',
    		      valuePostfix: ''
    		    }, {
    		      id: '#hs-pro-abchs2',
    		      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: 'New visitors',
    		      valuePostfix: ''
    		    }
    		  ];

barCharts.forEach(({ id, data, name, valuePostfix }) => {
    		    buildChart(id, (mode) => ({
    		      series: [{
    		        name,
    		        data
    		      }],
    		      chart: {
    		        height: 50,
    		        type: 'area',
    		        sparkline: {
    		          enabled: true
    		        }
    		      },
    					stroke: {
    						curve: 'straight',
    						width: 2
    					},
    		      fill: {
    						type: 'gradient',
    						gradient: {
    							type: 'vertical',
    							shadeIntensity: 1,
    							opacityFrom: 0.2,
    							opacityTo: 0.8
    						}
    					},
    		      xaxis: {
    		        type: 'category',
    		        categories: [
    		          '1 Jun 2025',
    		          '2 Jun 2025',
    		          '3 Jun 2025',
    		          '4 Jun 2025',
    		          '5 Jun 2025',
    		          '6 Jun 2025',
    		          '7 Jun 2025',
    		          '8 Jun 2025',
    		          '9 Jun 2025',
    		          '10 Jun 2025',
    		          '11 Jun 2025',
    		          '12 Jun 2025',
    		          '13 Jun 2025',
    		          '14 Jun 2025',
    		          '15 Jun 2025',
    		          '16 Jun 2025',
    		          '17 Jun 2025',
    		          '18 Jun 2025',
    		          '19 Jun 2025',
    		          '20 Jun 2025',
    		          '21 Jun 2025',
    		          '22 Jun 2025',
    		          '23 Jun 2025',
    		          '24 Jun 2025',
    		          '25 Jun 2025',
    		          '26 Jun 2025',
    		          '27 Jun 2025',
    		          '28 Jun 2025',
    		          '29 Jun 2025',
    		          '30 Jun 2025',
    		          '31 Jun 2025',
    		        ],
    		        crosshairs: {
    		          show: false
    		        }
    		      },
              states: {
                hover: {
                  filter: {
                    type: 'darken',
                    value: 0.9
                  }
                }
              },
    		      tooltip: {
    		        custom: function (props) {
    		          const { categories } = props.ctx.opts.xaxis;
    		          const { dataPointIndex } = props;
    		          const title = categories[dataPointIndex].split(' ');
    		          const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
    		            title: newTitle,
    		            mode,
    		            hasTextLabel: true,
    		            wrapperExtClasses: 'min-w-28',
    		            valuePrefix: '',
    		            labelDivider: ':',
    		            labelExtClasses: 'ms-2',
    		            valuePostfix
    		          });
    		        }
    		      }
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-hex')],
    					fill: {
    						gradient: {
    							stops: [0, 90, 100]
    						}
    					},
    					grid: {
    						padding: {
    							bottom: 4
    						},
    					}
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-hex-inverse')],
    					fill: {
    						gradient: {
    							stops: [100, 90, 0]
    						}
    					},
    					grid: {
    						padding: {
    							bottom: 4
    						},
    					}
    		    }));
    	    });
    	  })();
    	});
    </script>

Open related CMS posts page

Sparkline Stat Card Stack Pro

Short stat cards line up one after another, each using a sparkline as a small trailing trend view.

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-1 md:divide-x lg:divide-x-0 divide-line-2">
        
        <div class="p-4 border-b border-line-2">
          <div class="grid grid-cols-2 gap-5">
            <div>
              <h3 class="text-sm text-muted-foreground-1">
                This week
              </h3>
      
              <div class="flex items-center gap-1">
                <p class="font-medium text-sm text-foreground">
                  1202
                </p>
                <span class="flex justify-center items-center text-xs text-destructive">
                  <svg class="shrink-0 size-3.5" 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"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                  15.7%
                </span>
              </div>
            </div>

<div id="hs-pro-asschs1" class="min-h-7.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="grid grid-cols-2 gap-5">
            <div>
              <h3 class="text-sm text-muted-foreground-1">
                Last week
              </h3>
      
              <div class="flex items-center gap-1">
                <p class="font-medium text-sm text-foreground">
                  702
                </p>
                <span class="flex justify-center items-center text-xs text-green-600">
                  <svg class="shrink-0 size-3.5" 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"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                  194%
                </span>
              </div>
            </div>

<div id="hs-pro-asschs2" class="min-h-7.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="grid grid-cols-2 gap-5">
            <div>
              <h3 class="text-sm text-muted-foreground-1">
                Newsletter subscribers
              </h3>
      
              <div class="flex items-center gap-1">
                <p class="font-medium text-sm text-foreground">
                  601
                </p>
                <span class="flex justify-center items-center text-xs text-green-600">
                  <svg class="shrink-0 size-3.5" 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"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                  9
                </span>
              </div>
            </div>

<div id="hs-pro-asschs3" class="min-h-7.5"></div>
          </div>
        </div>
        
      </div>
      
    </div>

Open related CMS posts page

Attached KPI Card Group with Sparklines Pro

Attached cards share borders and spacing, with one sparkline embedded into each metric block.

<div class="grid sm:grid-cols-2 lg:grid-cols-4 border border-card-line shadow-2xs rounded-xl overflow-hidden">
      
      <div class="flex flex-col p-5 bg-card">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Users
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
              <svg class="w-3 h-3" 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="w-full">
          
          <div id="hs-users-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>

<div class="flex flex-col p-5 bg-card sm:border-s border-t sm:border-t-0 border-card-divider">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Avg. click rate
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
              <svg class="w-3 h-3" 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="w-full">
          
          <div id="hs-avg-click-rate-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>

<div class="flex flex-col p-5 bg-card sm:border-s-0 lg:border-s border-t sm:border-t lg:border-t-0 border-card-divider">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Sessions
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
              <svg class="w-3 h-3" 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="w-full">
          
          <div id="hs-sessions-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>

<div class="flex flex-col p-5 bg-card sm:border-s border-t sm:border-t lg:border-t-0 border-card-divider">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Session duration
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
              <svg class="w-3 h-3" 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="w-full">
          
          <div id="hs-session-duration-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>
      
    </div>

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: 'min-w-28',
    		            valuePrefix: '',
    		            labelDivider: ':',
    		            labelExtClasses: 'ms-2',
    		            valuePostfix
    		          });
    		        }
    		      }
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary')]
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-inverse')]
    		    }));
    	    });
    	  })();
    	});
    </script>