# How to fill area between 2 point with Kibana

**URL:** <https://discuss.elastic.co/t/how-to-fill-area-between-2-point-with-kibana/297883>\
**Category:** Kibana\
**Created:** [February 22, 2022, 11:27am UTC](https://discuss.elastic.co/t/how-to-fill-area-between-2-point-with-kibana/297883 "2022-02-22T11:27:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alparslan](https://avatars.discourse-cdn.com/v4/letter/a/e19adc/32.png) [@alparslan](https://discuss.elastic.co/u/alparslan)\
**Post date:** [February 22, 2022, 11:27am UTC](https://discuss.elastic.co/t/how-to-fill-area-between-2-point-with-kibana/297883/1 "2022-02-22T11:27:36Z")

</div>

Hi,

I need to visualize "busy | available" graph for my data.  
Sample data and sketchy graph here is below.

What is best approach to catch something like this graph?

I tried something with also TSVB. But i just wonder how to fill area between two point.

 ![graph](https://us1.discourse-cdn.com/elastic/original/3X/6/9/6910b130a0d46b36d00198d7e0080625a605ec2a.png)

* * *

```auto
[
    {
        "name": "Car1",
        "startedDate": "2021-01-21T10:00:00.000+03:00",
        "endedDate": "2021-01-21T10:15:00.000+03:00"
    },
    {
        "name": "Car1",
        "startedDate": "2021-01-21T10:25:00.000+03:00",
        "endedDate": "2021-01-21T10:40:00.000+03:00"
    },
    {
        "name": "Car1",
        "startedDate": "2021-01-21T10:45:00.000+03:00",
        "endedDate": "2021-01-21T10:50:00.000+03:00"
    },
    {
        "name": "Car1",
        "startedDate": "2021-01-21T10:55:00.000+03:00",
        "endedDate": "2021-01-21T11:05:00.000+03:00"
    },
    {
        "name": "Car2",
        "startedDate": "2021-01-21T10:00:00.000+03:00",
        "endedDate": "2021-01-21T10:40:00.000+03:00"
    },
    {
        "name": "Car2",
        "startedDate": "2021-01-21T10:45:00.000+03:00",
        "endedDate": "2021-01-21T110:20:00.000+03:00"
    },
    {
        "name": "Car3",
        "startedDate": "2021-01-21T10:00:00.000+03:00",
        "endedDate": "2021-01-21T10:25:00.000+03:00"
    },
    {
        "name": "Car3",
        "startedDate": "2021-01-21T10:25:00.000+03:00",
        "endedDate": "2021-01-21T10:50:00.000+03:00"
    },
    {
        "name": "Car3",
        "startedDate": "2021-01-21T10:50:00.000+03:00",
        "endedDate": "2021-01-21T11:20:00.000+03:00"
    },
    {
        "name": "Car4",
        "startedDate": "2021-01-21T10:55:00.000+03:00",
        "endedDate": "2021-01-21T11:20:00.000+03:00"
    }
]

```

---

<div class="post-metadata">

**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\
**Post date:** [February 22, 2022, 5:12pm UTC](https://discuss.elastic.co/t/how-to-fill-area-between-2-point-with-kibana/297883/2 "2022-02-22T17:12:32Z")

</div>

I suppose you need custom visualizatoin using vega or vega-lite.

Here is a [sample chart](https://vega.github.io/vega-lite/examples/bar_gantt.html) of vega-lite.

---

<div class="post-metadata">

**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\
**Post date:** [February 22, 2022, 5:16pm UTC](https://discuss.elastic.co/t/how-to-fill-area-between-2-point-with-kibana/297883/3 "2022-02-22T17:16:57Z")

</div>

This is a sample using your data. A lot of customization could be possible.

![image](https://us1.discourse-cdn.com/elastic/original/3X/e/7/e74f0f5d33262a99051cd72fa786062094612ccd.png)

> **[Editor/IDE for Vega and Vega-Lite](https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEzjQATjRyZ289ABUA7mwAEpdTqhJBggJ4mocq5jiykL5Q5hILEE-XcTCBg2QxMkExgaCEw2MnUkBBM2ADMTHHU4KC06d10TGlkTAGU4d0xBOHDZT3oqzME8uWCtEyY4TEM4VxMEQurPZAAPf0QcOATMBkzKRRV3FFRQYmsGNTQAbVA3BDg0EABhHwBGOZifDwARdz30ACYABjvj-geX5-1jh9QH79-KX4PADUDwAzD8HnNXKplNcXPtHs9Xu9jp9vscxBCAb8QeDfiAAL4KbaJW6HE5nTAXOCwm4Ip4vN78D5fVB3TH-QG4iFQmo0uFkxGMlFo1AAFj+D2xwLBPKJJN2+yO6lOSnOFn5dPuDORzNRrLFHKlXNl+KU0M18O1SKZLO+Ykl0u5+PlIB2ZOVqpA6quWpAQt1dtQYiNTtNkPNfNpVv9Ott+uOP1DJrxkNd7qVPjulOp0cFcZFrN+WJTPMjMIF9Jthe+EpLOPDhOJbtJmfU2bVVI1earwr1osN9Zlqd5Fb9Afjn1ZjyHzrTzYz6GVoJz3cr1r7QeLnIbI-Llvz1f70+Tu7lC9bS58K87ufXsaPQfZs8b+57G8D+vtjtLLoviqvdQb29LtfRjCca2DH8zzNEALXfB9NwTNloOHc8FQ9HwxVXMDDyQ0UQxfPc4Kje8IOPRMZx3NCXQAXSJEBkHUABrfYmB8XlHGUQoyDQUBbD4kAUhoOBBGUfYMyUTBbHGfY2HUbi3EEJsQCGQThNE8T0B9A85mk2T0BcBAcHk6wVKGbMliEkSxP2eDKwJRygA)**
>
> The Vega editor is a web application for authoring and testing Vega and Vega-Lite visualizations. It includes a number of example specifications that showcase both the visual encodings and interaction techniques.

---

<div class="post-metadata">

**Author:** ![alparslan](https://avatars.discourse-cdn.com/v4/letter/a/e19adc/32.png) [@alparslan](https://discuss.elastic.co/u/alparslan)\
**Post date:** [February 24, 2022, 6:25am UTC](https://discuss.elastic.co/t/how-to-fill-area-between-2-point-with-kibana/297883/4 "2022-02-24T06:25:19Z")

</div>

It looks nice, thank you

---

<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:** [March 24, 2022, 6:25am UTC](https://discuss.elastic.co/t/how-to-fill-area-between-2-point-with-kibana/297883/5 "2022-03-24T06:25:21Z")

</div>

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