Charts

<Gauge
  centerValue={428_000}
  defaultLabel="ARR run rate"
  formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  spacing={25}
  value={66}
/>

// Omit width and height for a responsive layout (min-width 300px by default).

<Gauge
  centerValue={428_000}
  defaultLabel="ARR run rate"
  endAngle={400}
  formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  notchCornerRadius={7}
  spacing={0}
  startAngle={140}
  value={66}
/>

<Gauge
  activeGradient={["#a855f7", "#06b6d4"]}
  centerValue={428_000}
  defaultLabel="ARR run rate"
  endAngle={400}
  formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  inactiveGradient={["#334155", "#38bdf8"]}
  notchCornerRadius={7}
  spacing={0}
  startAngle={140}
  useGradient
  value={66}
/>

<Gauge
  activeFill="url(#gauge-gallery-ex3-fg)"
  centerValue={1840}
  defaultLabel="Trials converted (30d)"
  endAngle={400}
  formatOptions={{ maximumFractionDigits: 0 }}
  inactiveFill="var(--chart-1)"
  inactiveFillOpacity={0.4}
  notchCornerRadius={7}
  spacing={0}
  startAngle={140}
  value={66}
>
  <PatternLines
    height={6}
    id="gauge-gallery-ex3-fg"
    orientation={["diagonal"]}
    stroke="var(--chart-1)"
    strokeWidth={1}
    width={6}
  />
</Gauge>

<Gauge
  centerValue={12}
  defaultLabel="Active squads"
  endAngle={270}
  formatOptions={{ maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  spacing={60}
  startAngle={90}
  totalNotches={33}
  value={66}
/>

<Gauge
  centerValue={12}
  defaultLabel="Active squads"
  endAngle={360}
  formatOptions={{ maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  spacing={60}
  startAngle={180}
  totalNotches={33}
  value={66}
/>

<Gauge
  centerValue={12}
  defaultLabel="Active squads"
  endAngle={450}
  formatOptions={{ maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  spacing={60}
  startAngle={270}
  totalNotches={33}
  value={66}
/>

<Gauge
  centerValue={428_000}
  defaultLabel="ARR run rate"
  formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  notchCornerRadius={8}
  notchLengthPercent={100}
  spacing={25}
  value={66}
/>

<Gauge
  centerValue={428_000}
  defaultLabel="ARR run rate"
  formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  notchCornerRadius={12}
  notchLengthPercent={38}
  spacing={25}
  value={66}
/>

<Gauge
  centerValue={428_000}
  defaultLabel="ARR run rate"
  endAngle={400}
  formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  inactiveFillOpacity={0.4}
  notchCornerRadius={22}
  notchLengthPercent={100}
  spacing={0}
  startAngle={140}
  value={66}
/>

<Gauge
  orientation="linear"
  value={72}
  totalNotches={72}
  spacing={0}
  notchCornerRadius={3}
  notchLengthPercent={38}
  inactiveFillOpacity={0.4}
  useGradient
/>

<Gauge
  orientation="linear"
  value={72}
  centerValue={428_000}
  defaultLabel="ARR run rate"
  labelPlacement="bottom"
  labelAlign="center"
  formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  totalNotches={72}
  spacing={0}
  notchCornerRadius={3}
  inactiveFillOpacity={0.4}
  useGradient
/>

<Gauge
  orientation="linear"
  value={72}
  totalNotches={72}
  spacing={0}
  notchCornerRadius={3}
  notchLengthPercent={38}
  inactiveFillOpacity={0.4}
  activeGradient={["#a855f7", "#06b6d4"]}
  inactiveGradient={["#334155", "#38bdf8"]}
  useGradient
/>