# Modification of Color field formatter

**URL:** <https://discuss.elastic.co/t/modification-of-color-field-formatter/89751>\
**Category:** Kibana\
**Created:** [June 16, 2017, 4:28pm UTC](https://discuss.elastic.co/t/modification-of-color-field-formatter/89751 "2017-06-16T16:28:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JaimeCr](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@JaimeCr](https://discuss.elastic.co/u/JaimeCr)\
**Post date:** [June 16, 2017, 4:28pm UTC](https://discuss.elastic.co/t/modification-of-color-field-formatter/89751/1 "2017-06-16T16:28:59Z")

</div>

Hi,

I'm trying to create a new field formatter for Kibana 5.4.1 that somehow mixes the "Color" and "Number" formatters. Specifically, I want to have a Color formatter that also rounds the numbers to three decimal points, in order to avoid huge numbers when calculating aggregations such as averages. To do that, I have slightly changed the "\_convert" function in Color.js file under "/opt/kibana/src/ui/public/stringify/types", adding a substring function call:

> \_Color.prototype.\_convert = {  
> html(val) {  
> const color = \_.findLast(this.param('colors'), ({ range }) =\> {  
> if (!range) return;  
> const [start, end] = range.split(':');  
> return val \>= Number(start) && val \<= Number(end);  
> });  
> if (!color) return \_.asPrettyString(val);

> ```
> // Substring the value before formatting it
> val = val.substring(0,3);
> const styleColor = color.text ? `color: ${color.text};` : '';
> const styleBackgroundColor = color.background ? `background-color: ${color.background};` : '';
> return `<span style="${styleColor}${styleBackgroundColor}">${_.escape(val)}</span>`;
> }
> };
> 
> ```

However, after modifying the file and reloading the page and index, the field format remains the same (the numbers are colored (after configuring the formatter) but not rounded. Am I missing something here?

Any help would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [June 17, 2017, 6:47am UTC](https://discuss.elastic.co/t/modification-of-color-field-formatter/89751/2 "2017-06-17T06:47:08Z")

</div>

are you using production version if kibana? its very possible that the bundles were not rebuild and you are still running old code, you should try the dev version ([https://github.com/elastic/kibana](https://github.com/elastic/kibana))

not sure about the code, would need to dive into it deeper to give you any valuable feedback

---

<div class="post-metadata">

**Author:** ![JaimeCr](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@JaimeCr](https://discuss.elastic.co/u/JaimeCr)\
**Post date:** [June 19, 2017, 5:40am UTC](https://discuss.elastic.co/t/modification-of-color-field-formatter/89751/3 "2017-06-19T05:40:16Z")

</div>

Thanks for your feedback, @ppisljar. I'm not using the development version. Is there any way to rebuild the bundles using the stable 5.4.1 version?

---

<div class="post-metadata">

**Author:** ![ppisljar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ppisljar/32/11588_2.png) [@ppisljar](https://discuss.elastic.co/u/ppisljar)\
**Post date:** [June 19, 2017, 7:23am UTC](https://discuss.elastic.co/t/modification-of-color-field-formatter/89751/4 "2017-06-19T07:23:13Z")

</div>

you could try removing optimize/bundles/\* ... but im. not sure if it work

---

<div class="post-metadata">

**Author:** ![JaimeCr](https://avatars.discourse-cdn.com/v4/letter/j/4af34b/32.png) [@JaimeCr](https://discuss.elastic.co/u/JaimeCr)\
**Post date:** [June 20, 2017, 11:03am UTC](https://discuss.elastic.co/t/modification-of-color-field-formatter/89751/5 "2017-06-20T11:03:46Z")

</div>

Thanks for your help @ppisljar. It worked deleting that folder and restarting Kibana.

I modified the \_convert function, using Math.round. The code of the modified function is:

> \_Color.prototype.\_convert = {  
> html(val) {  
> const color = this.findColorRuleForVal(val);
> 
> ```
> // Added line of code. Rounds to up to 2 decimal points
> val = Math.round(val * 100) / 100
> 
> ```

> ```
> if (!color) return _.asPrettyString(val);
> 
> ```

> ```
> let style = '';
> if (color.text) style += `color: ${color.text};`;
> if (color.background) style += `background-color: ${color.background};`;
> return convertTemplate({ val, style });
> }
> 
> ```
> 
> };

---

<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:** [July 18, 2017, 11:04am UTC](https://discuss.elastic.co/t/modification-of-color-field-formatter/89751/6 "2017-07-18T11:04:02Z")

</div>

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