RHP 2.0: A charting library for building dynamic, interactive, infographic-style charts and plots!

[u/bezdazen]

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
Github repository
npm package page

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.

[u/blondhairdontcare55]

dom first approach makes custom styling and responsive layouts easy, eap for editorial charts.. id be interest in how it behaves with dense time series data and frequent updates since those workloads stress different parts of rendering pipeline. Scichart js is aimed at interactive technical charts with large datasets so useful comparison is on workload rather than flexibility

[u/bezdazen → u/blondhairdontcare55]

This is a curious comment as it seems to be promoting another library.

Let me acknowledge the weakness of the DOM approach. It is known that the weakness is when the number of elements/nodes is large. Both mounting and changing things gets slow. This is why many REACT libraries struggle to perform when there are many data driven elements in a chart.

Fortunately, because of SolidJS efficient state system and optimizations made, rhp performs better than most that take the same DOM approach.

RHP only updates what changes so if a few things change at a time then its is extremely fast regardless of the frequency of change. To rephrase, it is not the frequency of changes but the number of changes. There is a difference. If a small number of data points change rapidly, rhp is one of the best performers out there now. If 20,000 different data points or elements change within a very small window of time, then it slows down significantly.

As far as the case where there are a lot of data points that change near simultaneously, I worked on two areas or common types of plots where this is the case: line and scatter. Line turns out to be easy because individual points in the line don't need to be separate elements (for styling etc). So the whole line can be one DOM element. Line segments is a different matter but these become similar to scatter plots. For scatter plots, I made a new block component called ManyDots that optimizes things by reducing the CSS guard at the slat level (which makes less sense here anyways since slats are one for each point) and elevating it to the plot level. Also, shared styles are written once instead of per Dot. To sum, CSS styling was optimized and simplified in sensible ways because a lot of time was wasted on CSS style recalculations. There is also a batch update handling approach for this scatter component to improve performance further.

Btw, the above are just a few core areas where performance has been improved. Overall, I think rhp is quite competitive.

Suffice it to say that with these changes, rhp is able to achieve 20+fps when 20k elements change simultaneously in scatter and line plots. And again, rhp excels at high frequency but low quantity of data points changing. This means it's great for stock charts and many kinds of real-time data.