# How to fill background of image depending on level or percentage **URL:** \ **Category:** Grafana\ **Created:** [December 3, 2019, 9:59pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565 "2019-12-03T21:59:06Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![marco67](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@marco67](https://community.grafana.com/u/marco67)\ **Post date:** [December 3, 2019, 9:59pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/1 "2019-12-03T21:59:06Z")
Hello…I am trying that the background of an image change (filling) depending on the metric value (level or percentage for instance). i.e an thermometer that filled when the temperature is inceasing, or a tank that show his filling. I tried with SVG plugin, but until i cant achieve it. Anyone has a hint that can help me ?? Thanks ---
**Author:** ![mzazm](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mzazm](https://community.grafana.com/u/mzazm)\ **Post date:** [December 4, 2019, 8:03am UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/2 "2019-12-04T08:03:19Z")
Hello. Give a look at this: [https://github.com/MarcusCalidus/marcuscalidus-svg-panel](https://github.com/MarcusCalidus/marcuscalidus-svg-panel) I used in the past ---
**Author:** ![gretamosa](https://avatars.discourse-cdn.com/v4/letter/g/5f8ce5/32.png) [@gretamosa](https://community.grafana.com/u/gretamosa)\ **Post date:** [December 4, 2019, 9:40am UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/3 "2019-12-04T09:40:25Z")
One more [option](https://grafana.com/grafana/plugins/agenty-flowcharting-panel) two analyze (both are really good) ---
**Author:** ![marco67](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@marco67](https://community.grafana.com/u/marco67)\ **Post date:** [December 4, 2019, 12:10pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/4 "2019-12-04T12:10:36Z")
Thanks @mzazm and @gretamosa . I had used flowcharting, but not to this purpose, and I tried SVg panel, making an image with Inkscape and copy it in the plugin…but in both panels (Flowcharting and SVG), i dont know how to achieve that image change…i have to use different images whit differents levels overlapping each other ??..If you can give a hint, or show me an example, i will be very grateful ---
**Author:** ![gretamosa](https://avatars.discourse-cdn.com/v4/letter/g/5f8ce5/32.png) [@gretamosa](https://community.grafana.com/u/gretamosa)\ **Post date:** [December 4, 2019, 12:25pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/5 "2019-12-04T12:25:35Z")
Ok, now I understand better your use-case. Have you tried disable\_sanitize\_html parameter, and code some javascript code for changing SVG images according with certain custom situations? ---
**Author:** ![marco67](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@marco67](https://community.grafana.com/u/marco67)\ **Post date:** [December 4, 2019, 12:51pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/6 "2019-12-04T12:51:44Z")
No, I havent…I will try that…but where do i put the javascript code ???, In the Events section of the svg plugin ( onHandleMetric and/or onInit)??.. Thanks ---
**Author:** ![gretamosa](https://avatars.discourse-cdn.com/v4/letter/g/5f8ce5/32.png) [@gretamosa](https://community.grafana.com/u/gretamosa)\ **Post date:** [December 4, 2019, 12:53pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/7 "2019-12-04T12:53:27Z")
Sorry I forgot it! In a simple text panel with HTML. ---
**Author:** ![mzazm](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mzazm](https://community.grafana.com/u/mzazm)\ **Post date:** [December 4, 2019, 1:03pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/8 "2019-12-04T13:03:24Z")
For the SVG panel plugin this is an useful video I found online when I wanted to do some coloring of the svg elements. I believe you can change a property of the svg according to the result of the query thus changing the size of the colored area, but I am not an expert. I have to say that there have not been many commits lately. So if I were you I would spend my time on FlowCharting as gretamosa is suggesting. ---
**Author:** ![marco67](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@marco67](https://community.grafana.com/u/marco67)\ **Post date:** [December 4, 2019, 1:08pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/9 "2019-12-04T13:08:06Z")
thank you very much mzazm. ---
**Author:** ![marco67](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@marco67](https://community.grafana.com/u/marco67)\ **Post date:** [December 4, 2019, 1:12pm UTC](https://community.grafana.com/t/how-to-fill-background-of-image-depending-on-level-or-percentage/23565/10 "2019-12-04T13:12:15Z")
I am a little confused…I could do what i want, using just text panel?? is not necessary to use flowcharting or svg panels??