# 3D Chart \[BoxGeometry\]

**URL:** <https://discourse.threejs.org/t/3d-chart-boxgeometry/48683>\
**Category:** Resources\
**Tags:** geometry\
**Created:** [March 4, 2023, 5:50pm UTC](https://discourse.threejs.org/t/3d-chart-boxgeometry/48683 "2023-03-04T17:50:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 4, 2023, 5:50pm UTC](https://discourse.threejs.org/t/3d-chart-boxgeometry/48683/1 "2023-03-04T17:50:59Z")

</div>

Hi community!  
An attempt to create a 3D-chart. Inspired by [Creating a 3D Area Chart with D3.js & Three.js](https://discourse.threejs.org/t/creating-a-3d-area-chart-with-d3-js-three-js/48610)

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/7/67413b36198df6595eb00bab45f20bf6b9817e46.png)

Demo: [https://codepen.io/prisoner849/full/oNPZPYE](https://codepen.io/prisoner849/full/oNPZPYE)

---

<div class="post-metadata">

**Author:** ![vasilii](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vasilii/32/530_2.png) [@vasilii](https://discourse.threejs.org/u/vasilii)\
**Post date:** [March 4, 2023, 6:36pm UTC](https://discourse.threejs.org/t/3d-chart-boxgeometry/48683/2 "2023-03-04T18:36:42Z")

</div>

Why not tag “showcase” ? 🙂

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 4, 2023, 6:47pm UTC](https://discourse.threejs.org/t/3d-chart-boxgeometry/48683/3 "2023-03-04T18:47:52Z")

</div>

@prisoner849 is so kind to share the demo as a editable live example so it’s ideal for the resource category.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 4, 2023, 7:39pm UTC](https://discourse.threejs.org/t/3d-chart-boxgeometry/48683/4 "2023-03-04T19:39:23Z")

</div>

Yeah, I thought it’s worth to be in Resources, as it’s more like a starting point/example rather than a finished art/project 😊

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [October 5, 2024, 6:39pm UTC](https://discourse.threejs.org/t/3d-chart-boxgeometry/48683/5 "2024-10-05T18:39:56Z")

</div>

For those who might be looking for an updated version, in the form of a standalone HTML file, here it is with slight changes to colors / alignment - as I thought they could be but the whole idea still belongs to @prisoner849.

[3D Chart.zip](https://discourse.threejs.org/uploads/short-url/2UVdedIBQqDEPXd8N3wKcDVpq8g.zip) (2.9 KB)

PS: Not really sure how to shift the label rotation around its center instead of its inward edge, anybody with an idea of how to do this then feel free to share it.