# Musson Industrial’s Embr-Charts Module

**URL:** <https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [June 10, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618 "2024-06-10T12:53:46Z")\
**Posts on this page:** 1\
**Showing post:** 110

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [February 16, 2025, 7:33pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/110 "2025-02-16T19:33:06Z")

</div>

Version 2.0.2 is out, and includes the `timestack` scale.

> **[Release @embr-modules/charts@2.0.2 · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fcharts%402.0.2)**
>
> Patch Changes
> 
> 
> 39d5957: Add 'timestack' scale by @jkmnt (https://github.com/jkmnt/chartjs-scale-timestack).
> Update License.
> 
> 
> Updated dependencies \[39d5957\]
> 
> @embr-modules/charts-web@2.0.2

> **Demo View**
>
> ```python
> {
> "custom": {
> "format": {
> "month": "short"
> }
> },
> "params": {},
> "propConfig": {
> "custom.data": {
> "access": "PRIVATE",
> "binding": {
> "config": {
> "expression": "now(0)"
> },
> "transforms": [
> {
> "code": "\t\t\n\timport random\n\t\t\n\tnow \u003d value\n\tend \u003d system.date.toMillis(now)\n\tstart \u003d system.date.toMillis(system.date.addMonths(now, -1))\n\tsteps \u003d (end - start) / 2048\n\t\n\tpoints \u003d []\n\ty \u003d 50\n\t\n\tmoves \u003d [-1, 1]\n\t\n\tfor ts in range(start, end, steps):\n\t\ty +\u003d random.choice(moves)\n\t\tpoints.append({ \u0027x\u0027: ts, \u0027y\u0027: y })\n\t\t\t\n\treturn points",
> "type": "script"
> }
> ],
> "type": "expr"
> },
> "persistent": false
> },
> "custom.format": {
> "persistent": true
> }
> },
> "props": {
> "defaultSize": {
> "height": 477
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "Chartjs"
> },
> "position": {
> "basis": "300px",
> "grow": 1,
> "shrink": 0
> },
> "propConfig": {
> "props.data.datasets[0].data": {
> "binding": {
> "config": {
> "path": "view.custom.data"
> },
> "type": "property"
> }
> },
> "props.options.scales.x.timestack.format_style.month": {
> "binding": {
> "config": {
> "path": "view.custom.format.month"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "data": {
> "datasets": [
> {
> "label": "Dataset 1"
> }
> ]
> },
> "options": {
> "elements": {
> "line": {
> "borderWidth": 1
> },
> "point": {
> "radius": 0
> }
> },
> "parsing": false,
> "plugins": {
> "legend": {
> "display": false
> }
> },
> "scales": {
> "x": {
> "timestack": {
> "format_style": {}
> },
> "type": "timestack"
> },
> "y": {
> "type": "linear"
> }
> }
> },
> "redraw": true
> },
> "type": "embr.chart.chart-js"
> },
> {
> "children": [
> {
> "events": {
> "component": {
> "onActionPerformed": {
> "config": {
> "script": "\tchart \u003d self.parent.parent.getChild(\"Chartjs\")\n\tproxy \u003d chart.getJavaScriptProxy(\u0027chart\u0027)\n\tproxy.runAsync(\u0027\u0027\u0027\n\t\t() \u003d\u003e this.resetZoom()\n\t\u0027\u0027\u0027)\n\t"
> },
> "scope": "G",
> "type": "script"
> }
> }
> },
> "meta": {
> "name": "ResetZoom"
> },
> "position": {
> "shrink": 0
> },
> "props": {
> "image": {
> "icon": {
> "path": "material/zoom_out_map"
> }
> },
> "style": {
> "padding": "0.25rem"
> },
> "text": "Reset Zoom"
> },
> "type": "ia.input.button"
> },
> {
> "children": [
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "shrink": 0
> },
> "props": {
> "text": "Month Style"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Dropdown"
> },
> "position": {
> "basis": "150px",
> "shrink": 0
> },
> "propConfig": {
> "props.value": {
> "binding": {
> "config": {
> "bidirectional": true,
> "path": "view.custom.format.month"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "options": [
> {
> "label": "short",
> "value": "short"
> },
> {
> "label": "long",
> "value": "long"
> },
> {
> "label": "numeric",
> "value": "numeric"
> },
> {
> "label": "2-digit",
> "value": "2-digit"
> }
> ],
> "style": {
> "minWidth": "150px"
> }
> },
> "type": "ia.input.dropdown"
> }
> ],
> "meta": {
> "name": "MonthStyle"
> },
> "position": {
> "shrink": 0
> },
> "props": {
> "style": {
> "gap": "0.5rem",
> "marginLeft": "auto"
> }
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "Interaction"
> },
> "position": {
> "shrink": 0
> },
> "props": {
> "style": {
> "padding": "0.5rem"
> }
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column",
> "style": {
> "gap": "1rem",
> "padding": "0.25rem"
> }
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

---

_[View the full topic](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618)._