# Add css to existting visualizations

**URL:** https://discuss.elastic.co/t/add-css-to-existting-visualizations/190557
**Category:** Kibana
**Created:** [July 15, 2019, 2:08pm UTC](https://discuss.elastic.co/t/add-css-to-existting-visualizations/190557 "2019-07-15T14:08:21Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![sudeepvd](https://avatars.discourse-cdn.com/v4/letter/s/a698b9/32.png) [@sudeepvd](https://discuss.elastic.co/u/sudeepvd)
#### Post date: [July 15, 2019, 2:08pm UTC](https://discuss.elastic.co/t/add-css-to-existting-visualizations/190557/1 "2019-07-15T14:08:21Z")

</div>

I have currently set a CPU usage visualization using metricbeat. The graph as part of the visualization has a default width and height. Since I am importing the iframe in another app I cannot modify css for iframe(cross side scripting). Please assist or guide me on solutions for overiiding the default height and width.

---

<div class="post-metadata">

### Author: ![tiagocosta](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tiagocosta/32/40045_2.png) [@tiagocosta](https://discuss.elastic.co/u/tiagocosta)
#### Post date: [July 15, 2019, 9:02pm UTC](https://discuss.elastic.co/t/add-css-to-existting-visualizations/190557/2 "2019-07-15T21:02:27Z")

</div>

@sudeepvd I think your best option would be the plugins system. Just create a plugin that exports your css overrides. You can found more info about it on other threads discussed here before:

> [@How to apply custom css in Kibana UI](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/6):
>
> If you are running dashboards internally/at a customer where you control the browser running the Kibana, you can also use browser injected css. In firefox you can use the userContent.css ([http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes](http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes)) or install a plugin in chrome like stylus or similar ([https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en))

---

<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: [August 12, 2019, 9:02pm UTC](https://discuss.elastic.co/t/add-css-to-existting-visualizations/190557/3 "2019-08-12T21:02:31Z")

</div>

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