# rhp

> rhp (reactive html plots, the npm package `@bezda/rhp`) builds charts out of HTML elements and CSS with SolidJS, in a plain HTML page or in a React, Next.js, Vue, Svelte, Solid or Astro app.
> rhp 2 came out in September 2026, after most models' training data: write rhp code only from the files below, never from memory.

Make every rhp chart by following the rhp Agent Skill.

- In a coding agent, install it with `npx skills add bezda-team/rhp`. The skill checks each chart with `npx -y @bezda/rhp-mcp check <file>`, which renders it in a browser at 1280 and 390 pixels wide and reports what is wrong, with a fix for each problem.
- Without the skill installed (in a chat app, for example), read [llms-full.txt](https://rhp.vercel.app/llms-full.txt), the skill and its main references in one file, and follow it.

The guides and the reference under Optional are written for Solid apps in JSX; the skill's api.md covers the same API for every environment.

## The skill

- [llms-full.txt](https://rhp.vercel.app/llms-full.txt): SKILL.md, api.md in one file
- [SKILL.md](https://rhp.vercel.app/ai/rhp/SKILL.md): the workflow for every chart, how an rhp chart is built, a complete example, and the rules that prevent most bugs
- [api.md](https://rhp.vercel.app/ai/rhp/references/api.md): every component, prop, helper and CSS variable, exactly.
- [design.md](https://rhp.vercel.app/ai/rhp/references/design.md): art direction from the subject (idea, marks, composition, palette, type), the poster, color, type, layout, annotation, charts inside an app, a style the user asks for.
- [download.md](https://rhp.vercel.app/ai/rhp/references/download.md): the fit-to-screen and download icons for standalone HTML posters, with a complete PNG export block.
- [environments.md](https://rhp.vercel.app/ai/rhp/references/environments.md): plain HTML, Solid, Astro, React, Next.js, Vue, Svelte and Angular, each verified, and the html template to JSX rules.
- [forms.md](https://rhp.vercel.app/ai/rhp/references/forms.md): the subject's own form, which chart for which data and story, and which recipe has the technique.
- [interaction.md](https://rhp.vercel.app/ai/rhp/references/interaction.md): choosing interaction behavior and presentation for the reader's task, with complete implementation examples.
- [looks.md](https://rhp.vercel.app/ai/rhp/references/looks.md): eight looks written out in full (tokens, fonts, texture, type), as examples of how a look is written, not a menu.
- [performance.md](https://rhp.vercel.app/ai/rhp/references/performance.md): measured optimizations for an expensive chart, preserving its slats, styling, state, and interactions.
- [pitfalls.md](https://rhp.vercel.app/ai/rhp/references/pitfalls.md): mistakes and their fixes.

## Recipes

- [area](https://rhp.vercel.app/ai/rhp/recipes/area.html): Area chart of one quantity over a day: a filled Line on a second axis, with its peak and low annotated, and a switch between two days that morphs the area while the other day stays as a thin reference line. Use it for one quantity over time, filled, or to compare two periods.
- [bar](https://rhp.vercel.app/ai/rhp/recipes/bar.html): Horizontal bar chart, ranked, the top bar highlighted, with a readout on hover, focus and tap. Use it to rank categories by one value, especially with long names.
- [box-plot](https://rhp.vercel.app/ai/rhp/recipes/box-plot.html): Box plot of commute times by mode of transport made with summary(): whiskers, the middle half as a box, the median and outliers, with a readout of the picked group. Use it to compare the spread of several groups at a glance.
- [bubble](https://rhp.vercel.app/ai/rhp/recipes/bubble.html): Bubble chart: two measures per item on a second axis (log scales) and a third as the bubble's area, with guide lines of equal size, labels for the story's items and a readout for the bubble under the pointer, a tap or the arrow keys. Use it for items with two measures and a size.
- [bullet](https://rhp.vercel.app/ai/rhp/recipes/bullet.html): Bullet chart: actual against target for each item, over gray bands for poor, fair and good, with a switch that sorts by the actual value or by the share of target. Use it for performance against goals, budgets or quotas.
- [candlestick](https://rhp.vercel.app/ai/rhp/recipes/candlestick.html): Candlestick chart of one month of daily share prices: a wick from each day's low to its high and a body from its open to its close (hollow when it rose, filled when it fell), with a crosshair and a price readout for the picked day. Use it for open, high, low and close prices over days.
- [column](https://rhp.vercel.app/ai/rhp/recipes/column.html): Column chart of a value over twelve months, a season marked under its columns, with a scrub that reads out the running total by hover, focus and tap. Use it for values over periods (months, years) or a few categories.
- [dial](https://rhp.vercel.app/ai/rhp/recipes/dial.html): Dial: the parts of one whole drawn as arcs around a 24-hour dial (a Bar per row that gives up its box to an SVG arc), labels set along the arcs where they fit, a hand that turns the short way to the part picked, a readout in the hub and a grouped key. Use it for how a day, a week or any cycle splits into parts.
- [diverging-bars](https://rhp.vercel.app/ai/rhp/recipes/diverging-bars.html): Diverging stacked bar chart of survey answers, disagree to the left of zero and agree to the right, ranked by net agreement, with a switch between questions. Use it for Likert scales or any values on either side of zero.
- [donut](https://rhp.vercel.app/ai/rhp/recipes/donut.html): Donut chart: a few parts of one whole, each labeled inside its slice (or in a key under the donut when its label does not fit), the total in the middle, and the slice the reader points at, taps or reaches with the keyboard read out in its place. Use it for two to six parts of a total, one or two of them the story.
- [dumbbell](https://rhp.vercel.app/ai/rhp/recipes/dumbbell.html): Dumbbell chart of life expectancy in 1990 and 2020 for ten countries: a ring for the first value, a dot for the second and a bar between them, with a switch that re-sorts the countries by level or by change. Use it to compare two values per item and the gap between them.
- [gantt](https://rhp.vercel.app/ai/rhp/recipes/gantt.html): Gantt chart of a twelve-week product launch: a bar per task from its start to its end, the part done, the work that is late, a milestone, a today line drawn by an overlay Plot and week ticks drawn by a Scale, with a readout of the picked task and what it depends on. Use it for tasks over time and a schedule's progress.
- [grouped-bars](https://rhp.vercel.app/ai/rhp/recipes/grouped-bars.html): Grouped bar chart, two bars per category with the gap between them in the end gutter, and a switch that sorts the groups. Use it to compare two to four values side by side for each category.
- [heatmap](https://rhp.vercel.app/ai/rhp/recipes/heatmap.html): Heatmap: a value over two categories (weekday by hour), one colored cell each, with a readout of the cell the reader points at or taps and of the day in keyboard focus. It turns its days into columns on a phone. Use it for activity by day and hour, or any grid of counts.
- [histogram](https://rhp.vercel.app/ai/rhp/recipes/histogram.html): Histogram of marathon finish times made with bins(), one column per 5-minute bin, with a readout of the picked bin and the share of runners ahead of it. Use it to show how one measure is distributed and where values bunch.
- [line](https://rhp.vercel.app/ai/rhp/recipes/line.html): Line chart of one series over time on a second axis (years along the scale, values across it), with a callout that follows the pointer, a tap or the arrow keys. Use it for one measure over time.
- [live](https://rhp.vercel.app/ai/rhp/recipes/live.html): Live board: requests per second for six regions, each slat a line of the last minute that scrolls as readings arrive, the current value beside it, with pause and resume and a readout on hover, focus and tap. The lines move by rhp's JS version (animate) because the feed changes the data without pause. Use it for live or streaming data: metrics, sensors, prices, counts.
- [log-line](https://rhp.vercel.app/ai/rhp/recipes/log-line.html): Log line: one series over ten years on a log scale drawn as a ladder of doublings, every fall below the last record shaded, the falls of more than half measured, events marked at the foot, and a crosshair readout by pointer, tap, sideways drag or arrow keys. Use it for a price or any quantity that grows by multiples.
- [lollipop](https://rhp.vercel.app/ai/rhp/recipes/lollipop.html): Lollipop chart: ranked values as a thin stem and a dot, with a reference line and a switch between the values and their difference from the reference. Use it for a ranked list of prices, scores or rates, lighter than bars.
- [multi-line](https://rhp.vercel.app/ai/rhp/recipes/multi-line.html): Multi-line chart of several series over time on a second axis, with labels at the line ends kept apart and a crosshair whose readout lists every series for the year under the pointer, a tap or the arrow keys. Use it to compare a few series over time.
- [pyramid](https://rhp.vercel.app/ai/rhp/recipes/pyramid.html): Population pyramid: two sides of one population (men and women) by age band, oldest on top, with an age picked by pointer, tap or keyboard that lights everyone that age or older and reads out their share. Use it for any two groups compared across ordered bands.
- [race](https://rhp.vercel.app/ai/rhp/recipes/race.html): Bar chart race: ten economies ranked by GDP from 1990 to 2024, the bars gliding from year to year and sliding past each other as ranks change, with a play button, a year slider that lands on whole years, and a readout on hover, focus and tap. A playhead moves on every frame and each value is interpolated between the years around it, so the bars move by rhp's JS version (animate). Use it for a ranking that changes over time.
- [radial-bars](https://rhp.vercel.app/ai/rhp/recipes/radial-bars.html): Radial bars: one ring per goal, its arc the share of the goal reached, with a day switch that sweeps the arcs to another day. Use it for progress toward a few goals or targets, in percent.
- [scatter](https://rhp.vercel.app/ai/rhp/recipes/scatter.html): Scatter plot of two measures per item on a second axis, with a log scale, a few points labeled (short codes on phones) and a readout of the point nearest the pointer, a tap or the arrow keys. Use it to show how two measures relate across items.
- [silhouettes](https://rhp.vercel.app/ai/rhp/recipes/silhouettes.html): Silhouettes: each item drawn in its own outline (a shape() per row on a vertical Bar) to one scale on one street, its height on its top, the picked one's level carried across to the tallest with a dimension line, names on the street on wide screens and ranks with a key on narrow ones. Use it for things a reader knows by their shape: buildings, mountains, ships, bottles, animals.
- [slope](https://rhp.vercel.app/ai/rhp/recipes/slope.html): Slope chart: each item's value at two dates joined by a line on a second axis, labels kept apart on both sides, the change written beside each item, and the line nearest the pointer, a tap or the arrow keys picked out. Use it to compare change between two dates across items.
- [sparklines](https://rhp.vercel.app/ai/rhp/recipes/sparklines.html): Sparkline table: one small line per item, each scaled to its own peak, with the start level dashed, and a scrub through the years (pointer, tap, a sideways drag or arrow keys) that moves a dot along every line and updates each item's value and its change since the start. Use it for many series side by side, a table of trends.
- [stacked-100](https://rhp.vercel.app/ai/rhp/recipes/stacked-100.html): 100% stacked bar chart of shares per category, labeled where they fit, with a key that lights one part in every bar on hover, focus and tap. Use it to compare how a whole splits across several categories.
- [stacked-bars](https://rhp.vercel.app/ai/rhp/recipes/stacked-bars.html): Stacked bar chart of parts that add up to a total per category, with a key that moves one part to the start of every bar and ranks the bars by it. Use it for totals made of a few parts.
- [strip](https://rhp.vercel.app/ai/rhp/recipes/strip.html): Strip plot of restaurant ratings by cuisine: one dot per restaurant in its cuisine's band (an overlap Plot inside each slat), a median tick, and a readout of the restaurant the reader points at, taps or reaches with the arrow keys. Use it to show every value of a few groups.
- [tape](https://rhp.vercel.app/ai/rhp/recipes/tape.html): Tape: the parts of one whole laid end to end along a ruled measure and cut into equal lengths (a Chart per length, an overlap Plot of the parts that fall in it, a Scale of rules, notches and numerals that counts on), names and times inside a part only where the measured text fits, one group lit at rest, a big-number readout and a grouped key that picks too. Use it for how a day, a budget or any whole splits into parts that add up, read as lengths along one measure.
- [unit-stack](https://rhp.vercel.app/ai/rhp/recipes/unit-stack.html): Unit stack: stacked columns cut into counted units (coins), the picked part moved to the foot of every stack with its amount under the column, a picker of parts ranked by their total, and columns that lie down as rows on a phone. Use it for a total made of parts over periods, with one part to follow.
- [violin](https://rhp.vercel.app/ai/rhp/recipes/violin.html): Violin plot of hours of sleep by age group made with density(): a mirrored Area per group with its median, over a band of the recommended range, and a switch between weeknights and weekends that morphs the shapes. Use it to compare the full distribution of several groups.
- [waffle](https://rhp.vercel.app/ai/rhp/recipes/waffle.html): Waffle chart: 100 units in a 10 by 10 grid, one per person, colored by group, with a picker that lights the units a chosen group relates to. Use it for counts out of 100 or shares of a population.
- [waterfall](https://rhp.vercel.app/ai/rhp/recipes/waterfall.html): Waterfall chart from a starting value through gains and losses to a final total, each step linked to the next, with a switch between periods. Use it to show how one amount becomes another, step by step.

## Docs

- [What is rhp?](https://rhp.vercel.app/start/introduction/): rhp is a free, open-source SolidJS library that turns tabular data into interactive, infographic-style charts. You describe one slat, and rhp repeats it for every row of your data.
- [Install](https://rhp.vercel.app/start/install/): Add rhp to a project, or use it in a plain HTML page with no build step.
- [Your first chart](https://rhp.vercel.app/start/first-chart/): Build a bar chart step by step, from plain bars to a styled chart that sorts itself.
- [Build with AI](https://rhp.vercel.app/ai/): Make rhp charts with an AI agent using the rhp skill, MCP tools, or a prompt for a chat app.
- [Gallery](https://rhp.vercel.app/gallery/): Interactive plots, complete AI recipes, real-data posters, and articles built with rhp. Open one to explore the chart.

## Optional

- [Guide: Screen readers](https://rhp.vercel.app/guides/accessibility/): A chart reads as a named figure with a list of its slats, in the order they're shown.
- [Guide: Blocks](https://rhp.vercel.app/guides/blocks/): The eight individual building blocks of a slat, plus ManyDots for a bulk HTML scatter collection.
- [Guide: Data](https://rhp.vercel.app/guides/data/): How a Plot hands your data to its slats, as lists or as row objects, with computed values and keys.
- [Guide: Interaction](https://rhp.vercel.app/guides/interaction/): Hover states in CSS, clicks and keyboard with ordinary handlers, and choices fed back to the chart as data.
- [Guide: Layout and orientation](https://rhp.vercel.app/guides/layout/): Turn charts vertical, set slat sizes and make room for names and numbers.
- [Guide: Sorting and motion](https://rhp.vercel.app/guides/motion/): Sort rows with order and sortBy, and choose how values move, with CSS transitions or the JS version.
- [Guide: Charts inside slats](https://rhp.vercel.app/guides/nesting/): Put a Plot inside a slat to draw stacked bars, grouped bars, heatmaps and strips of dots.
- [Guide: Other frameworks](https://rhp.vercel.app/guides/other-frameworks/): Use rhp inside a React, Vue or Svelte app by drawing it into an element.
- [Guide: Scales and axes](https://rhp.vercel.app/guides/scales/): Set the chart's scale, choose its ticks and number format, or draw the scale your own way.
- [Guide: Server rendering](https://rhp.vercel.app/guides/server/): Draw charts on the server, so they show before any script runs; the browser then takes them over.
- [Guide: Styling](https://rhp.vercel.app/guides/styling/): Style charts with plain CSS. Classes, hover, gradients and images, plus a few rhp variables that work in both directions.
- [Guide: Colors and themes](https://rhp.vercel.app/guides/themes/): Set a chart's colors and font with a theme, and color blocks by theme names.
- [Reference: Blocks](https://rhp.vercel.app/reference/blocks/): Bar, Dot, Tick, Label, Cell, Place, Area and Line, plus ManyDots for bulk scatter points.
- [Reference: Chart](https://rhp.vercel.app/reference/chart/): The frame around one or more Plots. It sets the scale, the direction, the axis and the theme.
- [Reference: CSS](https://rhp.vercel.app/reference/css/): The selectors and variables rhp adds to a slat's CSS, and the theme colors.
- [Reference: Helpers](https://rhp.vercel.app/reference/helpers/): Small functions that turn raw data into what a chart needs, sort rows and set tick marks.
- [Reference: ManyDots](https://rhp.vercel.app/reference/manydots/): A light-DOM bulk point collection with shared styles, category classes, per-point colors, and native events.
- [Reference: Plot](https://rhp.vercel.app/reference/plot/): A stack of slats made from your data. Every prop that isn't a setting is data for the slats.
- [Reference: Poster](https://rhp.vercel.app/reference/poster/): The panel the gallery's examples sit in, a kicker, a headline, a dek and a note around a chart. Its looks are an optional stylesheet.
- [Reference: Scale](https://rhp.vercel.app/reference/scale/): Draw the chart's scale your own way, with a slat per tick.
- [Reference: slat()](https://rhp.vercel.app/reference/slat/): Give a slat its own CSS and layout, so it looks and fits the same in any app.