# Time intervals on x-axis

**URL:** https://discuss.elastic.co/t/time-intervals-on-x-axis/312001
**Category:** Kibana
**Created:** [August 12, 2022, 9:45am UTC](https://discuss.elastic.co/t/time-intervals-on-x-axis/312001 "2022-08-12T09:45:01Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Sayali\_Gangodak](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sayali_gangodak/32/102114_2.png) [@Sayali\_Gangodak](https://discuss.elastic.co/u/Sayali_Gangodak)
#### Post date: [August 12, 2022, 9:45am UTC](https://discuss.elastic.co/t/time-intervals-on-x-axis/312001/1 "2022-08-12T09:45:01Z")

</div>

Hi,  
I am using elastic ui charts to plot a custom timeline graph. On x-axis I want to display time range which will change dynamically according to to timepicker selected by user on dashboard . I am able to plot time for which the data is actually present. But I want x-axis to display date-time even for those dates for which the data is not present. I want the functionality to be like if the user wants to see 1 year data and has selected 1 year in timepicker then my chart's x-axis should show one year time range and ticks on x-axis should be like (for eg: from 01-Jan-2021 to 01-Dec-2021) even if data is not present for some of these months. This is similar to how we see in kibana lens graphs. But I want this functionality in my custom created elastic ui chart.

 ![Screenshot from 2022-08-12 15-08-05](https://us1.discourse-cdn.com/elastic/original/3X/d/a/daf3cf94d0d2a1d81840dfb4dfe9bc6450b133f7.png)

above chart is created by kibana lens and I want the x-axis ticks on my custom chart similar to how we see in this above screenshot (In timepicker tool on dashboard, I have selected 1 year ).

---

<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: [August 12, 2022, 1:50pm UTC](https://discuss.elastic.co/t/time-intervals-on-x-axis/312001/2 "2022-08-12T13:50:56Z")

</div>

Hi @Sayali_Gangodak ,

just to be clear, are you using any Kibana tool to build your chart, or plain React + Elastic Chart?  
In case of the latter, can you share some code?

---

<div class="post-metadata">

### Author: ![Sayali\_Gangodak](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sayali_gangodak/32/102114_2.png) [@Sayali\_Gangodak](https://discuss.elastic.co/u/Sayali_Gangodak)
#### Post date: [August 16, 2022, 6:25am UTC](https://discuss.elastic.co/t/time-intervals-on-x-axis/312001/3 "2022-08-16T06:25:18Z")

</div>

Hi @Marco_Liberati ,  
I am using plain React + Elastic Chart. Have referred to following links to create the chart.

> **[Elastic UI](https://elastic.github.io/eui/#/elastic-charts/time-series)**
>
> The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts.

> **[Elastic UI](https://elastic.github.io/eui/#/elastic-charts/creating-charts)**
>
> The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts.

Would like to mention I am using Kibana version 7.16.2.

Sample code:

```auto
  <Chart size={{height: 200}}>
  <LineSeries
    id="financial"
    name="Financial"
    data={[[0,1],[1,2]]}
    xScaleType="time"
    xAccessor={0}
    yAccessors={[1]}
    
  />
  <Axis
    title="timestamp"
    id="bottom-axis"
    position="bottom"
    tickFormat={timeFormatter('YYYY-MM-DD')}
    
  />
  <Axis
    id="left-axis"
    position="left"
    showGridLines
    tickFormat={(d) => Number(d).toFixed(2)}

  />
</Chart>

```

---

<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: [August 24, 2022, 4:42pm UTC](https://discuss.elastic.co/t/time-intervals-on-x-axis/312001/4 "2022-08-24T16:42:53Z")

</div>

You can use a `Settings` component that can extend the domain of the X axis providing an additional information:

```auto
<Chart>
  <Settings xDomain={yourCustomXDomain} />
  <LineSeries etc.../>
  ...
</Chart>

```

`yourCustomXDomain` should be an object with the shape of:

```auto
{min: number, max: number, minInterval: number}

```

In Lens, for instance, this value is retrieved from the original request sent to Elasticsearch and applied to the current data.

---

<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: [September 21, 2022, 4:43pm UTC](https://discuss.elastic.co/t/time-intervals-on-x-axis/312001/5 "2022-09-21T16:43:01Z")

</div>

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