# Using a Variable in Canvas Render CSS

**URL:** <https://discuss.elastic.co/t/using-a-variable-in-canvas-render-css/305618>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [May 25, 2022, 2:11pm UTC](https://discuss.elastic.co/t/using-a-variable-in-canvas-render-css/305618 "2022-05-25T14:11:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![BenB196](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/benb196/32/83401_2.png) [@BenB196](https://discuss.elastic.co/u/BenB196)\
**Post date:** [May 25, 2022, 2:11pm UTC](https://discuss.elastic.co/t/using-a-variable-in-canvas-render-css/305618/1 "2022-05-25T14:11:34Z")

</div>

Hi All,

I have a need to use a variable in Canvas' render CSS, but I can't find a way to do this.

I'm effectively trying to do some math on an animation to be able to handle variable length text.

Canvas simplified example:

```auto
var_set name="open_alerts"
  value={essql query="SELECT kibana.alert.rule.name AS rule_name, kibana.alert.reason AS alert_reason FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE GROUP BY kibana.alert.rule.name, kibana.alert.reason"}
| var_set name="open_alerts_count"
  value={essql query="SELECT COUNT(*) as count FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE"}
| var name="open_alerts"
| markdown "Open Alerts: {{#each rows}}{{rule_name}} -- {{alert_reason}}; {{/each}}"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#005ac2" weight="bold" underline=false italic=false}
| render 
  css=".canvasRenderEl {
    white-space: nowrap;
      overflow: hidden;
  }

  .canvasRenderEl p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee calc(10s * 100) linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }" 
  containerStyle={containerStyle border="1px #e6e8db" backgroundColor="#e6e8db" padding="1px" borderRadius="3px"}

```

On the animation line I have currently:

```auto
animation: marquee calc(10s * 100) linear infinite;

```

In the `calc()` function, instead of using a static value of `100`, I'd like to use the variable: `open_alerts_count`, this way the scroll speed is dynamically set to the number of open alerts, rather than a fixed speed.

---

<div class="post-metadata">

**Author:** ![BenB196](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/benb196/32/83401_2.png) [@BenB196](https://discuss.elastic.co/u/BenB196)\
**Post date:** [May 25, 2022, 2:19pm UTC](https://discuss.elastic.co/t/using-a-variable-in-canvas-render-css/305618/2 "2022-05-25T14:19:30Z")

</div>

Figured this out and answering my own question in case someone else comes across this problem. You can use `string` to concatenate the variable into the rest of the CSS.

```auto
var_set name="open_alerts"
  value={essql query="SELECT kibana.alert.rule.name AS rule_name, kibana.alert.reason AS alert_reason FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE GROUP BY kibana.alert.rule.name, kibana.alert.reason"}
| var_set name="open_alerts_count"
  value={essql query="SELECT COUNT(*) as count FROM \".alerts-observability.metrics.alerts-*\" WHERE event.action = 'active' AND kibana.alert.workflow_status = 'open' AND kibana.alert.rule.name LIKE 'Remote_Office_%_Critical' AND \"@timestamp\" > NOW() - INTERVAL 60 MINUTE"}
| var name="open_alerts"
| markdown "Open Alerts: {{#each rows}}{{rule_name}} -- {{alert_reason}}; {{/each}}"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#005ac2" weight="bold" underline=false italic=false}
| render 
  css={string ".canvasRenderEl {
    white-space: nowrap;
      overflow: hidden;
  }

  .canvasRenderEl p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee calc(10s * " {var "open_alerts_count" | getCell "count"} ") linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }"}
  containerStyle={containerStyle border="1px #e6e8db" backgroundColor="#e6e8db" padding="1px" borderRadius="3px"}

```

---

<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:** [June 22, 2022, 2:19pm UTC](https://discuss.elastic.co/t/using-a-variable-in-canvas-render-css/305618/3 "2022-06-22T14:19:53Z")

</div>

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