Webcomponents or Custom Elements for Charts

[nileshtrivedi]

Has anyone attempted to create webcomponents or custom elements for basic chart-types so that instead of Javascript, only HTML code is required to render a chart?

An example would be:

<pie-chart>
  <pie-slice value="30">A</slice>
  <pie-slice value="20">B</slice>
  <pie-slice value="50">Others</slice>
</pie-chart>

One benefit of this approach is that it is much closer to a nice concise DSL for charts and therefore, dynamic generation of charts would become much easier. For example, a large-language model could be used to generated charts on the fly, as and when needed.

[CAYdenberg]

There's numerous data-vis libraries for React and other frontend UI frameworks, which are sort of in that vein (as in, they use custom elements). Most (but not all) draw SVG instead of canvas, however.

[nileshtrivedi]

Thanks. Could you please share some links?

I specifically need webcomponents, not React/Vue/Angular components because webcomponents are framework-agnostic and nodejs-independent and therefore much more amenable to be dynamically generated by AI and presented to the user.

Use of SVG is acceptable for this purpose.

[CAYdenberg]

This was a good summary of the field a few years ago: https://css-tricks.com/react-dataviz/

Two newcomers are visx and semiotic.

I'm unaware of any library that targets web components specifically, and I'm not sure it would really have the same range of options in terms of composing components. It would be great if it did, though.