# Building Custom Charts in Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 July 2024 16:19 UTC](https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406 "2024-07-10T16:19:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 July 2024 16:19 UTC](https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406/1 "2024-07-10T16:19:59Z")

</div>

Hi All, we had a [FlowFuse](https://flowfuse.com/) customer recently ask about options for building custom charting inside a UI Template node for [FlowFuse Dashboard](https://dashboard.flowfuse.com/) (Node-RED Dashboard 2.0).

Today, I have added [three examples](https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html#building-custom-charts) (with increasing complexity) into the documentation, and thought the forum may appreciate me flagging them.

If you want to build your own, you can take a look at the ChartJS docs [here](https://www.chartjs.org/docs/latest/), but this pattern used would equally be as valuable in Apache eCharts, or any other charting library.

Happy building all.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 July 2024 16:47 UTC](https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406/2 "2024-07-10T16:47:42Z")

</div>

And here is one using echarts: [How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl](https://discourse.nodered.org/t/how-to-configure-echarts-in-dashboard-2/87259/4)

And if you are wondering why I bang on about echarts, checkout these demos: [Examples - Apache ECharts](https://echarts.apache.org/examples/en/index.html)

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [18 July 2024 10:51 UTC](https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406/3 "2024-07-18T10:51:58Z")

</div>

@joepavitt thanks for this.

One thing I've struggled with is the vuetify grid/flexbox I wonder if a future example is one on Flexox/grid for Dummies like me who are in the currently in the Google/Try/Catch/Refactor cycle.

For example I only recently found setting the flex-grow: 0 is what I needed to get text/button inputs to horizontally align and density="compact" to shrink text inputs for more compact view.

I'm sure you and the team have plenty of tips that would help us newbies.

Thanks

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [18 July 2024 11:11 UTC](https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406/4 "2024-07-18T11:11:57Z")

</div>

So, generally speaking a great way (and the way I learned) CSS Flexbox is: [https://flexboxfroggy.com/](https://flexboxfroggy.com/)

That's not Vuetify specific though, but would at least get you familiar with the underlying concepts like `space-between`, `space-around`.

> [@iiLaw](#):
>
> density="compact" to shrink text inputs for more compact view.

On this topic particularly, we do have plans to introduce a "Compact View" option on a theme which is coming up _a lot_: [Theme: Compact View · Issue #1095 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1095)

---

<div class="post-metadata">

**Author:** ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)\
**Post date:** [18 July 2024 12:46 UTC](https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406/5 "2024-07-18T12:46:40Z")

</div>

Thanks for this.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 August 2024 12:47 UTC](https://discourse.nodered.org/t/building-custom-charts-in-dashboard-2-0/89406/6 "2024-08-17T12:47:33Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.