Tailwind CSS Bar Charts Blocks

Bar Charts

Tailwind CSS bar and column chart blocks for dashboards, analytics, reporting, and performance tracking interfaces.

Dense Time-Series Bar Chart Pro

Narrow bars pack many time periods into one chart, with axes and spacing tuned for a denser read.

<div class="flex flex-col bg-card border border-card-line shadow-xs rounded-xl overflow-hidden">
      
      <div class="py-3 px-5 flex flex-wrap justify-between items-center gap-2 border-b border-card-header">
        <div class="flex flex-wrap items-center gap-2">
          <h2 class="font-medium text-foreground">
            Top sources
          </h2>
        </div>

<div class="flex flex-wrap items-center gap-2">
          <button type="button" class="py-1.5 px-2 inline-flex items-center gap-1 text-xs rounded-full bg-layer border border-dashed border-line-3 text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
            <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 12h14"/><path d="M12 5v14"/></svg>
            Add filter
          </button>

<button type="button" class="py-1.5 px-2 inline-flex items-center gap-1 text-xs rounded-full bg-layer border border-dashed border-line-3 text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
            <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 12h14"/><path d="M12 5v14"/></svg>
            Add comparison
          </button>      
        </div>
      </div>

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>

const data = Array.from({ length: 120 }, () => Math.floor(Math.random() * 4000) + 1000);

buildChart('#hs-pro-smpc', (mode) => ({
            chart: {
              type: 'bar',
              height: 200,
              toolbar: { show: false },
              zoom: { enabled: false },
              events: {
                mounted: (chart) => fullBarHoverEffect(chart, {
                  shadowClasses: "fill-line-2"
                }),
                updated: (chart) => fullBarHoverEffect(chart, {
                  shadowClasses: "fill-line-2"
                })
              },
            },
            series: [{
              name: 'Total',
              data
            }],
            plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '4px',
                borderRadius: 0,
              }
            },
            legend: { show: false },
            dataLabels: { enabled: false },
            stroke: {
              show: true,
              width: 1,
              colors: ['transparent']
            },
            xaxis: {
              type: 'datetime',
              categories,
              labels: {
                format: 'dd. MMM',
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels'),
                  fontSize: '13px',
                  fontFamily: cssVarToValue('--font-sans'),
                  fontWeight: 400
                }
              },
              axisBorder: { show: false },
              axisTicks: { show: false },
              crosshairs: { show: false }
            },
            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 ? `${Math.round(value / 1000)}k` : value
              }
            },
            tooltip: {
              shared: true,
              intersect: false,
              custom: function (props) {
                const { categories } = props.ctx.opts.xaxis;
                const { dataPointIndex } = props;

return buildTooltip(props, {
                  title: new Date(categories[dataPointIndex]).toLocaleString(),
                  mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-36',
                  isValueDivided: false,
                  valuePrefix: '',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            states: {
              hover: {
                filter: {
                  type: 'darken',
                  value: 0.9
                }
              }
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: { height: 170 },
                plotOptions: {
                  bar: { columnWidth: '2px' }
                },
                stroke: { width: 10 },
                yaxis: {
                  labels: {
                    style: {
                      fontSize: '11px',
                      fontFamily: cssVarToValue('--font-sans'),
                      fontWeight: 400
                    },
                    formatter: (value) => value >= 1000 ? `${Math.round(value / 1000)}k` : value
                  }
                }
              }
            }]
          }), () => ({
            colors: [varToColor('--chart-colors-primary')],
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels'),
                }
              }
            },
            grid: {
              borderColor: varToColor('--chart-colors-grid-border')
            }
          }), () => ({
            colors: [varToColor('--chart-colors-primary-inverse')],
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels-inverse')
                }
              }
            },
            grid: {
              borderColor: varToColor('--chart-colors-grid-border-inverse')
            }
          }));
        })();
      });
    </script>

Open related analytics visitors page

Progress Row Bar Chart Card Pro

Short bars line up against project rows, so status and pace stay in the same card.

<div class="flex flex-col bg-layer border border-layer-line shadow-xs rounded-xl">
      
      <div class="py-3 px-5 border-b border-line-2">
        <div class="flex flex-wrap justify-between items-center gap-y-2 gap-x-5">
          <div>
            <h2 class="font-medium text-foreground">
              Project progress
            </h2>
          </div>

<div class="hs-tooltip inline-block">
            <span class="hs-tooltip-toggle py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-green-100 text-green-700 text-start whitespace-nowrap font-medium text-[13px] rounded-full dark:bg-green-500/10 dark:text-green-400">
              <span class="relative w-2.5 h-px bg-green-700 after:absolute after:top-1/2 after:-inset-e-1 after:size-1.5 after:bg-green-700 after:rounded-full after:-translate-y-1/2 dark:bg-green-400 dark:after:bg-green-400"></span>
              On track
            </span>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
              Everything is progressing as planned
            </span>
          </div>
          
        </div>
      </div>

<div class="py-4 px-5">
        
        <div id="hs-bar-chart" class="min-h-92 -mx-2"></div>
      </div>
      
    </div>

return buildTooltip(props, {
                  title: categories[dataPointIndex],
                  mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-28',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            states: {
              hover: {
                filter: {
                  type: 'darken',
                  value: 0.9
                }
              }
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: {
                  height: 300
                },
                stroke: {
                  width: 8
                },
                responsive: [{
                  breakpoint: 568,
                  options: {
                    chart: {
                      height: 300
                    },
                    stroke: {
                      width: 8
                    },
                    labels: {
                      style: {
                        colors: varToColor('--chart-colors-labels'),
                        fontSize: '11px',
                        fontFamily: cssVarToValue('--font-sans'),
                        fontWeight: 400
                      },
                      offsetX: -2
                    },
                    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')],
            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')],
            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>

Open related project details page

Summary Metrics Bar Chart Card Pro

Budget totals, status text, and one bar chart share a tall card with room for side-by-side amounts.

<div class="border-b border-line-2">
      
      <div class="py-3 px-5 flex flex-wrap justify-between items-center gap-y-2 gap-x-5">
        <h2 class="font-medium text-foreground">
          Overview
        </h2>

<div class="flex justify-end items-center gap-x-2">
          
          <div class="hs-dropdown [--auto-close:inside] [--placement:top-right] inline-flex">
            <button id="hs-pro-dnic" type="button" class="p-2 inline-flex items-center text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              <svg class="shrink-0 me-2 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"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
              Today
              <svg class="shrink-0 ms-1.5 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="m6 9 6 6 6-6"/></svg>
            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-79.5 transition-[opacity,margin] duration opacity-0 hidden z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic">
              
                  
                  <div class="p-3 space-y-0.5">
                    
                    <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                      
                      <div class="col-span-1">
                        <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                          <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="m15 18-6-6 6-6"/></svg>
                        </button>
                      </div>
                      
          
                      
                      <div class="col-span-3 flex justify-center items-center gap-x-1">
                        <div class="relative">
                          <select data-hs-select='{
                              "placeholder": "Select month",
                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                              "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                              "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                            }' class="hidden">
                            <option value="0">January</option>
                            <option value="1">February</option>
                            <option value="2">March</option>
                            <option value="3">April</option>
                            <option value="4">May</option>
                            <option value="5">June</option>
                            <option value="6" selected>July</option>
                            <option value="7">August</option>
                            <option value="8">September</option>
                            <option value="9">October</option>
                            <option value="10">November</option>
                            <option value="11">December</option>
                          </select>
                        </div>

<div class="relative">
                          <select data-hs-select='{
                              "placeholder": "Select year",
                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                              "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                              "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                            }' class="hidden">
                            <option selected>2023</option>
                            <option>2024</option>
                            <option>2025</option>
                            <option>2026</option>
                            <option>2027</option>
                          </select>
                        </div>
                      </div>

<div class="col-span-1 flex justify-end">
                        <button type="button" class=" size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                          <svg class="shrink-0 size-4" 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>
                        </button>
                      </div>
                      
                    </div>

<div class="flex pb-1.5">
                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                        Mo
                      </span>
                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                        Tu
                      </span>
                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                        We
                      </span>
                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                        Th
                      </span>
                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                        Fr
                      </span>
                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                        Sa
                      </span>
                      <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                        Su
                      </span>
                    </div>

<div class="flex">
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          10
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          11
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          12
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          13
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          14
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          15
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          16
                        </button>
                      </div>
                    </div>
                    
      
                    
                    <div class="flex">
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          17
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          18
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          19
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                          20
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          21
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          22
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          23
                        </button>
                      </div>
                    </div>
                    
      
                    
                    <div class="flex">
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          24
                        </button>
                      </div>
                      <div >
                          <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          25
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          26
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          27
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          28
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          29
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          30
                        </button>
                      </div>
                    </div>
                    
      
                    
                    <div class="flex">
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                          31
                        </button>
                      </div>
                      <div >
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          1
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          2
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          3
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          4
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          5
                        </button>
                      </div>
                      <div>
                        <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          6
                        </button>
                      </div>
                    </div>
                    
                  </div>
              
            </div>
          </div>

<button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg border border-transparent bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
            <svg class="hidden sm:block 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 12h14"/><path d="M12 5v14"/></svg>
            Add project
          </button>
        </div>
      </div>
      
    </div>

<div class="py-4 px-5 space-y-4">
      
      <div class="mt-2 pb-1 flex flex-nowrap gap-2 md:gap-3 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
        
        <div class="p-2 whitespace-nowrap bg-layer border border-layer-line rounded-lg">
          
          <div class="flex items-center gap-2">
            <span class="shrink-0 w-1 h-3.5 inline-block bg-chart-primary rounded-full"></span>
            <div class="grow">
              <div class="flex items-center gap-1">
                <span class="text-sm text-muted-foreground-1">
                  Budget:
                </span>
                <span class="font-medium text-sm text-foreground">
                  $25,000
                </span>
              </div>
            </div>
          </div>
          
        </div>

<div class="p-2 whitespace-nowrap bg-layer border border-layer-line rounded-lg">
          
          <div class="flex items-center gap-2">
            <span class="shrink-0 w-1 h-3.5 inline-block bg-chart-3 rounded-full"></span>
            <div class="grow">
              <div class="flex items-center gap-1">
                <span class="text-sm text-muted-foreground-1">
                  Budget left:
                </span>
                <span class="font-medium text-sm text-foreground">
                  $12,420.49
                </span>
              </div>
            </div>
          </div>
          
        </div>

<div class="p-2 whitespace-nowrap bg-layer border border-layer-line rounded-lg">
          
          <div class="flex items-center gap-2">
            <span class="shrink-0 w-1 h-3.5 inline-block bg-chart-10 rounded-full"></span>
            <div class="grow">
              <div class="flex items-center gap-1">
                <span class="text-sm text-muted-foreground-1">
                  Projected:
                </span>
                <span class="font-medium text-sm text-foreground">
                  $12,579.51
                </span>
              </div>
            </div>
          </div>
          
        </div>

<div class="ms-auto">
          
          <div class="hs-tooltip inline-block">
            <span class="hs-tooltip-toggle py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-red-100 text-red-700 text-start whitespace-nowrap font-medium text-[13px] rounded-full dark:bg-red-500/10 dark:text-red-400">
              <span class="relative w-2.5 h-px bg-red-700 after:absolute after:top-1/2 after:-inset-s-1 after:size-1.5 after:bg-red-700 after:rounded-full after:-translate-y-1/2 dark:bg-red-400 dark:after:bg-red-400"></span>
              At risk
            </span>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
              The project is failing to meet key objectives, deadlines, or scope
            </span>
          </div>
          
        </div>
      </div>

<div id="hs-bar-chart" class="min-h-92 -mx-2"></div> 
    </div>

return buildTooltip(props, {
                  title: categories[dataPointIndex],
                  mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-28',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            states: {
              hover: {
                filter: {
                  type: 'darken',
                  value: 0.9
                }
              }
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: {
                  height: 300
                },
                plotOptions: {
                  bar: {
                    columnWidth: '14px'
                  }
                },
                stroke: {
                  width: 8
                },
                responsive: [{
                  breakpoint: 568,
                  options: {
                    chart: {
                      height: 300
                    },
                    plotOptions: {
                      bar: {
                        columnWidth: '14px'
                      }
                    },
                    stroke: {
                      width: 8
                    },
                    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'), varToColor('--chart-colors-chart-3'), varToColor('--chart-colors-chart-10')],
            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'), varToColor('--chart-colors-chart-10-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>

Stacked Column Chart Pro

Stacked columns keep each period in one bar while the segment mix stays visible inside it.

<div class="p-5 flex flex-col bg-card border border-card-line shadow-xs rounded-xl overflow-hidden">
      
      <div class="pb-5 flex flex-wrap justify-between items-center gap-2">
        <div class="flex flex-wrap items-center gap-2">
          <h2 class="font-medium text-foreground">
            Incidents status by creation time
          </h2>
        </div>

<div class="flex flex-wrap items-center gap-2">
          <a class="group inline-flex items-center gap-x-1.5 text-start whitespace-nowrap text-[13px] text-muted-foreground-2 rounded-full underline-offset-2 hover:underline focus:outline-hidden focus:underline" href="#">
            Manage incidents
            <svg class="shrink-0 size-3.5 group-hover:opacity-100 group-focus:opacity-100 transition duration-300" 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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:transition" d="M5 12h14"/><path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:transition" d="m12 5 7 7-7 7"/></svg>
          </a>    
        </div>
      </div>

<div id="hs-pro-ascich" class="min-h-64 -mx-2"></div>

<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        
        <div class="flex items-center gap-2">
          <span class="shrink-0 size-3 inline-block bg-chart-6 rounded-xs"></span>
          <div class="grow">
            <span class="block text-sm text-foreground">
              New (12)
            </span>
          </div>
        </div>

<div class="flex items-center gap-2">
          <span class="shrink-0 size-3 inline-block bg-chart-3 rounded-xs"></span>
          <div class="grow">
            <span class="block text-sm text-foreground">
              Active (24)
            </span>
          </div>
        </div>

<div class="flex items-center gap-2">
          <span class="shrink-0 size-3 inline-block bg-chart-primary rounded-xs"></span>
          <div class="grow">
            <span class="block text-sm text-foreground">
              Closed (80)
            </span>
          </div>
        </div>
        
      </div>
      
    </div>

return buildTooltip(props, {
                  title: categories[dataPointIndex],
                  mode,
                  valuePrefix: '',
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-28',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            states: {
              hover: {
                filter: {
                  type: 'darken',
                  value: 0.9
                }
              }
            },
          }), () => ({
            colors: [varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-3'), varToColor('--chart-colors-primary')],
            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-chart-6-inverse'), varToColor('--chart-colors-chart-3-inverse'), varToColor('--chart-colors-primary-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>

Open related incidents analytics page

Column Chart Card with Header Metrics Pro

A wide chart sits under header totals and filters, with tall columns carrying the main read.

<div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl">
      
      <div class="flex flex-wrap justify-between items-center gap-2">
        <h2 class="inline-block font-semibold text-lg text-foreground">
          Expenses
        </h2>

<div class="hs-dropdown [--placement:bottom-right] [--strategy:absolute] [--flip:false] [--auto-close:inside] relative inline-flex">
          <button id="hs-pro-dachcd" type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
            <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"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
            25 Jul - 25 Aug
            <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="m6 9 6 6 6-6"/></svg>
          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-79.5 sm:w-159 transition-[opacity,margin] duration opacity-0 hidden inset-s-5 z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dachcd">
            
              
              <div class="sm:flex">
                
                <div class="p-3 space-y-0.5">
                  
                  <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                    
                    <div class="col-span-1">
                      <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                        <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="m15 18-6-6 6-6"/></svg>
                      </button>
                    </div>
                    
          
                    
                    <div class="col-span-3 flex justify-center items-center gap-x-1">
                      <div class="relative">
                        <select data-hs-select='{
                            "placeholder": "Select month",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                            "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                          }' class="hidden">
                          <option value="0">January</option>
                          <option value="1">February</option>
                          <option value="2">March</option>
                          <option value="3">April</option>
                          <option value="4">May</option>
                          <option value="5">June</option>
                          <option value="6" selected>July</option>
                          <option value="7">August</option>
                          <option value="8">September</option>
                          <option value="9">October</option>
                          <option value="10">November</option>
                          <option value="11">December</option>
                        </select>
                      </div>

<div class="relative">
                        <select data-hs-select='{
                            "placeholder": "Select year",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                            "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                          }' class="hidden">
                          <option selected>2023</option>
                          <option>2024</option>
                          <option>2025</option>
                          <option>2026</option>
                          <option>2027</option>
                        </select>
                      </div>
                    </div>

<div class="col-span-1 flex justify-end">
                      <button type="button" class="opacity-0 pointer-events-none size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                        <svg class="shrink-0 size-4" 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>
                      </button>
                    </div>
                    
                  </div>

<div class="flex pb-1.5">
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Mo
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Tu
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      We
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Th
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Fr
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Sa
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Su
                    </span>
                  </div>

<div class="flex">
                    <div >
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        10
                      </button>
                    </div>
                    <div >
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        11
                      </button>
                    </div>
                    <div >
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        12
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        13
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        14
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        15
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        16
                      </button>
                    </div>
                  </div>
                  
      
                  
                  <div class="flex">
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        17
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        18
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        19
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        20
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        21
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        22
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        23
                      </button>
                    </div>
                  </div>
                  
      
                  
                  <div class="flex">
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        24
                      </button>
                    </div>
                    <div class="bg-surface rounded-s-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                        25
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        26
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        27
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        28
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        29
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        30
                      </button>
                    </div>
                  </div>
                  
      
                  
                  <div class="flex">
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        31
                      </button>
                    </div>
                    <div class="bg-linear-to-r from-surface">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        1
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        2
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        3
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        4
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        5
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        6
                      </button>
                    </div>
                  </div>
                  
                </div>

<div class="p-3 space-y-0.5">
                  
                  <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                    
                    <div class="col-span-1">
                      <button type="button" class="opacity-0 pointer-events-none size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                        <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="m15 18-6-6 6-6"/></svg>
                      </button>
                    </div>
                    
          
                    
                    <div class="col-span-3 flex justify-center items-center gap-x-1">
                      <div class="relative">
                        <select data-hs-select='{
                            "placeholder": "Select month",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                            "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                          }' class="hidden">
                          <option value="0">January</option>
                          <option value="1">February</option>
                          <option value="2">March</option>
                          <option value="3">April</option>
                          <option value="4">May</option>
                          <option value="5">June</option>
                          <option value="6" selected>July</option>
                          <option value="7">August</option>
                          <option value="8">September</option>
                          <option value="9">October</option>
                          <option value="10">November</option>
                          <option value="11">December</option>
                        </select>
                      </div>

<div class="relative">
                        <select data-hs-select='{
                            "placeholder": "Select year",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                            "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>"
                          }' class="hidden">
                          <option selected>2023</option>
                          <option>2024</option>
                          <option>2025</option>
                          <option>2026</option>
                          <option>2027</option>
                        </select>
                      </div>
                    </div>

<div class="col-span-1 flex justify-end">
                      <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                        <svg class="shrink-0 size-4" 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>
                      </button>
                    </div>
                    
                  </div>

<div class="flex pb-1.5">
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Mo
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Tu
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      We
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Th
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Fr
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Sa
                    </span>
                    <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                      Su
                    </span>
                  </div>

<div class="flex">
                    <div class="bg-linear-to-l from-surface">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        31
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                        1
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                        2
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                        3
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                        4
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        5
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        6
                      </button>
                    </div>
                  </div>

<div class="flex">
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        7
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        8
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        9
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        10
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        11
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        12
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        13
                      </button>
                    </div>
                  </div>
                  
      
                  
                  <div class="flex">
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        14
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        15
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        16
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        17
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        18
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        19
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        20
                      </button>
                    </div>
                  </div>
                  
      
                  
                  <div class="flex">
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        21
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        22
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        23
                      </button>
                    </div>
                    <div class="bg-surface first:rounded-s-full last:rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        24
                      </button>
                    </div>
                    <div class="bg-surface rounded-e-full">
                      <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                        25
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        26
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        27
                      </button>
                    </div>
                  </div>
                  
      
                  
                  <div class="flex">
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        28
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        29
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        30
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                        31
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        1
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        2
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        3
                      </button>
                    </div>
                  </div>
                  
      
                  
                  <div class="flex">
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        4
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        5
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        6
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        7
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        8
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        9
                      </button>
                    </div>
                    <div>
                      <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        10
                      </button>
                    </div>
                  </div>
                  
                </div>
              </div>

<div class="flex items-center py-3 px-4 justify-end border-t border-dropdown-divider gap-x-2">
                  
                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                    Cancel
                  </button>
                  <button type="button" class="py-2 px-3  inline-flex justify-center items-center gap-x-2 text-xs font-medium rounded-lg border-[1.5px] border-transparent bg-primary text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
                    Apply
                  </button>
                </div>
                
            
          </div>
        </div>
        
      </div>

<div id="hs-wide-bar-chart-columns" class="min-h-72 mt-2 -ms-4 -mb-4"></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', () => {
    	  // Apex Orders Bar Chart
    	  (function () {
    	    buildChart('#hs-wide-bar-chart-columns', (mode) => ({ 
    	      chart: {
    	        type: 'bar',
    	        height: 270,
    	        toolbar: {
    	          show: false
    	        },
    	        zoom: {
    	          enabled: false
    	        }
    	      },
    	      series: [
    	        {
    	          name: 'Expenses',
    	          data: [20000, 30000, 29000, 35000, 15000, 32000, 28000, 15000, 20000, 31000, 18000, 34000]
    	        },
    	      ],
    	      plotOptions: {
    	        bar: {
    	          horizontal: false,
    	          columnWidth: '40px',
    	          borderRadius: 2,
    	        }
    	      },
    	      legend: {
    	        show: false
    	      },
    	      dataLabels: {
    	        enabled: false
    	      },
    	      stroke: {
    	        show: true,
    	        width: 10,
    	        colors: ['transparent']
    	      },
    	      xaxis: {
    	        categories: [
    	          'January', 
    	          'February',
    	          'March',
    	          'April', 
    	          'May', 
    	          'June', 
    	          'July', 
    	          'August', 
    	          'September', 
    	          'October', 
    	          'November', 
    	          'December'
    	        ],
    	        axisBorder: {
    	          show: false
    	        },
    	        axisTicks: {
    	          show: false
    	        },
    	        crosshairs: {
    	          show: false
    	        },
    	        labels: {
    	          style: {
    	            colors: varToColor('--chart-colors-xaxis-labels'),
    	            fontSize: '13px',
    	            fontFamily: 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: '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,
    	            hasCategory: false,
    	            hasTextLabel: true,
    	            wrapperExtClasses: 'min-w-36',
    	            isValueDivided: false,
    	            valuePrefix: '',
    	            labelDivider: ':',
    	            labelExtClasses: 'ms-2'
    	          });
    	        }
    	      },
    	      states: {
    	        hover: {
    	          filter: {
    	            type: 'darken',
    	            value: 0.9
    	          }
    	        }
    	      },
    	      responsive: [{
    	        breakpoint: 568,
    	        options: {
    	          chart: {
    	            height: 300
    	          },
    	          plotOptions: {
    	            bar: {
    	              columnWidth: '14px'
    	            }
    	          },
    	          stroke: {
    	            width: 10
    	          },
    	          responsive: [{
    	            breakpoint: 568,
    	            options: {
    	              chart: {
    	                height: 300
    	              },
    	              plotOptions: {
    	                bar: {
    	                  columnWidth: '14px'
    	                }
    	              },
    	              stroke: {
    	                width: 10
    	              },
    	              labels: {
    	                style: {
    	                  colors: varToColor('--chart-colors-xaxis-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')],
    	      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')],
    	      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>

Open related work management dashboard

Negative-Value Bar Chart Free

Bars extend above and below one baseline, so gains and losses stay in the same frame.

<div class="p-4 flex flex-col border-b border-line-2">
      
      <div>
        <div class="relative inline-block">
          <select id="hs-pro-select-revenue" data-hs-select='{
              "placeholder": "Select option...",
              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative -ms-2.5 py-1.5 ps-2.5 pe-6 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-sm text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
              "dropdownClasses": "mt-2 z-50 w-40 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
              "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-[13px] text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>",
              "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" 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=\"m6 9 6 6 6-6\"/></svg></div>"
            }' class="hidden">
            <option value="">Choose</option>
            <option selected>Members</option>
            <option>Posts</option>
            <option>Views</option>
          </select>
        </div>
      </div>

<div class="mt-2 grid grid-cols-2 gap-2">
        <div class="flex flex-col">
          <div class="flex items-center gap-2">
            <span class="block font-medium text-xl text-foreground">
              22,900
            </span>
            <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>
              0.2%
            </span>
          </div>
          <div class="flex items-center gap-1.5">
            <span class="shrink-0 w-3 h-1.5 inline-block bg-chart-primary rounded-xs"></span>
            <div class="grow">
              <span class="block text-sm text-muted-foreground-1">
                Free
              </span>
            </div>
          </div>
        </div>

<div id="hs-pro-anvpch" class="min-h-81 "></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-anvpch', (mode) => ({
            chart: {
              height: 300,
              type: 'bar',
              stacked: true,
              toolbar: {
                show: false
              },
              zoom: {
                enabled: false
              },
            },
            series: [
              {
                name: 'Paid members',
                data: [16600, 20000, 15800, 14200, 17200, 22800, 21800, 29400, 22600, 22900]
              },
              {
                name: 'Free members',
                data: [-10900, -15800, -23700, -13500, -6750, -17900, -18700, -17300, -17100, -24300]
              }
            ],
            fill: {
              type: ['pattern', 'solid'],
              pattern: {
                style: ['slantedLines', 'none'],
                width: 6,
                height: 6,
                strokeWidth: 2
              }
            },
            plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '70%',
              }
            },
            legend: {
              show: false,
            },
            dataLabels: {
              enabled: false
            },
            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',
              ],
              labels: {
                rotate: -45,
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels'),
                  fontSize: '13px',
                  fontFamily: cssVarToValue('--font-sans'),
                  fontWeight: 400
                }
              },
              axisTicks: {
                show: false
              },
              axisBorder: {
                show: false
              }
            },
            yaxis: {
              labels: {
                align: 'right',
                minWidth: 0,
                maxWidth: 140,
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels'),
                  fontSize: '12px',
                  fontFamily: cssVarToValue('--font-sans'),
                  fontWeight: 400
                },
                formatter: (value) => `${Math.abs(value) >= 1000 ? `${Math.abs(value / 1000)}k` : Math.abs(value)}`
              }
            },
            tooltip: {
              x: {
                format: 'MMMM yyyy'
              },
              y: {
                formatter: (value) => {
                  const abs = Math.abs(value);
                  return `$${abs >= 1000 ? `${abs / 1000}k` : abs}`;
                }
              },
              custom: function (props) {
                return buildTooltipCompareTwo(props, {
                  title: 'Members',
                  mode,
                  hasCategory: false,
                  hasTextLabel: true,
                  wrapperExtClasses: 'min-w-36',
                  isValueDivided: false,
                  valuePrefix: '',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2'
                });
              }
            },
            grid: {
              strokeDashArray: 2,
              borderColor: mode === 'dark' ? varToColor('--chart-colors-grid-border-inverse') : varToColor('--chart-colors-grid-border')
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: {
                  height: 280
                },
                xaxis: {
                  labels: {
                    show: false,
                  },
                  axisBorder: {
                    show: false,
                  }
                },
                yaxis: {
                  labels: {
                    style: {
                      colors: varToColor('--chart-colors-yaxis-labels'),
                      fontSize: '11px',
                      fontFamily: cssVarToValue('--font-sans'),
                      fontWeight: 400
                    },
                    formatter: (value) => `${Math.abs(value) >= 1000 ? `${Math.abs(value / 1000)}k` : Math.abs(value)}`
                  }
                },
                tooltip: {
                  custom: function (props) {
                    const { w, dataPointIndex } = props;
                    const { categories } = w.config.xaxis;

return buildTooltipCompareTwo(props, {
                      title: `Members <br> <span class="text-xs">${categories[dataPointIndex]}</span>`,
                      mode,
                      hasCategory: false,
                      hasTextLabel: true,
                      wrapperExtClasses: 'min-w-36',
                      isValueDivided: false,
                      valuePrefix: '',
                      labelDivider: ':',
                      labelExtClasses: 'ms-2'
                    });
                  }
                },
              }
            }]
          }), () => ({
            colors: [varToColor('--chart-colors-chart-3'), varToColor('--chart-colors-primary')],
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels'),
                }
              }
            },
          }), () => ({
            colors: [varToColor('--chart-colors-chart-3-inverse'), varToColor('--chart-colors-primary-inverse')],
            xaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-xaxis-labels-inverse'),
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: varToColor('--chart-colors-yaxis-labels-inverse')
                }
              }
            },
          }));
        })();
      });
    </script>

Open related CMS admin dashboard

Multi-Series Bar Chart Free

Grouped bars repeat across each category, making series-to-series comparison the main read.

<div class="p-4 md:p-5 min-h-102.5 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
      
      <div class="flex flex-wrap justify-between items-center gap-2">
        <div>
          <h2 class="text-sm text-muted-foreground-1">
            Income
          </h2>
          <p class="text-xl sm:text-2xl font-medium text-foreground">
            $126,238.49
          </p>
        </div>

return buildTooltip(props, {
                    title: newTitle,
                    mode,
                    hasTextLabel: true,
                    wrapperExtClasses: "min-w-28",
                    labelDivider: ":",
                    labelExtClasses: "ms-2",
                  });
                },
              },
              responsive: [
                {
                  breakpoint: 568,
                  options: {
                    chart: {
                      height: 300,
                    },
                    plotOptions: {
                      bar: {
                        columnWidth: "14px",
                      },
                    },
                    stroke: {
                      width: 8,
                    },
                    labels: {
                      style: {
                        colors: varToColor('--chart-colors-labels'),
                        fontSize: "11px",
                        fontFamily: "Inter, ui-sans-serif",
                        fontWeight: 400,
                      },
                      offsetX: -2,
                      formatter: (title) => title.slice(0, 3),
                    },
                    yaxis: {
                      labels: {
                        align: "left",
                        minWidth: 0,
                        maxWidth: 140,
                        style: {
                          colors: varToColor('--chart-colors-yaxis-labels'),
                          fontSize: "11px",
                          fontFamily: "Inter, ui-sans-serif",
                          fontWeight: 400,
                        },
                        formatter: (value) =>
                          value >= 1000 ? `${value / 1000}k` : value,
                      },
                    },
                  },
                },
              ],
            }),
            () => ({
              colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-10')],
              grid: {
                borderColor: varToColor('--chart-colors-grid-border'),
              },
            }),
            () => ({
              colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-10-inverse')],
              grid: {
                borderColor: varToColor('--chart-colors-grid-border-inverse'),
              },
            })
          );
        })();
      });
    </script>

Bar Chart Card with Date Range Pro

A large bar plot sits above range controls, with totals and annotations kept around the chart frame.

<div class="h-full p-4 relative flex flex-col gap-y-3 bg-inverse/10 border border-line-inverse/30 backdrop-blur-lg rounded-2xl">
      
      <div class="flex flex-wrap justify-between items-center gap-3">
        <div>
          <h2 class="font-medium text-foreground-inverse">
            Power Consuption
          </h2>
          <p class="text-sm text-foreground-inverse/70">
            History - Last 12 months
          </p>
        </div>

<div id="hs-pro-smpc" class="min-h-50 w-full mt-auto -mx-2"></div>
    </div>

return buildTooltip(props, {
                  title: newTitle,
                  mode,
                  valuePrefix: '',
                  hasTextLabel: true,
                  markerClasses: 'hidden!',
                  wrapperExtClasses: 'min-w-28',
                  labelDivider: ':',
                  labelExtClasses: 'ms-2',
                  thousandsShortName: 'kWh'
                });
              }
            },
            responsive: [{
              breakpoint: 568,
              options: {
                chart: {
                  height: 300
                },
                plotOptions: {
                  bar: {
                    columnWidth: '14px',
                    borderRadius: 3
                  }
                },
                stroke: {
                  width: 8
                },
                labels: {
                  style: {
                    colors: 'rgba(255,255,255,.6)',
                    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: 'rgba(255,255,255,.6)',
                      fontSize: '11px',
                      fontFamily: cssVarToValue('--font-sans'),
                      fontWeight: 400
                    },
                    formatter: (value) => value >= 1000 ? `${value / 1000}kWh` : value
                  }
                },
              },
            }]
          }), () => ({
            colors: [varToColor('--chart-colors-chart-inverse')],
            xaxis: {
              labels: {
                style: {
                  colors: 'rgba(255,255,255,.6)',
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: 'rgba(255,255,255,.6)',
                }
              }
            },
            grid: {
              borderColor: 'rgba(255,255,255,.2)',
            }
          }), () => ({
            colors: [varToColor('--chart-colors-chart-inverse')],
            xaxis: {
              labels: {
                style: {
                  colors: 'rgba(255,255,255,.6)',
                }
              }
            },
            yaxis: {
              labels: {
                style: {
                  colors: 'rgba(255,255,255,.6)',
                }
              }
            },
            grid: {
              borderColor: 'rgba(255,255,255,.2)',
            }
          }));
        })();
      });
    </script>

Open related smart home dashboard page