Modification of Color field formatter


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.

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 (

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

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?

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

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 });


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