# How can display horizontal bar on the Timelion? (or another chart)

**URL:** <https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661>\
**Category:** Kibana\
**Created:** [December 7, 2022, 8:19am UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661 "2022-12-07T08:19:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cusis\_Eel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cusis_eel/32/106504_2.png) [@Cusis\_Eel](https://discuss.elastic.co/u/Cusis_Eel)\
**Post date:** [December 7, 2022, 8:19am UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661/1 "2022-12-07T08:19:08Z")

</div>

![image](https://us1.discourse-cdn.com/elastic/original/3X/9/1/918b61815f52eedb9fb3f554738cd4849186b789.png)

Help this please. (sample json too)  
Thanks.

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [December 7, 2022, 9:24am UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661/2 "2022-12-07T09:24:39Z")

</div>

Hi @Cusis_Eel

do you have a sample record with the data to represent?  
As first sight I would say Vega is your best bet, as that looks like some sort of Gantt chart.  
One question I have is, can detected timings overlap each other? If not, then probably borrowing some code from a Vega Gantt chart can work (using just one category for the Y axis)

---

<div class="post-metadata">

**Author:** ![Cusis\_Eel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cusis_eel/32/106504_2.png) [@Cusis\_Eel](https://discuss.elastic.co/u/Cusis_Eel)\
**Post date:** [December 7, 2022, 10:02am UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661/3 "2022-12-07T10:02:57Z")

</div>

Thank you for your answer.  
Perhaps don't overlap each other.  
There is no sample code. We will prepare the json data needed to draw the graph above.  
Either way is fine, so please let me know.  
(The using current version is 7.17.5, but we can upgrade to 8.3.2 if necessary.)

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [December 7, 2022, 5:43pm UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661/4 "2022-12-07T17:43:47Z")

</div>

Have a look at this answer here with a semi-full Vega configuration: [Gantt chart on Kibana using version 7.11 - #4 by Marco\_Liberati](https://discuss.elastic.co/t/gantt-chart-on-kibana-using-version-7-11/265917/4)

In the `y` encoding you might use always the same value (so either a field with a static value, or a static string) to have a single "swimlane":

```auto
encoding: {
    y: {
      field: _source.Date // <== change this in the linked configuration
      type: nominal
    }
...

```

---

<div class="post-metadata">

**Author:** ![Cusis\_Eel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cusis_eel/32/106504_2.png) [@Cusis\_Eel](https://discuss.elastic.co/u/Cusis_Eel)\
**Post date:** [December 10, 2022, 3:28am UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661/5 "2022-12-10T03:28:11Z")

</div>

![image](https://us1.discourse-cdn.com/elastic/original/3X/6/5/65172e4dffc3ddffb63c7b36659ddb0356feec11.png)

thanks for your reply.  
Your reply, and trying various ways,  
The results were obtained as shown in the following figure.

However, there is a problem that the width area over time is not properly visualized like an image. What's the problem?

All I want is an absolute size. For example, I want to divide it into 24 hours of size by 1 minute or 5 minutes.

```auto
{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  data: {
    url: {
      %context%: true
      %timefield%: input_date
      index: dummy02
      body: { }
    }
    format: {
      property: hits.hits
    }
  }
  mark: bar
    encoding: {
      "x": {
        "field": "_source.start","type" : "ordinal"
      },
      "x2": {
        "field": "_source.end","type" : "ordinal"
      },
      "y": {
        "field": "_source.name","type" : "nominal"
      }
    }
}

```

this is json data

```auto
{
    "input_date" : "2022-12-01",
    "start" : "02:15",
    "end" : "02:30",
    "name" : "noname"
}

```

---

<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:** [January 7, 2023, 1:50am UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661/6 "2023-01-07T01:50:02Z")

</div>



---

<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:** [February 4, 2023, 1:50am UTC](https://discuss.elastic.co/t/how-can-display-horizontal-bar-on-the-timelion-or-another-chart/320661/7 "2023-02-04T01:50:11Z")

</div>

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