Bar Chart

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​function BarGrouped() {  return <Box maxW="2xl"><BarChart series={series} categories={months} legend /></Box>}

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​const stacked = [  { name: "Web", values: [40, 55, 50, 80, 70, 110] },  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },  { name: "API", values: [20, 30, 25, 50, 45, 70] },]​function BarStacked() {  return <Box maxW="2xl"><BarChart series={stacked} categories={months} mode="stacked" legend /></Box>}

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​const stacked = [  { name: "Web", values: [40, 55, 50, 80, 70, 110] },  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },  { name: "API", values: [20, 30, 25, 50, 45, 70] },]​function BarPercent() {  return <Box maxW="2xl"><BarChart series={stacked} categories={months} mode="percent" legend /></Box>}

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​const costs = [80, 110, 100, 150, 140, 170]const series = [  { name: "Revenue", values: revenue },  { name: "Costs", values: costs },]​function BarRange() {  const data = months.map((label, i) => ({ label, min: costs[i] / 2, max: revenue[i] / 2 + 40 }))  return <Box maxW="2xl"><RangeBarChart data={data} /></Box>}

function BarHistogram() {  const values = Array.from({ length: 120 }, (_, i) => 50 + 18 * Math.sin(i * 1.7) + 12 * Math.cos(i * 0.9) + (i % 7))  return <Box maxW="2xl"><Histogram values={values} bins={10} name="Orders" /></Box>}

function BarCandlestick() {  const data = [    { label: "Mon", open: 100, high: 112, low: 96, close: 108 },    { label: "Tue", open: 108, high: 115, low: 101, close: 103 },    { label: "Wed", open: 103, high: 110, low: 99, close: 109 },    { label: "Thu", open: 109, high: 121, low: 107, close: 118 },    { label: "Fri", open: 118, high: 124, low: 110, close: 112 },  ]  return <Box maxW="2xl"><CandlestickChart data={data} /></Box>}

function BarSegmentDemo() {  return (    <Box maxW="lg">      <BarSegment data={[{ name: "Stocks", value: 5200 }, { name: "Bonds", value: 2400 }, { name: "Cash", value: 1100 }, { name: "Other", value: 600 }]} />    </Box>  )}