Time intervals on x-axis

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.

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

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?

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>

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.

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