# Is It Possible to Implement an Interactive Tooth Chart in WeWeb?

**URL:** https://community.weweb.io/t/is-it-possible-to-implement-an-interactive-tooth-chart-in-weweb/16770
**Category:** How do I?
**Tags:** custom-components
**Created:** [February 23, 2025, 4:29am UTC](https://community.weweb.io/t/is-it-possible-to-implement-an-interactive-tooth-chart-in-weweb/16770 "2025-02-23T04:29:13Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Alchuu](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@Alchuu](https://community.weweb.io/u/Alchuu)
#### Post date: [February 23, 2025, 4:29am UTC](https://community.weweb.io/t/is-it-possible-to-implement-an-interactive-tooth-chart-in-weweb/16770/1 "2025-02-23T04:29:13Z")

</div>

Hi everyone,

I’m looking to integrate an interactive tooth chart into WeWeb, where users can click on individual teeth to perform actions. I found this SVG-based example on CodePen: [Tooth Chart CodePen](https://codepen.io/johnstuif/pen/JdOXWa).

The functionality I need is as follows:

- Users should first select a tooth, then choose a procedure.
- Depending on the selected procedure, a visual indicator should be applied to the tooth—either a circle inside the tooth or a dotted border around it.
- I may also need to add arches for dentures.

Would creating a custom component be the only way to implement this in WeWeb, or are there any alternative approaches using built-in features?

I’d love to hear any suggestions or best practices!

Thanks! 😊

Here is the image for reference:

 ![Screenshot 2025-02-21 102510](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9b0220661824dc7bfc23b7c2a098e5aa66ad2f16.png)

---

<div class="post-metadata">

### Author: ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)
#### Post date: [February 23, 2025, 6:32am UTC](https://community.weweb.io/t/is-it-possible-to-implement-an-interactive-tooth-chart-in-weweb/16770/2 "2025-02-23T06:32:28Z")

</div>

There might be a better way of doing it, but If I had to do it I would just wrap it in a div with a set height and width, then I’d have each different tooth as an svg with position set to “absolute” so you could fine tune the layout.

---

<div class="post-metadata">

### Author: ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)
#### Post date: [February 23, 2025, 7:32am UTC](https://community.weweb.io/t/is-it-possible-to-implement-an-interactive-tooth-chart-in-weweb/16770/3 "2025-02-23T07:32:32Z")

</div>

You indeed can add event listeners to individual SVG paths, but it requires at the very least some code inside the editor. Ideally you’d wrap this in a reusable component, or just go straight for custom coded.

The issue with absolute positioning is that it’s hard to make it responsive. You’d need to mantain the aspect ratio of the wrapper, because otherwise any change would probably make it act funky.

A custom coded component for this could take like 2-3 hours from my experience (I built plenty). Unless you want more advanced features.

---

<div class="post-metadata">

### Author: ![Alchuu](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@Alchuu](https://community.weweb.io/u/Alchuu)
#### Post date: [February 24, 2025, 6:32am UTC](https://community.weweb.io/t/is-it-possible-to-implement-an-interactive-tooth-chart-in-weweb/16770/4 "2025-02-24T06:32:36Z")

</div>

Thanks for your answer! I see that I’ll need to take a closer look at custom components.