# Create Custom Visualization for Kibana

**URL:** <https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837>\
**Category:** Kibana\
**Created:** [March 19, 2021, 4:41pm UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837 "2021-03-19T16:41:24Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mastersmit](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@mastersmit](https://discuss.elastic.co/u/mastersmit)\
**Post date:** [March 19, 2021, 4:41pm UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/1 "2021-03-19T16:41:24Z")

</div>

I have a requirement to create a visualisation that replicates one of the legacy system.  
In the below screenshot it shows the expected and what i have so far...

I could create a frontend, but was hoping if there is a way i could create a visualisation and embed as part of dashboard.

 ![Screen Shot](https://us1.discourse-cdn.com/elastic/original/3X/b/3/b39fd320eaeef93f83fd480bd4ae33b805c9f957.png)

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [March 19, 2021, 5:06pm UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/2 "2021-03-19T17:06:25Z")

</div>

Can you go into further detail about the functionality and how this would work?

---

<div class="post-metadata">

**Author:** ![mastersmit](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@mastersmit](https://discuss.elastic.co/u/mastersmit)\
**Post date:** [March 19, 2021, 5:22pm UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/3 "2021-03-19T17:22:43Z")

</div>

Hi Aaron,

Functionality is similiar to what I have achieved using DataTable i.e. I search by a reference number in the field, I am able to see the a single record (as a row, in the table view).

What I want to achieve, is a more customised view of that same exact data, into a more business friendly (i.e. aligning to the legacy system view).

let me know if this helps.

Regards.

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [March 19, 2021, 5:30pm UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/4 "2021-03-19T17:30:58Z")

</div>

Got it, thanks for the explanation.

So good news is you don't need to build a custom frontend for this and can use [Vega](https://www.elastic.co/guide/en/kibana/current/vega.html). Bad news is Vega could be a large learning curve depending on your background.

Below is an example of how to draw boxes and put text on the screen which you can copy/paste in the [Vega Editor](https://vega.github.io/editor/#/edited) to view this. In my example I am using static data for demo purposes so when you build this in Kibana you will need to do a query against an index to pull the data.

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 300,
  "height": 150,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [{"name": "Release Date", "value": "8 February 2010"}]
    }
  ],
  "marks": [
    {
      "name": "boxOuter",
      "type": "rect",
      "encode": {
        "enter": {
          "stroke": {"value": "black"},
          "x": {"signal": "padding.left"},
          "y": {"signal": "padding.top"},
          "width": {"signal": "width - padding.right - padding.left"},
          "height": {"signal": "height - padding.top - padding.bottom"},
          "cornerRadius": {"value": 15}
        }
      }
    },
    {
      "name": "boxHeader",
      "type": "rect",
      "encode": {
        "enter": {
          "fill": {"value": "#8aacb8"},
          "stroke": {"value": "black"},
          "x": {"signal": "padding.left"},
          "y": {"signal": "padding.top"},
          "width": {"signal": "width - padding.right - padding.left"},
          "height": {"signal": "height / 4"},
          "cornerRadiusTopLeft": {"value": 15},
          "cornerRadiusTopRight": {"value": 15}
        }
      }
    },
    {
      "name": "boxHeaderText",
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "padding.top + ((height / 4) / 2)"},
          "text": {"field": "name"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"signal": "(width / 20) + 15"},
          "fill": {"value": "#222b2e"}
        }
      }
    },
    {
      "name": "boxText",
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"signal": "width / 2"},
          "y": {"signal": "(height / 2) + ((height / 4) / 2)"},
          "text": {"field": "value"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"signal": "(width / 20) + 20"},
          "fill": {"value": "#eb2d3a"}
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![mastersmit](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@mastersmit](https://discuss.elastic.co/u/mastersmit)\
**Post date:** [March 19, 2021, 5:45pm UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/5 "2021-03-19T17:45:37Z")

</div>

Amazing. Thanks Aaron for prompt & thorough response.

Let me look into Vega, definitely a new topic but if that solves my problem, its a try worth giving.

Thanks again.

Have a great weekend!

---

<div class="post-metadata">

**Author:** ![mastersmit](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@mastersmit](https://discuss.elastic.co/u/mastersmit)\
**Post date:** [March 20, 2021, 7:46am UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/6 "2021-03-20T07:46:12Z")

</div>

> [@aaron-nimocks](#):
>
> ```auto
> "width": 300,
> "height": 150,
> "padding": 5,
> 
> ```

@aaron-nimocks Manage to do a few twicks, but now i am wondering how do i get the orderId from the search filter of the dashboard?

Here is the so-far result:

 ![Screen Shot](https://us1.discourse-cdn.com/elastic/original/3X/2/a/2a3be8140f3da3285b6fef0bc8563bc81a8caceb.png)

```
{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  "params": [
    { "element": }
  ],
  data: {
    url: {
      index: kibana_sample_data_ecommerce
      body: {
        query: {
          match: {
            order_id: {
              query: "572928"
            }
          }
        }
        size: 3
      }
    }
    format: {
      property: hits.hits
    }
  }
  width: 300
  height: 150
  autosize: fit
  title: {
    text: Order Details
    fontSize: 24
    fontWeight: normal
    anchor: start
  }
  layer: [
    {
      mark: {
        type: text
        fontSize: 24
        dx: -300
        dy: -130
      }
      encoding: {
        text: {
          value: Order Id:
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 14
        dx: -200
        dy: -130
      }
      encoding: {
        text: {
          field: _source.order_id
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 24
        dx: -290
        dy: -100
      }
      encoding: {
        text: {
          value: Full Name:
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 14
        dx: -170
        dy: -100
      }
      encoding: {
        text: {
          field: _source.customer_full_name
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 24
        dx: -270
        dy: -70
      }
      encoding: {
        text: {
          value: Taxable Price:
        }
        color: {
          value: black
        }
      }
    }
    {
      mark: {
        type: text
        fontSize: 14
        dx: -170
        dy: -70
      }
      encoding: {
        text: {
          field: _source.taxful_total_price
        }
        color: {
          value: black
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [March 20, 2021, 8:34am UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/7 "2021-03-20T08:34:40Z")

</div>

AFAIK  
If you remove the query filter in vega it will take the filter context from the dashboard.

---

<div class="post-metadata">

**Author:** ![mastersmit](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@mastersmit](https://discuss.elastic.co/u/mastersmit)\
**Post date:** [March 20, 2021, 9:01am UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/8 "2021-03-20T09:01:56Z")

</div>

Simple, yet effective. I had to add this  
%context%: true  
%timefield%: order\_date

and it worked in Viz, but when i embed the same in the dashboard, the search is not picking up... anything extra i have to do?

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [March 20, 2021, 9:10am UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/9 "2021-03-20T09:10:56Z")

</div>

Don't have time to test it..  
But this one is picking up the dashboard search context:

> **[Sankey visualization example at elastic content share](https://elastic-content-share.eu/downloads/sankey-visualization-example/)**
>
> This is an example of how to build an sankey visualization using the vega visualization in Kibana.

This may help to dig into the issue

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [March 21, 2021, 12:47am UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/10 "2021-03-21T00:47:48Z")

</div>

Can you post your [spec](https://www.elastic.co/guide/en/kibana/current/vega.html#asking-for-help-with-a-vega-spec)? Not sure why it wouldn't work in a dashboard but does in a visualization.

---

<div class="post-metadata">

**Author:** ![mastersmit](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@mastersmit](https://discuss.elastic.co/u/mastersmit)\
**Post date:** [March 21, 2021, 9:51am UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/11 "2021-03-21T09:51:29Z")

</div>

Thanks @aaron-nimocks@Felix_Roessel Not sure what was the problem, i tried the same today and it worked even in the dashboard (however i did recreate the dashboard).

---

<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:** [April 18, 2021, 9:52am UTC](https://discuss.elastic.co/t/create-custom-visualization-for-kibana/267837/12 "2021-04-18T09:52:02Z")

</div>

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