Data

Chart helpers

Props for Recharts, or any SVG, that follow the theme: chartColors, chartAxisProps, chartGridProps and chartTooltipStyle.

Examples

Recharts

Backup activity
SuccessfulFailed
import { chartAxisProps, chartColors, chartGridProps, chartTooltipStyle } from "@mishrashardendu22/observatory-ui";

<BarChart data={data}>
  <CartesianGrid {...chartGridProps} />
  <XAxis dataKey="date" {...chartAxisProps} />
  <YAxis {...chartAxisProps} width={32} />
  <Tooltip contentStyle={chartTooltipStyle} cursor={{ fill: "var(--bg-200)" }} />
  <Bar dataKey="successful" fill={chartColors.primary} radius={[4, 4, 0, 0]} />
  <Bar dataKey="failed" fill={chartColors.failed} radius={[4, 4, 0, 0]} />
</BarChart>

Guidelines

  • Successful is always the amber primary series; failed is the dark rust so the two differ in lightness, not only hue; skipped is the neutral.
  • Charts sit in a card with a CardTitle, a legend of 8px squares and a 200px frame (.chart-card, .chart-legend, .chart-frame).
  • Bars have 4px top radii; grids are dashed 3 3; axis ticks are 11px mono; tooltips sit on bg-300.

Props

PropTypeWhat it does
chartColors{ primary, failed, skipped, grid, axis, success, danger, info, warning }CSS variable references.
chartAxisProps, chartGridPropsobjectSpread onto XAxis/YAxis and CartesianGrid.
chartTooltipStyleCSSPropertiescontentStyle for a Tooltip.