# Dash canvas adjustment

**URL:** <https://discuss.elastic.co/t/dash-canvas-adjustment/356614>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [April 2, 2024, 12:52pm UTC](https://discuss.elastic.co/t/dash-canvas-adjustment/356614 "2024-04-02T12:52:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![francieliton\_araujo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/francieliton_araujo/32/47771_2.png) [@francieliton\_araujo](https://discuss.elastic.co/u/francieliton_araujo)\
**Post date:** [April 2, 2024, 12:52pm UTC](https://discuss.elastic.co/t/dash-canvas-adjustment/356614/1 "2024-04-02T12:52:26Z")

</div>

In this forum I found this screen that shows the day and time in real time however it comes in the form to x/xx/xxxx 0-00-00  
I would like it to be in the format xx/xx/xxxx 00-00-00

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
 
  "signals": [
    {
      "name": "time",
      "init": " month(now()) + '/' + date(now()) + '/' + year(now()) + ' ' + hours(now()) + ':' + minutes(now()) + ':' + seconds(now())",
      "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "month(now()) + '/' + date(now()) + '/' + year(now()) + ' ' + hours(now()) + ':' + minutes(now()) + ':' + seconds(now())"}]
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "update": {
          "text": {"signal": "time"},

          "opacity": {"value": 1},
          "x": {"value": 10},
          "y": {"value": 10},
          "fontSize": {"value": "35"}
        }
      }
    }
  ]
}

```

![image](https://us1.discourse-cdn.com/elastic/original/3X/4/7/4751a0a4c4af370bba9422d826acf19dbad63c80.png)

---

<div class="post-metadata">

**Author:** ![jsanz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jsanz/32/53734_2.png) [@jsanz](https://discuss.elastic.co/u/jsanz)\
**Post date:** [April 29, 2024, 5:03pm UTC](https://discuss.elastic.co/t/dash-canvas-adjustment/356614/2 "2024-04-29T17:03:29Z")

</div>

Using `timeFormat` and the format spec from the [d3 docs](https://d3js.org/d3-time-format) allows you to use padded numbers

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
 
  "signals": [
    {
      "name": "time",
      "init": "timeFormat(now(),'%m/%d/%Y - %H:%M:%S')",
      "on": [
        {
          "events": 
            {
              "type": "timer", 
              "throttle": 1000
            }, 
          "update": "timeFormat(now(),'%m/%d/%Y - %H:%M:%S')"
        }
      ]
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "update": {
          "text": {"signal": "time"},
          "opacity": {"value": 1},
          "x": {"value": 10},
          "y": {"value": 10},
          "fontSize": {"value": 35}
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 27, 2024, 5:04pm UTC](https://discuss.elastic.co/t/dash-canvas-adjustment/356614/3 "2024-05-27T17:04:02Z")

</div>

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