Time intervals on x-axis

Elastic Stack Kibana
1

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
Screenshot from 2022-08-12 15-08-051488×464 30.3 KB

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 ).

2

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?

3

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

Would like to mention I am using Kibana version 7.16.2.

Sample code:

  <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>
4

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

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

yourCustomXDomain should be an object with the shape of:

{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.