What is rhp?

rhp (reactive html plots) draws charts with HTML and CSS. Drag the slider, then look at the code under the chart: that’s all it takes.

import { createSignal } from "solid-js";
import { Chart, Plot, Bar, Label, slat, sortBy } from "@bezda/rhp";

// One row of the chart: a name, a bar and a number.
const Row = slat(
  {
    css: `
      .bar { --rhp-end-radius: 6px; }
      .value { font-weight: 700; }
    `,
  },
  (d) => (
    <div>
      <Label edge="start">{d.fruit}</Label>
      <Bar to={d.sold} class="bar" />
      <Label at={d.sold} class="value">
        {d.sold}
      </Label>
    </div>
  ),
);

export default function FruitSold() {
  const [apples, setApples] = createSignal(12);
  return (
    <>
      <label class="demo-controls">
        Apples sold
        <input
          type="range"
          min="0"
          max="30"
          value={apples()}
          onInput={(e) => setApples(+e.target.value)}
        />
      </label>
      <Chart scale={[0, 30]}>
        <Plot
          fruit={["Apples", "Bananas", "Cherries", "Kiwis"]}
          sold={[apples(), 18, 7, 22]}
          order={sortBy("sold", "desc")}
        >
          {Row}
        </Plot>
      </Chart>
    </>
  );
}

How it works

A chart in rhp is a stack of rows, one for each thing you’re charting. Each row gets the data that comes together to represent that thing: a name, a value, maybe a picture. You describe one row, and rhp draws the rest.

Your data

name	value	picture
Apples	12
Kiwis	22
Lemons	7

A row per thing, a column per value.

The one row you describe

<Label>d.name<img>d.picture<Bar>d.value<Label>d.value

Build once, from blocks: a Label, a picture, a Bar and a Label.

The chart rhp draws

Apples12

Kiwis22

Lemons7

One copy of the row per thing, filled with its values.

That row is called a slat. You build it from a few blocks, and rhp puts each block in its place on the chart’s scale:

Block	What it draws
`Bar`	a bar from one value to another
`Dot`	a point at a value
`Tick`	a short line across the row, at a value
`Label`	text at a value, or beside the chart
`Cell`	a colored cell, for heatmaps
`Area`	a smooth shape, for how values spread

When your numbers change, the chart follows by itself. Only what changed moves: the bar that grew, and the rows that swap places.

Why rhp

It’s HTML (and CSS and JS). You style a chart the way you style the rest of your page: classes, hover states, gradients, images and fonts. A bar is an element you can inspect in the browser.
It’s small. 16 kB gzipped, or 27 kB together with Solid, the library it’s built on.
It’s quick. Changing a number changes one CSS variable on one element, so charts stay smooth while you drag, type or stream data.
Charts don’t break each other. A slat’s styles only reach its own rows, and the page’s CSS can’t bend a chart out of shape.
One chart, two directions. The same code draws horizontal and vertical charts.

What you need to know

rhp is built on SolidJS, a small library for building web pages. You don’t need to know Solid to start: the examples in these pages show all you need. If you know React, Solid’s JSX will look familiar.

No build tools? rhp also works in a plain HTML page, loaded from a CDN.

Next: install rhp, or jump straight into your first chart.