RHP 2.0: A charting library for building dynamic…
0 reactions
RHP 2.0: A charting library for building dynamic, interactive, infographic-style charts and plots!
**rhp** (Reactive Html Plots) 2.0 is the successor of rhp 1.0 which was a react charting library I built 3 years ago. rhp 2.0 is now an open-source SolidJS library of reactive components. It does not use Canvas or SVG for building the entire chart but HTML elements, CSS, and Javascript. This makes certain interactive and styling things easier (simpler to implement) that would normally be tricky to implement in SVG or Canvas.
Current temporary landing page https://rhp.vercel.app
Github repository https://github.com/bezda-team/rhp
npm package page https://www.npmjs.com/package/@bezda/rhp
One thing I like is how straightforward it is to make charts that respond and adjust to layout changes. Some of the wider plots will rearrange their elements to be more vertical stacked for mobile devices.
# Background
The original library (now called rhp 1.0) was over-engineered and overly complex. I was aiming the project in two competing directions and it had too many unnecessary components and an extra interface layer. I learned a lot from the project and from improving its performance. I took what worked and stripped all the unnecessary complexity. I also split the two most important core basic blocks (leaf components) into a group of more focused blocks where each is for presenting/containing a specific type of visual element. I also removed niche features and redundancy. Oh, and I moved over to using SolidJS because of signals (simplifies state management which allows charts to update faster when data changes...for free).
The end result of all the above is a library that performs really well overall and is pretty lightweight (less than 20kB. 16kB without special imports).
# More exciting things coming to rhp
* working on a separate mcp server that will allow AI to create plots using rhp 2.0 while still keeping devs (working directly with rhp) as first class users.
* planning to make this framework agnostic in the very near future.
* working on a new landing page. The current one will be for docs.
#technology #dev #programming
**rhp** (Reactive Html Plots) 2.0 is the successor of rhp 1.0 which was a react charting library I built 3 years ago. rhp 2.0 is now an open-source SolidJS library of reactive components. It does not use Canvas or SVG for building the entire chart but HTML elements, CSS, and Javascript. This makes certain interactive and styling things easier (simpler to implement) that would normally be tricky to implement in SVG or Canvas.
Current temporary landing page https://rhp.vercel.app
Github repository https://github.com/bezda-team/rhp
npm package page https://www.npmjs.com/package/@bezda/rhp
One thing I like is how straightforward it is to make charts that respond and adjust to layout changes. Some of the wider plots will rearrange their elements to be more vertical stacked for mobile devices.
# Background
The original library (now called rhp 1.0) was over-engineered and overly complex. I was aiming the project in two competing directions and it had too many unnecessary components and an extra interface layer. I learned a lot from the project and from improving its performance. I took what worked and stripped all the unnecessary complexity. I also split the two most important core basic blocks (leaf components) into a group of more focused blocks where each is for presenting/containing a specific type of visual element. I also removed niche features and redundancy. Oh, and I moved over to using SolidJS because of signals (simplifies state management which allows charts to update faster when data changes...for free).
The end result of all the above is a library that performs really well overall and is pretty lightweight (less than 20kB. 16kB without special imports).
# More exciting things coming to rhp
* working on a separate mcp server that will allow AI to create plots using rhp 2.0 while still keeping devs (working directly with rhp) as first class users.
* planning to make this framework agnostic in the very near future.
* working on a new landing page. The current one will be for docs.
#technology #dev #programming
| 1,000 mlx | |
| 4 | |
| 0 |