Colors and themes

A theme is a small object with a chart’s colors and font. Give it to a Chart with theme, or to every chart inside it with <Theme>.

import { Chart, Plot, Bar, Label, series } from "@bezda/rhp";

const sunset = {
  series: ["#ff6b4a", "#ffa94d", "#ffd43b", "#b197fc"],
  ink: "#3b2f2f",
  muted: "#8c7b75",
  grid: "#f1e3dc",
  font: "Georgia, serif",
};

export default function Sunset() {
  return (
    <Chart
      scale={[0, 12]}
      theme={sunset}
      style={{ background: "#fff8f3", "border-radius": "8px" }}
    >
      <Plot
        city={["Lisbon", "Athens", "Seville", "Malta"]}
        hours={[8.2, 9.1, 9.4, 8.8]}
        color={series()}
      >
        {(d) => (
          <div>
            <Label edge="start">{d.city}</Label>
            <Bar to={d.hours} color={d.color} />
            <Label at={d.hours}>{d.hours} h</Label>
          </div>
        )}
      </Plot>
    </Chart>
  );
}

What a theme holds

Key	Used for
`series`	a list of colors for data, in order
`ink`	text
`muted`	quieter text: axis numbers
`grid`	grid lines
`surface`	the background the chart sits on
`positive`, `negative`	values that are good or bad, up or down
`low`, `high`	the two ends of a Cell’s color range
`font`	the font family

Leave a key out and it keeps rhp’s default.

Coloring blocks

A block’s color takes a theme name or any CSS color:

<Bar to={d.value} color="series-2" />
<Bar to={d.change} color={d.change < 0 ? "negative" : "positive"} />
<Bar to={d.value} color="#d4a72c" />

series() hands each row the next series color, in order: pass color={series()} to the Plot and use d.color in the row.

Theme names follow the theme, so a chart changes all its colors when the theme changes.

Dark mode

Keep two themes and pick one:

<Theme value={dark() ? darkTheme : lightTheme}>
  <App />
</Theme>

Switching is instant: rhp changes a handful of variables on each chart, not its rows.