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>.

Lisbon

8.2 h

Athens

9.1 h

Seville

9.4 h

Malta

8.8 h

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() gives each row the next color from the theme’s series list: pass color={series()} to the Plot, and read it as d.color in the slat.

A theme name is looked up as the block is drawn, so when the theme changes, every block that used a name changes with it.

Dark mode

Keep two themes and pick one:

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

Switching is instant, because rhp changes a few CSS variables on each chart rather than drawing its slats again.

High contrast

In a high contrast mode, such as Windows’ contrast themes, the browser repaints the page in a few system colors. rhp keeps a chart’s bars, dots, ticks, cells, areas and lines in their own colors there, and outlines bars, dots, ticks and cells in the system’s text color, so every mark stays visible and the series keep their colors.