Sparkline

const up = [10, 12, 11, 15, 14, 18, 17, 21]const down = [21, 19, 20, 16, 17, 13, 12, 9]const stocks = [  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },]​function SparkBasic() {  return <Sparkline values={up} />}

const up = [10, 12, 11, 15, 14, 18, 17, 21]const down = [21, 19, 20, 16, 17, 13, 12, 9]const stocks = [  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },]​function SparkArea() {  return <Sparkline values={up} area width={200} height={48} />}

const up = [10, 12, 11, 15, 14, 18, 17, 21]const down = [21, 19, 20, 16, 17, 13, 12, 9]const stocks = [  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },]​const down = [21, 19, 20, 16, 17, 13, 12, 9]const stocks = [  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },]​function SparkTrend() {  return (    <HStack gap="6">      <Sparkline values={up} color="trend" />      <Sparkline values={down} color="trend" />    </HStack>  )}

function SparkInteractive() {  return <Sparkline values={[4, 7, 5, 9, 12, 8, 14, 11, 16]} width={260} height={64} interactive area />}

const stocks = [  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },]​function SparkStocks() {  return (    <Stack maxW="sm" gap="3">      {stocks.map((s) => {        const change = ((s.values[s.values.length - 1] - s.values[0]) / s.values[0]) * 100        return (          <HStack key={s.name} justify="space-between">            <Box>              <Text fontWeight="medium">{s.name}</Text>              <Text fontSize="sm" color="fg.muted">{s.price}</Text>            </Box>            <Sparkline values={s.values} color="trend" />            <Badge colorPalette={change >= 0 ? "green" : "red"}>{change >= 0 ? "+" : ""}{change.toFixed(1)}%</Badge>          </HStack>        )      })}    </Stack>  )}