Mismatch between dotted lines and the default dark lines in Time Series of TSVB visualization

[Abj_Ins]

Hi Team,

In the Timeseries visualization, we can see dotted lines in the middle of the visualization which is matching exactly on top of the default dark lines.

However, when we hover the mouse either on the left or on the right from the middle of the visualization, the mismatch between the dotted lines and the default dark line increases.
Please find the attached screenshots for the reference.

Please let us know if this is the expected behavior of Timeseries visualization in kibana or this can be rectified, if so, kindly let us know the steps to correct it.
Thanks in Advance.

[markov00 (Marco Vettorello)]

Hi, could you please provide me with the following configurations:

• Kibana version
• Kibana configured timezone and if configured as "browser", your local timezone
• the TSVB Panel Options Interval value (usually could be auto or something like 1d 12h etc)

If you are in a DST time zone, does the misalignment happen on on both the value before the DST change and after it or does it happen only in one particular size of the Daylight Saving Time switch date?

[Abj_Ins]

Hi Marco,

Here are the requested details.

1. Kibana Version: 8.3.3
2. Kibana Timezone has been configured as "Browser".
   
   
3. TSVB Panel Options Interval value has been set as "auto".
   
   

We are not observing DST timezone. We are following: Asia/Calcutta timezone.

[markov00 (Marco Vettorello)]

Thanks for sharing those info.
I've tried to replicate it locally but without a chance.
Could you please copy and paste the Request from the Inspector panel? I'm mostly interested in the date_histogram part

[markov00 (Marco Vettorello)]

A few more things I like to ask you to understand better the problem:

• can you share the browser and its version?
• can you share your OS version?
• Are you using a modified version or a fork of Kibana? (I'm asking this because I see blue titles on the dashboard panels, that in general are black instead)

[Abj_Ins]

Thanks for the response Marco...
Please find the below as mentioned.

{
  "size": 0,
  "query": {
    "bool": {
      "must": [
        {
          "range": {
            "status_upd_dttm": {
              "gte": "2022-10-24T18:30:00.000Z",
              "lte": "2022-11-24T10:02:47.986Z",
              "format": "strict_date_optional_time"
            }
          }
        },
        {
          "bool": {
            "must": [],
            "filter": [
              {
                "bool": {
                  "should": [
                    {
                      "bool": {
                        "should": [
                          {
                            "match_phrase": {
                              "imd_status.keyword": "COMPLETE    "
                            }
                          }
                        ],
                        "minimum_should_match": 1
                      }
                    },
                    {
                      "bool": {
                        "should": [
                          {
                            "match_phrase": {
                              "imd_status.keyword": "ERROR       "
                            }
                          }
                        ],
                        "minimum_should_match": 1
                      }
                    },
                    {
                      "bool": {
                        "should": [
                          {
                            "match_phrase": {
                              "imd_status.keyword": "VEEEXCP     "
                            }
                          }
                        ],
                        "minimum_should_match": 1
                      }
                    },
                    {
                      "bool": {
                        "should": [
                          {
                            "match_phrase": {
                              "imd_status.keyword": "VEEREADY    "
                            }
                          }
                        ],
                        "minimum_should_match": 1
                      }
                    },
                    {
                      "bool": {
                        "should": [
                          {
                            "match_phrase": {
                              "imd_status.keyword": "PENDING"
                            }
                          }
                        ],
                        "minimum_should_match": 1
                      }
                    }
                  ],
                  "minimum_should_match": 1
                }
              }
            ],
            "should": [],
            "must_not": []
          }
        }
      ],
      "filter": [],
      "should": [],
      "must_not": []
    }
  },
  "aggs": {
    "timeseries": {
      "date_histogram": {
        "field": "status_upd_dttm",
        "min_doc_count": 0,
        "time_zone": "Asia/Calcutta",
        "extended_bounds": {
          "min": 1666636200000,
          "max": 1669284167986
        },
        "calendar_interval": "1d"
      },
      "aggs": {
        "a554f42b-756b-4731-811c-40013ecfb2ca": {
          "bucket_script": {
            "buckets_path": {
              "count": "_count"
            },
            "script": {
              "source": "count  1",
              "lang": "expression"
            },
            "gap_policy": "skip"
          }
        }
      },
      "meta": {
        "timeField": "status_upd_dttm",
        "panelId": "c8d9a60a-c321-4ab1-83c2-a9fbe9f89653",
        "seriesId": "e99555b6-34ea-4e44-8c90-a3ffb41971cd",
        "intervalString": "1d",
        "dataViewId": "ab69f730-5e70-11ed-82b5-e5135c34f537",
        "indexPatternString": "initial_and_final_measurements",
        "normalized": true
      }
    }
  },
  "runtime_mappings": {},
  "timeout": "30000ms"
}

[Abj_Ins]

Thanks Macro...
Please find below as requested.

1. We have tested on both Microsoft Edge and Google Chrome versions
   

2. Tested on both Windows 10 and 11.
   

3. Yes, we have made few cosmetic changes on the out of the box Kibana product, like Browser Title, Background Image of Login Page, Loading Logo, Left Logo of Home Page and Exit Page only.

[markov00 (Marco Vettorello)]

In this case it looks like a style change has reached one of the cursor container of the chart making it shift a bit.
Could you please check with the chrome dev tools if the echContainer div and the echCrosshair__cursor SVG are aligned correctly?

You can check that following these steps:

1. Open Chrome dev tools
2. Open the Console
3. Copy the following in the console (don't hit enter yet):

document.getElementsByClassName('echContainer')[0].getBoundingClientRect().left === document.getElementsByClassName('echCrosshair__cursor')[0].getBoundingClientRect().left

4. move your mouse over the chart to show the cursor (don't click on anything to keep the keyboard focus on the console)
5. press enter

if the console shows a message false then there is a misalignment caused by some style change you have probably made when customizing Kibana, if not we could investigate more.

[Abj_Ins]

Thanks Macro for the response.

As mentioned above, we are getting "true" message on specific visual and even for entire Dashboard also as below.

Thanks in advance.

[markov00 (Marco Vettorello)]

I've seen something interesting on the console, could you please share the whole console warning message and if any other error message on before that warning?
thanks

[Abj_Ins]

Hi Macro, find the below warning.

[markov00 (Marco Vettorello)]

Hey @Abj_Ins sorry for the late reply. I'm wondering if that happens also on other time charts from Lens or Agg Based one or does it happens only with TSVB?

[Abj_Ins]

No problem, Marko...

Here we tried, time chart with Lens also and still issues persist.

So, we can conclude... the issue with both Lens & TSVB (Time Series) as well.

Thanks.