Skip to content
rhp

Install

Pick the way that fits you.

In a new project

This makes a small Solid app with Vite and adds rhp to it:

npm create vite@latest my-charts -- --template solid
cd my-charts
npm install @bezda/rhp
npm run dev

Then open src/App.jsx, replace what’s there with the code from your first chart, and save. The page in your browser updates as you type.

In a Solid project you already have

npm install @bezda/rhp

rhp has no stylesheet to import: it brings its own CSS the first time a chart appears. Its package gives each build what it needs: a Solid app’s build (Vite, SolidStart, Astro) compiles rhp with the app, and a plain browser or server gets a build of its own.

In a plain HTML page

No npm, no build step: load rhp from a CDN in a <script type="module">. This file has Solid built in (36 kB gzipped).

Without a build step there is no JSX, so you write slats with Solid’s html template instead. It’s the same chart, with two differences:

  • a component is written <${Bar} …> and closed with <//>
  • a value that changes is wrapped in a function: ${() => d.sold}
<div id="chart"></div>

<script type="module">
  import { Chart, Plot, Bar, Label, html, render } from "https://cdn.jsdelivr.net/npm/@bezda/rhp@2/dist/standalone.js";

  const Fruit = (d) => html`
    <div>
      <${Label} edge="start">${() => d.fruit}<//>
      <${Bar} to=${() => d.sold} />
      <${Label} at=${() => d.sold}>${() => d.sold}<//>
    </div>`;

  render(() => html`
    <${Chart} scale=${[0, 30]}>
      <${Plot} fruit=${["Apples", "Bananas", "Cherries"]} sold=${[12, 18, 7]}>${Fruit}<//>
    <//>`, document.getElementById("chart"));
</script>

The same file also gives you createSignal, createMemo, createStore and Solid’s other basics, so data that changes works the same way as in the rest of these pages.

From current source

ManyDots is part of the upcoming npm 2.0.3 release and is available in the current GitHub source. The live documentation examples bundle that source build. The published npm 2.0.2 package predates ManyDots, so build the source package to use it in your app:

git clone https://github.com/bezda-team/rhp.git rhp-source
cd rhp-source
npm ci
npm run build
npm pack

npm pack prints the generated package filename. From your app, install that file:

npm install /path/to/rhp-source/bezda-rhp-2.0.2.tgz

The resulting package exports ManyDots from both @bezda/rhp and @bezda/rhp/standalone. For a plain HTML page, serve the built dist/standalone.js from your own site instead of the published CDN build.

In a React, Vue or Svelte app

In a React app, install @bezda/rhp-react: it turns an rhp chart into a React component. rhp draws into any element on the page, so it lives inside Vue, Svelte and other apps too. See other frameworks.

Browsers

rhp works in current versions of Chrome, Edge, Safari and Firefox. It also draws on a server, for SolidStart, Astro and other Solid servers: see server rendering.