# Interactive chart with zoom and a cursor functionality

**URL:** <https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926>\
**Category:** Feature Requests\
**Created:** [31 December 2021 13:20 UTC](https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926 "2021-12-31T13:20:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChankyTheConqueror](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chankytheconqueror/32/52296_2.png) [@ChankyTheConqueror](https://discourse.nodered.org/u/ChankyTheConqueror)\
**Post date:** [31 December 2021 13:20 UTC](https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926/1 "2021-12-31T13:20:40Z")

</div>

Dear developers,

I was wondering whether the chart node incase of a time graph, could be enhanced to have a option of having a second y-axis (or n y axes),data coming in could be differentiated with a new property e.g like msg.type where type defines the relation to the y axis incase of multiple axes.

another feature would be a zoom in/out functionality ((+) and (-) button would be sufficient , with an option of selecting which direction is to be zoomed)

and last but not least a switchable cursor line (a straight line over the whole graph) which shows the value of the data as you browse through the x axis.

Best regards

---

<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:** [31 December 2021 13:23 UTC](https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926/2 "2021-12-31T13:23:21Z")

</div>

have you tried the vega charts?

> **[node-red-node-ui-vega](https://www.npmjs.com/package/node-red-node-ui-vega)**
>
> Node-RED UI widget node for Vega visualization grammar

or uplot charts?

> **[node-red-contrib-ui-uplot-charts](https://www.npmjs.com/package/node-red-contrib-ui-uplot-charts)**
>
> alternative chart widget for the Node-RED dashboard

---

<div class="post-metadata">

**Author:** ![ChankyTheConqueror](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chankytheconqueror/32/52296_2.png) [@ChankyTheConqueror](https://discourse.nodered.org/u/ChankyTheConqueror)\
**Post date:** [31 December 2021 14:20 UTC](https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926/3 "2021-12-31T14:20:19Z")

</div>

not yet I'll try both of them thanks for the tip

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [31 December 2021 14:37 UTC](https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926/4 "2021-12-31T14:37:07Z")

</div>

Hello ..

> [@ChankyTheConqueror](#):
>
> zoom in/out functionality ((+) and (-) button

Apexcharts are also quite popular and there are a couple of examples on this Forum

> **[JavaScript Zoomable Timeseries – ApexCharts.js](https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/)**
>
> View an example of a Zoomable TimeSeries created in ApexCharts.js

---

<div class="post-metadata">

**Author:** ![ChankyTheConqueror](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chankytheconqueror/32/52296_2.png) [@ChankyTheConqueror](https://discourse.nodered.org/u/ChankyTheConqueror)\
**Post date:** [1 January 2022 11:59 UTC](https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926/5 "2022-01-01T11:59:24Z")

</div>

Hi,  
thank you for the tips, the apexChart variant would be exactly what i'm looking for. i just now need an example of how to use it.

Thanks and a happy new year!

---

<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:** [2 March 2022 11:59 UTC](https://discourse.nodered.org/t/interactive-chart-with-zoom-and-a-cursor-functionality/55926/6 "2022-03-02T11:59:50Z")

</div>

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