https://www.visualizing.org/assets/StackedBarChart-DXWUgnPm.js

1import{j as e,L as s}from"./vendor-react-CVijXI0n.js";import{S as n,b as c,h as l,a as d}from"./index-D0o2Sutv.js";import{C as h}from"./ChartBreadcrumb-BOBTh6lg.js";import{C as x,b as m}from"./ChartFAQ-DwXxlpIj.js";const a="https://www.visualizing.org",i=[{q:"What is a stacked bar chart?",a:"A stacked bar chart is a variation of the standard bar chart where each bar is divided into segments stacked on top of each other. Each segment represents a sub-category, and the total bar height shows the combined value. This lets you see both the whole (total bar height) and the parts (individual segment sizes) simultaneously."},{q:"When should you use a stacked bar chart?",a:"Use a stacked bar chart when you want to show both totals and composition across categories. It also works well when comparing how sub-categories contribute to the whole in each group, and when you have 2–5 sub-categories per bar (segments stay readable)."},{q:"When should you avoid a stacked bar chart?",a:"Avoid a stacked bar chart when precise comparison between middle segments is critical — they don't share a baseline. It is also a poor fit when you have more than 5–6 sub-categories — the stack becomes unreadable, or when you only need to compare totals — a simple bar chart is cleaner."},{q:"How is a stacked bar chart different from a bar chart?",a:"Both a stacked bar chart and a bar chart can look similar at first glance, but they answer different questions. Reach for a stacked bar chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a bar chart when its particular strengths better fit your data and audience."},{q:"Is a stacked bar chart suitable for dashboards?",a:"Yes — a stacked bar chart can work well in dashboards as long as the panel is large enough for readers to perceive the encoded values, has a clear title, and includes the legend or axis labels needed to interpret it."},{q:"What category of chart is a stacked bar chart?",a:"Stacked Bar Chart belongs to the Part-to-whole family of charts. Charts in that family are designed to answer the same kind of question, so they often work as alternatives when one doesn't quite fit your data."}],p=m("/stacked-bar-chart",i),b={"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":`${a}/stacked-bar-chart/#webpage`,url:`${a}/stacked-bar-chart`,name:"Stacked Bar Chart — The Definitive Guide",description:"Learn what a stacked bar chart is, how to read one step by step, when to use stacked bar charts vs grouped bars, and common mistakes to avoid.",isPartOf:{"@id":`${a}/#website`},breadcrumb:{"@id":`${a}/stacked-bar-chart/#breadcrumb`},mainEntity:{"@id":`${a}/stacked-bar-chart/#article`},inLanguage:"en"},c({slug:"/stacked-bar-chart",caption:"Example stacked bar chart",width:620,height:280}),{"@type":["Article","LearningResource"],"@id":`${a}/stacked-bar-chart/#article`,mainEntityOfPage:{"@id":`${a}/stacked-bar-chart/#webpage`},headline:"Stacked Bar Chart: Definition, How to Read, and When to Use",description:"A complete reference guide to stacked bar charts — what they are, how to interpret them, when to use them, and common mistakes to avoid.",image:{"@id":l("/stacked-bar-chart")},datePublished:"2025-03-15",dateModified:"2026-04-07",publisher:{"@id":`${a}/#organization`},inLanguage:"en",educationalLevel:"beginner",learningResourceType:"reference",teaches:["How to read and interpret stacked bar charts","When to use stacked bar charts for data visualization","Common stacked bar chart mistakes and how to avoid them"],competencyRequired:"Basic understanding of bar charts and proportions",timeRequired:"PT10M",isAccessibleForFree:!0,audience:{"@type":"EducationalAudience",educationalRole:"student"},about:{"@id":`${a}/stacked-bar-chart/#term`},keywords:["stacked bar chart","stacked bar graph","data visualization","part-to-whole","composition"]},{"@type":"DefinedTerm","@id":`${a}/stacked-bar-chart/#term`,name:"Stacked Bar Chart",description:"A bar chart variant where bars for multiple sub-categories are stacked on top of each other, showing both individual values and the total. Each segment's height represents its contribution to the overall bar.",inDefinedTermSet:{"@id":`${a}/chart-types/#termset`},termCode:"stacked-bar-chart",url:`${a}/stacked-bar-chart`,sameAs:"https://en.wikipedia.org/wiki/Bar_chart#Grouped_and_stacked"},{"@type":"DefinedTermSet","@id":`${a}/chart-types/#termset`,name:"Data Visualization Chart Types",url:`${a}/chart-types`},d("/stacked-bar-chart"),p]},g=[{id:"the-chart",label:"The chart"},{id:"what-is-it",label:"What is it?"},{id:"anatomy",label:"Anatomy"},{id:"when-to-use",label:"When to use it"},{id:"how-to-read",label:"How to read it"},{id:"common-mistakes",label:"Common mistakes"},{id:"real-world-examples",label:"Real-world examples"},{id:"key-facts",label:"Quick reference"},{id:"variations",label:"Variations"},{id:"faqs",label:"FAQs"},{id:"related-charts",label:"Related charts"}];function k(){return e.jsxs(e.Fragment,{children:[e.jsx(n,{title:"Stacked Bar Chart: What It Is, How To Read & Examples",description:"Stacked Bar Chart reference: definition, when to use it, how to read it, real examples, common mistakes, and tools (Excel, Tableau, D3) to build one.",path:"/stacked-bar-chart",ogType:"article",jsonLd:[b]}),e.jsx(h,{slug:"/stacked-bar-chart"}),e.jsxs("div",{className:"max-w-[1100px] mx-auto px-6 md:px-12",children:[e.jsxs("div",{className:"py-[56px] pb-[48px] border-b border-[var(--border-color)]",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-5",children:[e.jsx("span",{className:"font-mono text-[10px] tracking-[0.12em] uppercase bg-[var(--accent-light)] text-[var(--accent-color)] px-[10px] py-[4px] rounded-[3px] font-medium",children:"Part-to-whole"}),e.jsx("span",{className:"font-mono text-[10px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-[4px] rounded-[3px]",children:"Beginner"})]}),e.jsx("h1",{className:"font-serif text-[42px] md:text-[52px] font-normal tracking-[-0.025em] leading-[1.1] text-[var(--ink)] mb-4",children:"Stacked Bar Chart"}),e.jsx("p",{className:"text-[17px] md:text-[19px] font-light text-[var(--ink-muted)] leading-[1.6] max-w-[640px]",children:"A bar chart where segments are stacked on top of each other — showing both the total and how each part contributes to it. Perfect for comparing composition across categories."})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-[1fr_280px] gap-16 pt-12 items-start",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"the-chart",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 01 — The chart"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"What it looks like"}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8 mb-2",children:[e.jsxs("div",{className:"font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)] mb-6 flex justify-between items-center",children:[e.jsxs("span",{children:["Example — ",e.jsx("em",{className:"not-italic text-[var(--accent-color)] font-medium",children:"Revenue by region and product"})]}),e.jsx("span",{children:"FY 2025"})]}),e.jsxs("svg",{viewBox:"0 0 620 300",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("line",{x1:"72",y1:"20",x2:"72",y2:"250",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.10"}),e.jsx("line",{x1:"72",y1:"70",x2:"580",y2:"70",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.08",strokeDasharray:"4,3"}),e.jsx("line",{x1:"72",y1:"115",x2:"580",y2:"115",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.08",strokeDasharray:"4,3"}),e.jsx("line",{x1:"72",y1:"160",x2:"580",y2:"160",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.08",strokeDasharray:"4,3"}),e.jsx("line",{x1:"72",y1:"205",x2:"580",y2:"205",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.08",strokeDasharray:"4,3"}),e.jsx("line",{x1:"72",y1:"250",x2:"580",y2:"250",stroke:"#1a1a18",strokeWidth:"1",strokeOpacity:"0.15"}),e.jsx("text",{x:"62",y:"24",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"$50M"}),e.jsx("text",{x:"62",y:"73",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"$40M"}),e.jsx("text",{x:"62",y:"118",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"$30M"}),e.jsx("text",{x:"62",y:"163",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"$20M"}),e.jsx("text",{x:"62",y:"208",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"$10M"}),e.jsx("text",{x:"62",y:"253",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"$0"}),e.jsx("rect",{x:"100",y:"42",width:"80",height:"118",rx:"3",fill:"#c94a2e"}),e.jsx("rect",{x:"100",y:"42",width:"80",height:"46",rx:"3",fill:"#f5ede9"}),e.jsx("rect",{x:"100",y:"42",width:"80",height:"18",rx:"3",fill:"#e8c4b8"}),e.jsx("text",{x:"140",y:"268",textAnchor:"middle",fill:"#1a1a18",fontSize:"11",fontFamily:"DM Mono, monospace",fontWeight:"500",children:"N. America"}),e.jsx("rect",{x:"220",y:"78",width:"80",height:"172",rx:"3",fill:"#c94a2e"}),e.jsx("rect",{x:"220",y:"78",width:"80",height:"60",rx:"3",fill:"#f5ede9"}),e.jsx("rect",{x:"220",y:"78",width:"80",height:"24",rx:"3",fill:"#e8c4b8"}),e.jsx("text",{x:"260",y:"268",textAnchor:"middle",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"Europe"}),e.jsx("rect",{x:"340",y:"124",width:"80",height:"126",rx:"3",fill:"#c94a2e"}),e.jsx("rect",{x:"340",y:"124",width:"80",height:"40",rx:"3",fill:"#f5ede9"}),e.jsx("rect",{x:"340",y:"124",width:"80",height:"16",rx:"3",fill:"#e8c4b8"}),e.jsx("text",{x:"380",y:"268",textAnchor:"middle",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"APAC"}),e.jsx("rect",{x:"460",y:"170",width:"80",height:"80",rx:"3",fill:"#c94a2e"}),e.jsx("rect",{x:"460",y:"170",width:"80",height:"28",rx:"3",fill:"#f5ede9"}),e.jsx("rect",{x:"460",y:"170",width:"80",height:"10",rx:"3",fill:"#e8c4b8"}),e.jsx("text",{x:"500",y:"268",textAnchor:"middle",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"LATAM"}),e.jsx("rect",{x:"100",y:"286",width:"10",height:"10",rx:"2",fill:"#c94a2e"}),e.jsx("text",{x:"116",y:"295",fill:"#6b6b67",fontSize:"11",fontFamily:"DM Mono, monospace",children:"SaaS"}),e.jsx("rect",{x:"180",y:"286",width:"10",height:"10",rx:"2",fill:"#f5ede9"}),e.jsx("text",{x:"196",y:"295",fill:"#6b6b67",fontSize:"11",fontFamily:"DM Mono, monospace",children:"Services"}),e.jsx("rect",{x:"280",y:"286",width:"10",height:"10",rx:"2",fill:"#e8c4b8"}),e.jsx("text",{x:"296",y:"295",fill:"#6b6b67",fontSize:"11",fontFamily:"DM Mono, monospace",children:"Hardware"})]}),e.jsx("p",{className:"text-[13px] text-[var(--ink-muted)] text-center italic mt-4",children:"A stacked bar chart showing revenue by region, broken down by product line. Each bar’s total height represents overall regional revenue, while segments show each product’s contribution."})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"what-is-it",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 02 — Definition"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"What is a stacked bar chart?"}),e.jsxs("div",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:[e.jsxs("p",{children:["A stacked bar chart is a variation of the standard bar chart where each bar is divided into segments stacked on top of each other. Each segment represents a sub-category, and the total bar height shows the combined value. This lets you see both ",e.jsx("strong",{className:"font-medium",children:"the whole"})," (total bar height) and ",e.jsx("strong",{className:"font-medium",children:"the parts"})," (individual segment sizes) simultaneously."]}),e.jsx("p",{className:"mt-[18px]",children:"Unlike a grouped bar chart (where sub-categories sit side by side), stacking emphasizes the total while still showing composition. The trade-off is that only the bottom segment sits on a common baseline — upper segments are harder to compare precisely because they start at different heights."}),e.jsx("p",{className:"mt-[18px]",children:"Stacked bar charts are a workhorse of business reporting, survey analysis, and any sce

1nario where you need to answer two questions at once: “How big is each group?” and “What makes up each group?”"})]}),e.jsx("div",{className:"bg-[var(--accent-light)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-4 mt-6",children:e.jsxs("p",{className:"text-[14px] text-[var(--ink)] leading-[1.65] font-light",children:[e.jsx("strong",{className:"font-medium text-[var(--accent-color)]",children:"Origin:"})," Stacked bar charts evolved naturally from bar charts, which were invented by William Playfair in 1786. The stacked variant emerged in the 19th century as statisticians began exploring ways to show composition within comparisons. Florence Nightingale used stacked and segmented charts in her famous 1858 report on mortality in the Crimean War."]})})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"anatomy",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 03 — Anatomy"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Parts of a stacked bar chart"}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8",children:[e.jsxs("svg",{viewBox:"0 0 580 260",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("line",{x1:"80",y1:"20",x2:"80",y2:"215",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.15"}),e.jsx("line",{x1:"80",y1:"215",x2:"540",y2:"215",stroke:"#1a1a18",strokeWidth:"1.5",strokeOpacity:"0.15"}),e.jsx("line",{x1:"80",y1:"75",x2:"540",y2:"75",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.08",strokeDasharray:"4,3"}),e.jsx("line",{x1:"80",y1:"125",x2:"540",y2:"125",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.08",strokeDasharray:"4,3"}),e.jsx("line",{x1:"80",y1:"175",x2:"540",y2:"175",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.08",strokeDasharray:"4,3"}),e.jsx("rect",{x:"110",y:"115",width:"72",height:"100",rx:"2",fill:"#c94a2e"}),e.jsx("rect",{x:"110",y:"65",width:"72",height:"50",rx:"2",fill:"#e8c4b8"}),e.jsx("rect",{x:"110",y:"45",width:"72",height:"20",rx:"2",fill:"#f5ede9",stroke:"#e8d5cf",strokeWidth:"0.5"}),e.jsx("rect",{x:"230",y:"135",width:"72",height:"80",rx:"2",fill:"#c94a2e"}),e.jsx("rect",{x:"230",y:"95",width:"72",height:"40",rx:"2",fill:"#e8c4b8"}),e.jsx("rect",{x:"230",y:"75",width:"72",height:"20",rx:"2",fill:"#f5ede9",stroke:"#e8d5cf",strokeWidth:"0.5"}),e.jsx("rect",{x:"350",y:"145",width:"72",height:"70",rx:"2",fill:"#c94a2e"}),e.jsx("rect",{x:"350",y:"105",width:"72",height:"40",rx:"2",fill:"#e8c4b8"}),e.jsx("rect",{x:"350",y:"85",width:"72",height:"20",rx:"2",fill:"#f5ede9",stroke:"#e8d5cf",strokeWidth:"0.5"}),e.jsx("text",{x:"146",y:"232",textAnchor:"middle",fill:"#1a1a18",fontSize:"11",fontFamily:"DM Mono, monospace",fontWeight:"500",children:"A"}),e.jsx("text",{x:"266",y:"232",textAnchor:"middle",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"B"}),e.jsx("text",{x:"386",y:"232",textAnchor:"middle",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"C"}),e.jsx("text",{x:"70",y:"78",textAnchor:"end",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"75"}),e.jsx("text",{x:"70",y:"128",textAnchor:"end",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"50"}),e.jsx("text",{x:"70",y:"178",textAnchor:"end",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"25"}),e.jsx("text",{x:"70",y:"218",textAnchor:"end",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"0"}),e.jsx("line",{x1:"190",y1:"165",x2:"220",y2:"175",stroke:"#c94a2e",strokeWidth:"1.2"}),e.jsx("circle",{cx:"222",cy:"177",r:"4",fill:"#c94a2e"}),e.jsx("text",{x:"230",y:"180",fill:"#c94a2e",fontSize:"10",fontFamily:"DM Mono, monospace",children:"A"}),e.jsx("line",{x1:"190",y1:"88",x2:"215",y2:"68",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("circle",{cx:"217",cy:"66",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"225",y:"69",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"B"}),e.jsx("line",{x1:"146",y1:"42",x2:"146",y2:"20",stroke:"#2e7d52",strokeWidth:"1.2",strokeDasharray:"3,2"}),e.jsx("circle",{cx:"146",cy:"18",r:"4",fill:"#2e7d52"}

1),e.jsx("text",{x:"154",y:"14",fill:"#2e7d52",fontSize:"10",fontFamily:"DM Mono, monospace",children:"C"}),e.jsx("line",{x1:"98",y1:"45",x2:"98",y2:"215",stroke:"#2e7d52",strokeWidth:"1.2",strokeDasharray:"3,2"}),e.jsx("line",{x1:"94",y1:"45",x2:"102",y2:"45",stroke:"#2e7d52",strokeWidth:"1.2"}),e.jsx("line",{x1:"94",y1:"215",x2:"102",y2:"215",stroke:"#2e7d52",strokeWidth:"1.2"}),e.jsx("text",{x:"92",y:"132",textAnchor:"end",fill:"#2e7d52",fontSize:"10",fontFamily:"DM Mono, monospace",children:"D"}),e.jsx("line",{x1:"440",y1:"215",x2:"460",y2:"240",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("circle",{cx:"462",cy:"242",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"470",y:"245",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"E"})]}),e.jsx("div",{className:"flex flex-wrap gap-3 mt-7",children:[{color:"#c94a2e",label:"A — Bottom segment:",desc:"The first sub-category, sitting on the baseline — the only segment that can be compared precisely across bars"},{color:"#6b6b67",label:"B — Middle segment:",desc:"Additional sub-categories stacked above, harder to compare because they don't share a common baseline"},{color:"#2e7d52",label:"C — Top segment:",desc:"The last sub-category stacked on top — its upper edge defines the total bar height"},{color:"#2e7d52",label:"D — Total bar height:",desc:"The overall bar length from baseline to top, representing the combined total of all sub-categories"},{color:"#6b6b67",label:"E — Baseline (zero line):",desc:"The common starting point for all bars — must always be zero for accurate comparisons"}].map((t,r)=>e.jsxs("div",{className:"flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]",children:[e.jsx("span",{className:"w-[10px] h-[10px] rounded-full shrink-0",style:{background:t.color}}),e.jsxs("span",{className:"text-[var(--ink-muted)]",children:[e.jsx("strong",{className:"text-[var(--ink)] font-medium",children:t.label})," ",t.desc]})]},r))})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"when-to-use",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 04 — Usage"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"When to use it — and when not to"}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-5 mt-7",children:[e.jsxs("div",{className:"bg-[var(--green-light)] border border-[var(--green-border)] rounded-[10px] p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 font-medium text-[14px] text-[var(--green)] mb-4",children:[e.jsx("span",{className:"w-[22px] h-[22px] rounded-full bg-[var(--green)] text-white flex items-center justify-center text-[12px] shrink-0",children:"✓"}),"Use a stacked bar chart when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["You want to show both totals and composition across categories","Comparing how sub-categories contribute to the whole in each group","You have 2–5 sub-categories per bar (segments stay readable)","The total value across groups is an important comparison","Showing budget breakdowns, survey responses, or resource allocation","Your audience needs to see part-to-whole relationships across multiple groups"].map((t,r)=>e.jsx("li",{className:"text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-['—'] before:absolute before:left-0 before:text-[var(--ink-faint)]",children:t},r))})]}),e.jsxs("div",{className:"bg-[var(--red-light)] border border-[var(--red-border)] rounded-[10px] p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 font-medium text-[14px] text-[var(--red)] mb-4",children:[e.jsx("span",{className:"w-[22px] h-[22px] rounded-full bg-[var(--red)] text-white flex items-center justify-center text-[12px] shrink-0",children:"×"}),"Avoid a stacked bar chart when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["Precise comparison between middle segments is critical — they don't share a baseline","You have more than 5–6 sub-categories — the stack becomes unreadable","You only need to compare totals — a simple bar chart is cleaner","Sub-categories have negative values — stacking breaks down conceptually","You need to show change over time for each sub-category — use a line chart","All sub-categories are nearly equal — differences will be invisible in the stack"].map((t,r)=>e.jsx("li",{className:"text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-['—'] before:absolute before:left-0 before:text-[var(--ink-faint)]",children:t},r))})]})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"how-to-read",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 05 — Reading guide"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"How to read a stacked bar chart"}),e.jsx("p",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:"Follow these steps whenever you encounter a stacked bar chart in the wild."}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Read the title, axes, and legend first",desc:"Understand what each color segment represents before looking at the data. The legend is essential — without it, you can't identify which sub-category is which. Check the Y-axis units (dollars, percentages, counts)."},{num:"2",title:"Compare total bar heights first",desc:"The overall height of each bar represents the total. Scan across bars to see which group has the largest and smallest totals. This is the first and most reliable comparison the chart offers."},{num:"3",title:"Focus on the bottom segment for precise comparison",desc:"Only the bottom segment sits on the zero baseline across all bars, making it the easiest to compare accurately. If the bottom segment represents the most important sub-category, the designer chose the stacking order well."},{num:"4",title:"Look for dominant segments and shifts",desc:"Which color takes up the most space in each bar? Does a segment's share grow or shrink from bar to bar? These compositional shifts are the main insight stacked bars reveal."},{num:"5",title:"Don't over-interpret middle segments",desc:"Middle segments are hard to compare precisely because their baselines differ between bars. Use them for rough 'bigger vs smaller' judgments, not exact measurements. If you need precision for a specific sub-category, check the data table or use a grouped bar chart."}].map(t=>e.jsxs("div",{className:"flex gap-5 items-start",children:[e.jsx("span",{className:"w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]",children:t.num}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-[15px] font-medium text-[var(--ink)] mb-1",children:t.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]})]},t.num))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"common-mistakes",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 06 — Common mistakes"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Mistakes to wat

1ch out for"}),e.jsx("div",{className:"flex flex-col gap-4 mt-7",children:[{title:"Too many segments per bar",desc:"More than 5–6 stacked segments become a confusing rainbow. The middle segments get squeezed into thin slivers that are impossible to read or compare. Combine small categories into 'Other' or switch to a different chart type."},{title:"Inconsistent segment ordering",desc:"Each bar's segments must appear in the same order (same color on top, same color on bottom). Changing the stacking order between bars destroys the reader's ability to track any sub-category across groups."},{title:"Using stacked bars for time series",desc:"While you can stack bars over time (e.g., monthly revenue by product), readers will struggle to see trends in individual segments because the baselines shift. Use a stacked area chart or separate line charts for time-series composition."},{title:"Truncated Y-axis",desc:"Just like regular bar charts, stacked bars must start at zero. A truncated axis exaggerates the differences between totals and distorts the proportional relationships between segments."},{title:"Hiding the most important sub-category in the middle",desc:"The bottom and top segments are the easiest to read. If your key sub-category is buried in the middle of the stack, readers can't compare it accurately. Reorder segments to put the most important one on the bottom."}].map((t,r)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]",children:[e.jsx("h4",{className:"text-[14px] font-medium text-[var(--ink)] mb-[6px]",children:t.title}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]},r))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"real-world-examples",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 07 — Real-world examples"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Where you’ll see stacked bar charts used"}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"01",title:"Business: Quarterly revenue by product line",desc:"A CFO's board presentation showing revenue for each quarter, with segments for subscriptions, consulting, and hardware. The stacked format lets the board see total growth quarter-over-quarter while also tracking whether subscription revenue is growing as a percentage of the total — a key strategic metric.",tag:"Business Analytics"},{num:"02",title:"Survey research: Likert scale responses",desc:"A market research report showing customer satisfaction responses (Strongly Agree to Strongly Disagree) for five different product features. Each bar represents a feature, and segments show the distribution of responses. The 100% stacked variant makes it easy to compare response proportions across features.",tag:"Research"},{num:"03",title:"Government: Budget allocation by department",desc:"A state government's annual budget report showing spending by category (education, healthcare, infrastructure, defense, etc.) across five fiscal years. Stacked bars reveal both the growing total budget and the shifting priorities — education's share might be growing while infrastru

1cture's is shrinking.",tag:"Public Policy"}].map(t=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 grid grid-cols-[48px_1fr] gap-4 items-start",children:[e.jsx("span",{className:"font-serif text-[32px] font-semibold text-[var(--accent-mid)] leading-none mt-1",children:t.num}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-[15px] font-medium text-[var(--ink)] mb-[6px]",children:t.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]",children:t.desc}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-2 py-[3px] rounded-[3px]",children:t.tag})]})]},t.num))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"key-facts",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 08 — At a glance"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Quick reference"}),e.jsx("div",{className:"mt-7 flex flex-col border border-[var(--border-color)] rounded-[10px] overflow-hidden",children:[{label:"Also known as",val:"Stacked bar graph, stacked column chart, composite bar chart"},{label:"Derived from",val:"Bar chart (William Playfair, 1786)"},{label:"Best for",val:"Showing totals and composition across categories simultaneously"},{label:"Data types",val:e.jsxs(e.Fragment,{children:[e.jsx("strong",{className:"font-medium",children:"Categorical"})," groups with ",e.jsx("strong",{className:"font-medium",children:"quantitative"})," sub-category values"]})},{label:"Recommended segments",val:"2 – 5 sub-categories per bar"},{label:"Axis must start at",val:e.jsxs(e.Fragment,{children:[e.jsx("strong",{className:"font-medium",children:"Zero."})," Same rule as standard bar charts."]})},{label:"Common tools",val:"Excel, Tableau, D3.js, ggplot2, Power BI, Google Sheets"},{label:"Common mistakes",val:"Too many segments, inconsistent ordering, truncated axis, time-series misuse"}].map((t,r)=>e.jsxs("div",{className:"flex bg-[var(--bg-card)] border-b border-[var(--border-color)] last:border-b-0 px-[18px] py-[14px]",children:[e.jsx("span",{className:"font-mono text-[11px] tracking-[0.06em] text-[var(--ink-faint)] uppercase w-[140px] shrink-0 pt-[2px]",children:t.label}),e.jsx("span",{className:"text-[14px] text-[var(--ink)] font-light leading-[1.6]",children:t.val})]},r))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"variations",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 09 — Variations"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Types of stacked bar charts"}),e.jsx("p",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:"The stacked bar has several important variants, each optimized for different analytical needs."}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-7",children:[e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-end gap-[6px]",children:e.jsxs("svg",{viewBox:"0 0 120 60",width:"120",height:"60",children:[e.jsx("rect",{x:"10",y:"0",width:"22",height:"60",rx:"1",fill:"#c94a2e"}),e.jsx("rect",{x:"10",y:"0",width:"22",height:"24",rx:"1",fill:"#f5ede9"}),e.jsx("rect",{x:"10",y:"0",width:"22",height:"10",rx:"1",fill:"#e8c4b8"}),e.jsx("rect",{x:"48",y:"0",width:"22",height:"60",rx:"1",fill:"#c94a2e"}),e.jsx("rect",{x:"48",y:"0",width:"22",height:"30",rx:"1",fill:"#f5ede9"}),e.jsx("rect",{x:"48",y:"0",width:"22",height:"14",rx:"1",fill:"#e8c4b8"}),e.jsx("rect",{x:"86",y:"0",width:"22",height:"60",rx:"1",fill:"#c94a2e"}),e.jsx("rect",{x:"86",y:"0",width:"22",height:"18",rx:"1",fill:"#f5ede9"}),e.jsx("rect",{x:"86",y:"0",width:"22",height:"6",rx:"1",fill:"#e8c4b8"}),e.jsx("line",{x1:"0",y1:"60",x2:"120",y2:"60",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.2"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"100% stacked bar chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"All bars are the same height (100%), emphasizing proportional composition rather than absolute totals. Best for comparing shares across groups."})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-end gap-[6px]",children:e.jsxs("svg",{viewBox:"0 0 120 60",width:"120",height:"60",children:[e.jsx("rect",{x:"0",y:"4",height:"12",width:"100",rx:"1",fill:"#c94a2e"}),e.jsx("rect",{x:"0",y:"4",height:"12",width:"40",rx:"1",fill:"#f5ede9"}),e.jsx("rect",{x:"0",y:"4",height:"12",width:"15",rx:"1",fill:"#e8c4b8"}),e.jsx("rect",{x:"0",y:"22",height:"12",width:"80",rx:"1",fill:"#c94a2e"}),e.jsx("rect",{x:"0",y:"22",height:"12",width:"35",rx:"1",fill:"#f5ede9"}),e.jsx("rect",{x:"0",y:"22",height:"12",width:"12",rx:"1",fill:"#e8c4b8"}),e.jsx("rect",{x:"0",y:"40",height:"12",width:"110",rx:"1",fill:"#c94a2e"}),e.jsx("rect",{x:"0",y:"40",height:"12",width:"50",rx:"1",fill:"#f5ede9"}),e.jsx("rect",{x:"0",y:"40",height:"12",width:"20",rx:"1",fill:"#e8c4b8"}),e.jsx("line",{x1:"0",y1:"0",x2:"0",y2:"56",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.2"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"Horizontal stacked bar"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Bars run left-to-right. Ideal when category labels are long text str

1ings that would overlap on a vertical axis."})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-end gap-[6px]",children:e.jsxs("svg",{viewBox:"0 0 120 60",width:"120",height:"60",children:[e.jsx("line",{x1:"60",y1:"0",x2:"60",y2:"56",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.3"}),e.jsx("rect",{x:"25",y:"4",height:"12",width:"35",rx:"1",fill:"#2e7d52",opacity:"0.3"}),e.jsx("rect",{x:"60",y:"4",height:"12",width:"45",rx:"1",fill:"#c94a2e",opacity:"0.7"}),e.jsx("rect",{x:"15",y:"22",height:"12",width:"45",rx:"1",fill:"#2e7d52",opacity:"0.3"}),e.jsx("rect",{x:"60",y:"22",height:"12",width:"30",rx:"1",fill:"#c94a2e",opacity:"0.7"}),e.jsx("rect",{x:"30",y:"40",height:"12",width:"30",rx:"1",fill:"#2e7d52",opacity:"0.3"}),e.jsx("rect",{x:"60",y:"40",height:"12",width:"50",rx:"1",fill:"#c94a2e",opacity:"0.7"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"Diverging stacked bar"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Bars extend in both directions from a center line. Perfect for Likert scales (agree/disagree) or positive/negative splits."})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] transition-all duration-150",children:[e.jsx("div",{className:"h-[60px] mb-3 flex items-end gap-[6px]",children:e.jsxs("svg",{viewBox:"0 0 120 60",width:"120",height:"60",children:[e.jsx("path",{d:"M0,60 L0,40 C20,36 40,34 60,30 C80,26 100,28 120,24 L120,60 Z",fill:"#c94a2e"}),e.jsx("path",{d:"M0,40 L0,22 C20,20 40,16 60,14 C80,12 100,15 120,10 L120,24 C100,28 80,26 60,30 C40,34 20,36 0,40 Z",fill:"#e8c4b8"}),e.jsx("path",{d:"M0,22 L0,10 C20,8 40,6 60,5 C80,4 100,6 120,4 L120,10 C100,15 80,12 60,14 C40,16 20,20 0,22 Z",fill:"#f5ede9"}),e.jsx("line",{x1:"0",y1:"60",x2:"120",y2:"60",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.2"})]})}),e.jsx("p",{className:"text-[13px] font-medium text-[var(--ink)] mb-1",children:"Stacked area chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"The continuous version of stacked bars, best for showing composition changes over time with smooth transitions."})]})]})]}),e.jsx(x,{faqs:i,sectionNumber:10}),e.jsxs("section",{className:"py-14 pb-[72px]",id:"related-charts",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 11 — Related charts"}),e.jsx("h2",{className:"font-serif text-[26px] md:text-[28px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-7 leading-[1.2]",children:"You might also need…"}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4",children:[e.jsxs(s,{href:"/bar-chart",className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline text-[var(--ink)]",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:[e.jsx("rect",{x:"6",y:"22",width:"14",height:"38",rx:"2",fill:"#f5ede9"}),e.jsx("rect",{x:"24",y:"8",width:"14",height:"52",rx:"2",fill:"#c94a2e"}),e.jsx("rect",{x:"42",y:"32",width:"14",height:"28",rx:"2",fill:"#f5ede9"}),e.jsx("rect",{x:"60",y:"14",width:"14",height:"46",rx:"2",fill:"#f5ede9"}),e.jsx("rect",{x:"78",y:"38",width:"14",height:"22",rx:"2",fill:"#f5ede9"}),e.jsx("line",{x1:"0",y1:"60",x2:"100",y2:"60",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.15"})]})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Bar chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"When you only need to compare single values across categories — no composition needed."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Comparison"})]}),e.jsxs(s,{href:"/donut-chart",className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline text-[var(--ink)]",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsx("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:e.jsxs("g",{transform:"translate(50,32)",children:[e.jsx("path",{d:"M0,-26 A26,26 0 0,1 26,0 L16,0 A16,16 0 0,0 0,-16 Z",fill:"#c94a2e"}),e.jsx("path",{d:"M26,0 A26,26 0 0,1 -15,21 L-9,13 A16,16 0 0,0 16,0 Z",fill:"#f5ede9",stroke:"#e8d5cf",strokeWidth:"0.5"}),e.jsx("path",{d:"M-15,21 A26,26 0 0,1 -21,-15 L-13,-9 A16,16 0 0,0 -9,13 Z",fill:"#e8c4b8"}),e.jsx("path",{d:"M-21,-15 A26,26 0 0,1 0,-26 L0,-16 A16,16 0 0,0 -13,-9 Z",fill:"#f0e4e0"})]})})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Donut chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"When you’re showing composition for a single group and want a compact, visual format."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Part-to-whole"})]}),e.jsxs(s,{href:"/treemap",className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline text-[var(--ink)]",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:[e.jsx("rect",{x:"1",y:"1",width:"55",height:"58",rx:"2",fill:"#c94a2e"}),e.jsx("rect",{x:"58",y:"1",width:"41",height:"30",rx:"2",fill:"#e8c4b8"}),e.jsx("rect",{x:"58",y:"33",width:"20",height:"26",rx:"2",fill:"#f5ede9"}),e.jsx("rect",{x:"80",y:"33",width:"19",height:"26",rx:"2",fill:"#f0e4e0"})]})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Treemap"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"When you have many categories and hierarchical data that needs to fit in a compact space."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Part-to-whole"})]})]})]})]}),e.jsxs("aside",{className:"hidden md:block sticky top-[80px]",children:[e.jsxs("div",{className:"mt-12 mb-7",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--ink-faint)] mb-[14px] pb-[10px] border-b border-[var(--border-color)]",children:"On this page"}),e.jsx("ul",{className:"list-none",children:g.map(t=>e.jsx("li",{className:"mb-[2px]",children:e.jsx("a",{href:`#${t.id}`,className:"block text-[13px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]",children:t.label})},t.id))})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// At a glance"}),e.jsx("div",{children:[{label:"Category",val:"Part-to-whole",color:""},{label:"Difficulty",val:"Beginner",color:"text-[var(--green)]"},{label:"Best segment count",val:"2 – 5",color:""},{label:"Max segments",val:"~6 before confusion",color:"text-[var(--caution)]"},{label:"Axis starts at",val:"Zero (required)",color:""},{label:"Derived from",val:"Bar chart (1786)",color:""}].map((t,r)=>e.jsxs("div",{className:"px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]",children:[e.jsx("span",{className:"text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]",children:t.label}),e.jsx("span",{className:`text-[14px] text-[var(--ink)] ${t.color}`,children:t.val})]},r))})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// Tags"}),e.jsx("div",{className:"px-[18px] py-4",children:e.jsx("div",{className:"flex flex-wrap gap-[6px]",children:["Part-to-whole","Composition","Comparison","Beginner","Business","Survey","Budget"].map(t=>e.jsx("span",{className:"font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]",children:t},t))})})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// Similar charts"}),e.jsx("div",{className:"py-1",children:["Grouped bar chart","100% stacked bar","Stacked area chart","Marimekko chart","Waterfall chart"].map((t,r,o)=>e.jsxs("span",{className:`flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer ${r<o.length-1?"border-b border-[var(--border-color)]":""}`,children:[t," ",e.jsx("span",{children:"→"})]},t))})]})]})]})]}),e.jsxs("div",{className:"border-t border-[var(--border-color)] bg-[var(--bg-card)] px-6 md:px-12 py-5 flex items-center justify-between",children:[e.jsx("div",{className:"flex gap-8",children:e.jsxs(s,{href:"/parliament-chart",className:"text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] no-u

1nderline hover:text-[var(--ink)] transition-colors duration-150",children:[e.jsx("span",{className:"text-[var(--accent-color)]",children:"←"})," Previous: Parliament chart"]})}),e.jsx("span",{className:"font-mono text-[11px] text-[var(--ink-faint)] hidden md:block",children:"Part-to-whole charts"}),e.jsx("div",{className:"flex gap-8",children:e.jsxs(s,{href:"/100-percent-stacked-bar-chart",className:"text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] no-underline hover:text-[var(--ink)] transition-colors duration-150",children:["Next: 100% Stacked bar chart ",e.jsx("span",{className:"text-[var(--accent-color)]",children:"→"})]})})]})]})}export{k as default};