BarChart

<BarChart data={rows} {config} x="month" series={["desktop"]}
          orientation="horizontal" radius={5} margin={{ left: -20 }}
          categoryAxis={{ tickFormatter: (v) => String(v).slice(0, 3) }}
          tooltip={{ hideLabel: true }} />

<BarChart data={rows} {config} x="month" radius={4}
          categoryAxis={{ tickFormatter: (v) => String(v).slice(0, 3) }}
          tooltip={{ indicator: "dashed" }} />

<BarChart data={rows} {config} x="month" stack="normal" legend
          categoryAxis={{ tickFormatter: (v) => String(v).slice(0, 3) }} />

<BarChart data={rows} {config} x="month" series={["desktop"]} radius={8}
          margin={{ top: 20 }} labels={{ position: "top" }}
          tooltip={{ hideLabel: true }} />

<BarChart data={rows} {config} x="month" orientation="horizontal" radius={4}
          categoryAxis={false} margin={{ right: 16 }}
          labels={[
            { key: "month", position: "insideLeft", series: "desktop", offset: 8, color: "var(--bg)" },
            { position: "right", series: "desktop", offset: 8, color: "var(--ink)" },
          ]}
          series={["desktop"]} tooltip={{ indicator: "line" }} />

<!-- each row's fill picks its color: fill: "var(--color-chrome)" -->
<BarChart data={browsers} config={browserConfig} x="browser" orientation="horizontal"
          radius={5} margin={{ left: 0 }}
          categoryAxis={{ tickFormatter: (v) => browserConfig[String(v)].label }}
          tooltip={{ hideLabel: true }} />

<BarChart data={browsers} config={browserConfig} x="browser" radius={8}
          active={2} activeBar
          categoryAxis={{ tickFormatter: (v) => browserConfig[String(v)].label }}
          tooltip={{ hideLabel: true, cursor: false }} />

<!-- fill per row: rows.map((r) => ({ ...r, fill: r.visitors > 0 ? "var(--chart-1)" : "var(--chart-2)" })) -->
<BarChart data={rows} config={{ visitors: { label: "Visitors" } }} x="month"
          categoryAxis={false}
          labels={{ key: "month", position: "top" }}
          tooltip={{ hideLabel: true, hideIndicator: true, cursor: false }} />

<button e:for={key of ["desktop", "mobile"]} data-active={state.series === key}
        onclick={() => state.series = key}>...</button>

<BarChart data={daily} config={dailyConfig} x="date" series={[state.series]}
          class="chart-demo-wide" margin={{ left: 12, right: 12 }}
          categoryAxis={{ tickFormatter: shortDate, minTickGap: 32 }}
          tooltip={{ nameKey: "views", labelFormatter: (_, row) => longDate(row.date) }} />

<BarChart data={rows} config={{ desktop, mobile, other }} x="month"
          stack="expand" legend valueAxis={{ tickFormatter: (v) => `${Number(v) * 100}%` }} />

<BarChart data={rows} {config} x="month" legend={{ toggle: true }}
          hidden={state.hidden} />

<BarChart data={rows} {config} x="month"
          valueAxis={{ tickCount: 4, tickFormatter: (v) => `${v}` , axisLine: true }}
          categoryAxis={{ tickLine: true, axisLine: true, tickFormatter: (v) => String(v).slice(0, 3) }}
          grid={{ horizontal: true, vertical: true }} />

<BarChart data={rows} config={{ goal: { label: "Goal" } }} x="day" radius={8} barSize={28}
          background minPointSize={4} animate={false} categoryAxis={false} grid={false} />

<!-- stack="sign": positives stack up from zero, negatives down -->
<BarChart data={rows} {config} x="month" stack="sign" maxBarSize={16}
          margin={{ top: 24, left: 24 }} categoryAxis={{ tickMargin: 20 }} />

<BarChart data={rows} {config} x="month" active={state.active}
          activeBar onActiveChange={() => state.changes++}
          onItemClick={(i) => state.clicked = i} />

<!-- mobile on its own axis on the right; a second category axis on top shows the share of desktop -->
<BarChart data={rows} {config} x="month"
          categoryAxis={[{ tickFormatter: shortMonth }, { orientation: "top", key: "share", tickFormatter: (v) => `${v}%` }]}
          valueAxis={[{}, { orientation: "right", series: ["mobile"] }]} />

<!-- each month's stack centered on zero -->
<BarChart data={rows} {config} x="month" stack="silhouette" valueAxis />

<!-- a click shows the tooltip and keeps it; hover alone does nothing -->
<BarChart data={rows} {config} x="month" tooltip={{ trigger: "click" }} />

<!-- mobile is drawn and in the legend, but not in the tooltip -->
<BarChart data={rows} x="month" legend config={{
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)", tooltipType: "none" },
}} />

<!-- desktop stacks on top; legend and tooltip keep series order -->
<BarChart data={rows} {config} x="month" stack="normal" reverseStackOrder legend />

<!-- wait 150ms, then take 900ms to enter or move to new data -->
<BarChart data={rows} {config} x="month"
          animation={{ begin: 150, duration: 900, easing: "linear" }} />

<!-- desktop's legend icon is a line; mobile is left out of the tooltip, other out of the legend -->
<BarChart data={rows} x="month" legend config={{
  desktop: { label: "Desktop", color: "var(--chart-1)", legendType: "line" },
  mobile: { label: "Mobile", color: "var(--chart-2)", tooltipType: "none" },
  other: { label: "Other", color: "var(--chart-3)", legendType: "none" },
}} />

<BarChart data={rows} {config} x="month" showTable={state.table} />

<!-- category and value axis options, one per chart -->
<BarChart data={rows} {config} x="month" series={["desktop"]} valueAxis={{ reversed: true }} />
<BarChart ... categoryAxis={{ reversed: true }} />
<BarChart ... categoryAxis={{ angle: -45, size: 60, tickFormatter: shortMonth }} />
<BarChart ... valueAxis={{ label: "Visitors" }} categoryAxis={{ label: "Month" }} />
<BarChart ... valueAxis={{ unit: "k" }} />
<BarChart ... valueAxis={{ ticks: [0, 100, 250] }} />
<BarChart data={counts} ... valueAxis={{ allowDecimals: false, tickCount: 7 }} />
<BarChart ... categoryAxis={{ interval: 1 }} />
<BarChart ... valueAxis={{ mirror: true }} />
<BarChart ... categoryAxis={{ tickLine: true, tickSize: 12 }} />
<BarChart ... categoryAxis={{ tick: false, axisLine: true }} />
<BarChart ... valueAxis={{ domain: [0, 200], allowDataOverflow: true }} />
<BarChart ... valueAxis={{ domain: [0, "dataMax"], niceTicks: "none" }} />
<BarChart ... valueAxis={{ size: 80 }} categoryAxis={{ size: 50 }} />
<BarChart ... valueAxis={{ hide: true, domain: [0, 600] }} />
<BarChart ... series={["desktop", "mobile"]} legend={{ toggle: true }} valueAxis={{ includeHidden: true }} />
<BarChart data={duplicates} ... categoryAxis={{ allowDuplicatedCategory: false }} />

<!-- grid options -->
<BarChart ... grid={{ strokeDasharray: "3 3" }} />
<BarChart ... grid={{ fill: "var(--bg-muted)", fillOpacity: 0.5 }} />
<BarChart ... grid={{ horizontalFill: ["var(--bg-muted)", "transparent"],
                      vertical: true, verticalFill: ["var(--bg-muted)", "transparent"] }} />
<BarChart ... grid={{ horizontalValues: [100, 200] }} />
<BarChart ... grid={{ horizontalPoints: [40, 80], vertical: true, verticalPoints: [100] }} />
<BarChart ... valueAxis={{ ticks: [0, 150, 300] }} grid={{ syncWithTicks: true }} />

<!-- each month keeps its bar: the window slides -->
<BarChart data={rows} {config} x="month" animation={{ matchBy: matchByDataKey("month") }} />
<!-- (items, t) => the bars to draw: each grows from its base -->
<BarChart data={rows} {config} x="month" animation={{ interpolate: growBars }} />