https://www.visualizing.org/assets/RangeChart-KJX_4IaO.js

1import{j as e,L as n}from"./vendor-react-CVijXI0n.js";import{S as d,b as x,h as m,a as h}from"./index-D0o2Sutv.js";import{C as p}from"./ChartBreadcrumb-BOBTh6lg.js";import{C as b,b as g}from"./ChartFAQ-DwXxlpIj.js";const r="https://www.visualizing.org",l=[{q:"What is a range chart?",a:'A range chart (also known as a span chart or floating bar chart) displays the spread between two values for each category. Unlike a standard bar chart where bars start at zero, range chart bars "float" between their minimum and maximum values.'},{q:"When should you use a range chart?",a:"Use a range chart when showing variability (min/max) per category, not just averages. It also works well when displaying confidence intervals or uncertainty ranges, and when comparing daily temperature highs and lows across months."},{q:"When should you avoid a range chart?",a:"Avoid a range chart when you only have one value per category — use a standard bar chart. It is also a poor fit when you need to compare specific individual data points — use a dot plot, or when the audience expects bars starting from zero and may be confused by floating bars."},{q:"How is a range chart different from a dumbbell chart?",a:"Both a range chart and a dumbbell chart can look similar at first glance, but they answer different questions. Reach for a range chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a dumbbell chart when its particular strengths better fit your data and audience."},{q:"Are range charts accessible to screen readers?",a:"Yes — a range chart can be made accessible to screen readers by pairing it with a clear text summary of the key insight, ensuring color choices meet WCAG contrast guidelines, adding descriptive alt text or aria-label to the SVG, and offering the underlying data as an HTML table fallback for assistive technologies."},{q:"Is a range chart suitable for dashboards?",a:"Yes — a range 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."}],u=g("/range-chart",l),f={"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":`${r}/range-chart/#webpage`,url:`${r}/range-chart`,name:"Range Chart — The Definitive Guide",description:"Learn what a range chart (span chart) is, how to read min-max spreads, and when to use range bars for your data.",isPartOf:{"@id":`${r}/#website`},breadcrumb:{"@id":`${r}/range-chart/#breadcrumb`},mainEntity:{"@id":`${r}/range-chart/#article`},inLanguage:"en"},x({slug:"/range-chart",caption:"Example range chart",width:620,height:280}),{"@type":["Article","LearningResource"],"@id":`${r}/range-chart/#article`,mainEntityOfPage:{"@id":`${r}/range-chart/#webpage`},headline:"Range Chart: Definition, How to Read, and When to Use",description:"A complete reference guide to range charts — displaying the spread between a minimum and maximum value for each category.",image:{"@id":m("/range-chart")},datePublished:"2025-03-15",dateModified:"2026-04-07",publisher:{"@id":`${r}/#organization`},inLanguage:"en",educationalLevel:"beginner",learningResourceType:"reference",teaches:["How to read range charts","When to show min-max spread"],competencyRequired:"Basic chart reading",timeRequired:"PT7M",isAccessibleForFree:!0,audience:{"@type":"EducationalAudience",educationalRole:"student"},about:{"@id":`${r}/range-chart/#term`},keywords:["range chart","span chart","floating bar chart","min-max chart"]},{"@type":"DefinedTerm","@id":`${r}/range-chart/#term`,name:"Range Chart",description:"Displays the spread between a minimum and maximum value for each category using a bar or line segment.",inDefinedTermSet:{"@id":`${r}/chart-types/#termset`},termCode:"range-chart",url:`${r}/range-chart`},{"@type":"DefinedTermSet","@id":`${r}/chart-types/#termset`,name:"Data Visualization Chart Types",url:`${r}/chart-types`},h("/range-chart"),u]},v=[{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:"data-format",label:"Data format"},{id:"construction",label:"How to build it"},{id:"accessibility",label:"Accessibility"},{id:"variations",label:"Variations"},{id:"faqs",label:"FAQs"},{id:"related-charts",label:"Related charts"}];function w(){return e.jsxs(e.Fragment,{children:[e.jsx(d,{title:"Range Chart: What It Is, When To Use It & Examples",description:"Range Chart guide: what it is, when to use it for comparison analysis, real examples, common pitfalls, and tools to build one yourself.",path:"/range-chart",ogType:"article",jsonLd:[f]}),e.jsx(p,{slug:"/range-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:"Comparison"}),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:"Range Chart"}),e.jsx("p",{className:"text-[17px] md:text-[19px] font-light text-[var(--ink-muted)] leading-[1.6] max-w-[640px]",children:"Displays the spread between a minimum and maximum value for each category using a bar or line segment — ideal for showing variability, confidence intervals, or daily temperature ranges."})]}),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:"Daily temperature range by month"})]}),e.jsx("span",{children:"New York, 2025"})]}),e.jsxs("svg",{viewBox:"0 0 620 280",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("line",{x1:"72",y1:"20",x2:"72",y2:"240",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.10"}),e.jsx("line",{x1:"72",y1:"240",x2:"600",y2:"240",stroke:"#1a1a18",strokeWidth:"1",strokeOpacity:"0.15"}),[100,80,60,40,20,0].map((a,t)=>{const s=20+t*44;return e.jsxs("g",{children:[e.jsx("line",{x1:"72",y1:s,x2:"600",y2:s,stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.06",strokeDasharray:"4,3"}),e.jsxs("text",{x:"62",y:s+4,textAnchor:"end",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:[a,"°F"]})]},a)}),[{m:"Jan",lo:28,hi:40},{m:"Feb",lo:30,hi:44},{m:"Mar",lo:38,hi:54},{m:"Apr",lo:48,hi:66},{m:"May",lo:58,hi:76},{m:"Jun",lo:66,hi:84},{m:"Jul",lo:72,hi:90},{m:"Aug",lo:70,hi:88},{m:"Sep",lo:62,hi:80},{m:"Oct",lo:50,hi:68},{m:"Nov",lo:40,hi:56},{m:"Dec",lo:32,hi:44}].map((a,t)=>{const s=95+t*42,i=240-a.hi*2.2,c=240-a.lo*2.2,o=a.m==="Jul";return e.jsxs("g",{children:[e.jsx("rect",{x:s,y:i,width:"24",height:c-i,rx:"3",fill:o?"#c94a2e":"#f5ede9",stroke:o?"#c94a2e":"#e8c4b8",strokeWidth:"0.5"}),e.jsx("text",{x:s+12,y:"256",textAnchor:"middle",fill:"#b0b0aa",fontSize:"9",fontFamily:"DM Mono, monospace",children:a.m})]},a.m)})]}),e.jsx("p",{className:"text-[13px] text-[var(--ink-muted)] text-center italic mt-4",children:"A range chart showing the daily temperature spread (low to high) for each month. The highlighted bar (July) shows the widest variation and highest temperatures."})]})]}),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 range chart?"}),e.jsxs("div",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:[e.jsxs("p",{children:["A range chart (also known as a ",e.jsx("strong",{className:"font-medium",children:"span chart"})," or ",e.jsx("strong",{className:"font-medium",children:"floating bar chart"}),") displays the spread between two values for each category. Unlike a standard bar chart where bars start at zero, range chart bars “float” between their minimum and maximum values."]}),e.jsxs("p",{className:"mt-[18px]",children:["The bar’s ",e.jsx("em",{children:"position"})," shows the absolute level (where on the scale the values fall), while the bar’s ",e.jsx("em",{children:"height"})," (or width, if horizontal) shows the spread or uncertainty. This dual encoding is the range chart’s superpower — it shows both the level and the variability of each category in one view."]}),e.jsxs("p",{className:"mt-[18px]",children:["Range charts are commonly used in weather visualization (daily high/low temperatures), finance (daily price ranges), and statistics (confidence intervals). They answer the question: “Not just ",e.jsx("em",{children:"what"})," is the value, but ",e.jsx("em",{children:"how variable"}

1)," is it?”"]})]})]}),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 range 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 180",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("line",{x1:"80",y1:"20",x2:"80",y2:"150",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.15"}),e.jsx("line",{x1:"80",y1:"150",x2:"500",y2:"150",stroke:"#1a1a18",strokeWidth:"1.5",strokeOpacity:"0.15"}),e.jsx("rect",{x:"130",y:"40",width:"50",height:"80",rx:"3",fill:"#c94a2e",opacity:"0.8"}),e.jsx("rect",{x:"230",y:"60",width:"50",height:"60",rx:"3",fill:"#f5ede9",stroke:"#e8c4b8",strokeWidth:"0.5"}),e.jsx("rect",{x:"330",y:"30",width:"50",height:"100",rx:"3",fill:"#f5ede9",stroke:"#e8c4b8",strokeWidth:"0.5"}),e.jsx("line",{x1:"180",y1:"40",x2:"210",y2:"25",stroke:"#c94a2e",strokeWidth:"1.2"}),e.jsx("text",{x:"215",y:"22",fill:"#c94a2e",fontSize:"10",fontFamily:"DM Mono, monospace",children:"A — Top edge (max)"}),e.jsx("line",{x1:"180",y1:"120",x2:"210",y2:"135",stroke:"#2e7d52",strokeWidth:"1.2"}),e.jsx("text",{x:"215",y:"140",fill:"#2e7d52",fontSize:"10",fontFamily:"DM Mono, monospace",children:"B — Bottom edge (min)"}),e.jsx("line",{x1:"155",y1:"80",x2:"120",y2:"90",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("text",{x:"30",y:"93",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"C — Bar height = range"})]}),e.jsx("div",{className:"flex flex-wrap gap-3 mt-7",children:[{color:"#c94a2e",label:"A — Top edge:",desc:"The maximum value for this category"},{color:"#2e7d52",label:"B — Bottom edge:",desc:"The minimum value for this category"},{color:"#6b6b67",label:"C — Bar height:",desc:"The visual representation of the spread (max minus min)"}].map((a,t)=>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:a.color}}),e.jsxs("span",{className:"text-[var(--ink-muted)]",children:[e.jsx("strong",{className:"text-[var(--ink)] font-medium",children:a.label})," ",a.desc]})]},t))})]})]}),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 range chart when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["Showing variability (min/max) per category, not just averages","Displaying confidence intervals or uncertainty ranges","Comparing daily temperature highs and lows across months","The spread itself is the key insight, not individual values"].map((a,t)=>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:a},t))})]}),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 range chart when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["You only have one value per category — use a standard bar chart","You need to compare specific individual data points — use a dot plot","The audience expects bars starting from zero and may be confused by floating bars","You want to show the full distribution shape — use a box plot or violin plot"].map((a,t)=>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:a},t))})]})]})]}),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 range chart"}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Note that bars float",desc:"Unlike standard bars, range bars don't start at zero. The bottom edge is the minimum; the top edge is the maximum."},{num:"2",title:"Compare bar heights",desc:"Taller bars mean wider ranges (more variability). Short bars mean the min and max are close together."},{num:"3",title:"Check bar positions",desc:"Higher-positioned bars indicate higher overall values, even if the spread is the same."},{num:"4",title:"Look for overlaps",desc:"When bars overlap vertically, the categories have values in a similar range. Non-overlapping bars indicate clear separation."}].map(a=>e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("span",{className:"w-[32px] h-[32px] rounded-full bg-[var(--accent-light)] text-[var(--accent-color)] flex items-center justify-center font-mono text-[13px] shrink-0",children:a.num}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] font-medium text-[var(--ink)] mb-1",children:a.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.desc})]})]},a.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 — Pitfalls"}),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:"Common mistakes"}),e.jsx("div",{className:"flex flex-col gap-5 mt-4",children:[{mistake:"Not explaining the floating bars",fix:"Readers expect bars from zero. Add a subtitle or annotation clarifying that bars show min-max ranges."},{mistake:"Confusing with error bars",fix:"Error bars show uncertainty around a point estimate. Range bars show actual min/max values. Label clearly."},{mistake:"No midpoint marker",fix:"Adding a median or mean marker inside each bar helps readers see both the center and the spread."},{mistake:"Too many categories",fix:"Beyond 12–15 categories, the chart becomes dense. Consider grouping or filtering."}].map((a,t)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("p",{className:"text-[14px] font-medium text-[var(--red)] mb-2",children:a.mistake}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.fix})]},t))})]}),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 — 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:"Real-world examples"}),e.jsx("div",{className:"flex flex-col gap-4 mt-4",children:[{context:"Weather",example:"Daily high/low temperature ranges by month for a city"},{context:"Finance",example:"Daily stock price ranges (high/low) across trading days"},{context:"Science",example:"Confidence intervals for measured quantities across experiments"},{context:"Sports",example:"Scoring range (best to worst game) per player across a season"}].map((a,t)=>e.jsxs("div",{className:"flex gap-3 items-start",children:[e.jsx("span",{className:"font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-[10px] py-[4px] rounded-[3px] shrink-0 mt-[2px]",children:a.context}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink)] leading-[1.6]",children:a.example})]},t))})]}),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 — Quick reference"}),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:"Key facts"}),e.jsx("div",{className:"overflow-x-auto mt-4",children:e.jsx("table",{className:"w-full text-[14px] border-collapse",children:e.jsx("tbody",{children:[["Also known as","Span chart, floating bar chart, high-low chart"],["Primary use","Showing min-max spread per category"],["Data types","One categorical + two quantitative values (min and max)"],["Zero baseline","Not required (bars float)"],["Best category count","4–15"],["Common domains","Weather, finance, statistics"]].map(([a,t],s)=>e.jsxs("tr",{className:"border-b border-[var(--border-color)]",children:[e.jsx("td",{className:"py-3 pr-4 font-medium text-[var(--ink)] whitespace-nowrap",children:a}),e.jsx("td",{className:"py-3 text-[var(--ink-muted)] font-light",children:t})]},s))})})})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"data-format",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 09 — Data format"}),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 your data should look like"}),e.jsx("div",{className:"overflow-x-auto mt-4",children:e.jsxs("table",{className:"w-full text-[14px] border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b-2 border-[var(--border-color)]",children:[e.jsx("th",{className:"py-2 pr-4 text-left font-medium text-[var(--ink)]",children:"Column"}),e.jsx("th",{className:"py-2 pr-4 text-left font-medium text-[var(--ink)]",children:"Type"}),e.jsx("th",{className:"py-2 text-left font-medium text-[var(--ink)]",children:"Description"})]})}),e.jsx("tbody",{children:[["Category","String","Label for each range bar (e.g., month, product)"],["Min","Number","The lower bound of the range"],["Max","Number","The upper bound of the range"]].map(([a,t,s],i)=>e.jsxs("tr",{className:"border-b border-[var(--border-color)]",children:[e.jsx("td",{className:"py-3 pr-4 text-[var(--ink)] font-mono text-[13px]",children:a}),e.jsx("td",{className:"py-3 pr-4 text-[var(--ink-muted)]",children:t}),e.jsx("td",{className:"py-3 text-[var(--ink-muted)] font-light",children:s})]},i))})]})}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 mt-5 font-mono text-[13px] text-[var(--ink-muted)] leading-[1.7]",children:[e.jsx("span",{className:"text-[var(--accent-color)]",children:"// Example rows"}),e.jsx("br",{}),"Jan, 28, 40",e.jsx("br",{}),"Feb, 30, 44",e.jsx("br",{}),"Jul, 72, 90",e.jsx("br",{}),"Dec, 32, 44"]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"construction",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 10 — Construction"}),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 build a range chart"}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Set the value axis",de

1sc:"Choose a scale that covers the full range of all categories' min and max values."},{num:"2",title:"Lay out categories",desc:"Space categories evenly along the X-axis (vertical bars) or Y-axis (horizontal bars)."},{num:"3",title:"Draw floating bars",desc:"For each category, draw a rectangle from the min value to the max value. The bar does not touch zero."},{num:"4",title:"Optionally add midpoint markers",desc:"A small line or dot at the median or mean within each bar adds context."},{num:"5",title:"Add axis labels and title",desc:"Clearly label units and provide a subtitle explaining that bars show ranges, not totals."}].map(a=>e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("span",{className:"w-[32px] h-[32px] rounded-full bg-[var(--accent-light)] text-[var(--accent-color)] flex items-center justify-center font-mono text-[13px] shrink-0",children:a.num}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] font-medium text-[var(--ink)] mb-1",children:a.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.desc})]})]},a.num))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"accessibility",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 11 — Acce

1ssibility"}),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:"Accessibility notes"}),e.jsx("div",{className:"flex flex-col gap-4 mt-4",children:[{title:"Explain floating bars in text",desc:"Add a subtitle or annotation explaining that bars don't start at zero — they show a min-max range."},{title:"Provide a data table",desc:"Include a table with category, min, max, and range size for screen-reader users."},{title:"Use ARIA labels",desc:'Each bar should have an aria-label like "July: low 72°F, high 90°F, range 18°F."'},{title:"Ensure highlighted bars are accessible",desc:"If colour distinguishes a highlighted bar, also use a border, pattern, or label."}].map((a,t)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-2",children:a.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.desc})]},t))})]}),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:"// 12 — 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:"Variations"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4",children:[{name:"Range area chart",desc:"Fills the area between two lines on a time axis to show range over time"},{name:"Range with midpoint",desc:"Adds a marker (dot or line) inside each bar for the mean or median"},{name:"Horizontal range bar",desc:"Categories on Y-axis with floating bars extending horizontally"},{name:"Range column chart",desc:"Vertical floating bars — the most common orientation"}].map((a,t)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:a.name}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.5]",children:a.desc})]},t))})]}),e.jsx(b,{faqs:l,sectionNumber:10}),e.jsxs("section",{className:"py-14",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"}),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:"Related charts"}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4",children:[e.jsxs(n,{href:"/dumbbell-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("p",{className:"text-[14px] font-medium mb-1",children:"Dumbbell chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Two dots connected by a line for paired comparison."}),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(n,{href:"/box-plot",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("p",{className:"text-[14px] font-medium mb-1",children:"Box plot"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Shows full distribution with quartiles and outliers."}),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:"Distribution"})]}),e.jsxs(n,{href:"/candlestick-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("p",{className:"text-[14px] font-medium mb-1",children:"Candlestick chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"OHLC price range with open/close distinction."}),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:"Financial"})]})]})]})]}),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:v.map(a=>e.jsx("li",{className:"mb-[2px]",children:e.jsx("a",{href:`#${a.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:a.label})},a.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:"Comparison"},{label:"Difficulty",val:"Beginner",color:"text-[var(--green)]"},{label:"Zero baseline",val:"Not required (bars float)"},{label:"Best for",val:"Min/max spread"}].map((a,t)=>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:a.label}),e.jsx("span",{className:`text-[14px] text-[var(--ink)] ${a.color||""}`,children:a.val})]},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:"// Tags"}),e.jsx("div",{className:"px-[18px] py-4",children:e.jsx("div",{className:"flex flex-wrap gap-[6px]",children:["Comparison","Range","Variability","Beginner","Weather","Finance"].map(a=>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:a},a))})})]})]})]})]}),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.jsxs(n,{href:"/dumbbell-chart",className:"text-[13px] text-[var(--ink-muted)] no-underline flex items-center gap-[6px] hover:text-[var(--ink)] transition-colors duration-150",children:[e.jsx("span",{className:"text-[var(--accent-color)]",children:"←"})," Previous: Dumbbell Chart"]}),e.jsx("span",{className:"font-mono text-[11px] text-[var(--ink-faint)] hidden md:block",children:"8 of 177 chart types"}),e.jsxs(n,{href:"/radial-bar-chart",className:"text-[13px] text-[var(--ink-muted)] no-underline flex items-center gap-[6px] hover:text-[var(--ink)] transition-colors duration-150",children:["Next: Radial Bar Chart ",e.jsx("span",{className:"text-[var(--accent-color)]",children:"→"})]})]})]})}export{w as default};