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

**URL:** <https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540>\
**Category:** Kibana\
**Created:** [November 22, 2022, 11:17am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540 "2022-11-22T11:17:30Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abj\_Ins](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@Abj\_Ins](https://discuss.elastic.co/u/Abj_Ins)\
**Post date:** [November 22, 2022, 11:17am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/1 "2022-11-22T11:17:30Z")

</div>

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.  
 ![MicrosoftTeams-image (13)](https://us1.discourse-cdn.com/elastic/original/3X/1/8/1825caedcb6d7046674c1d39423f89b0723784e6.png)  
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.  
 ![MicrosoftTeams-image (15)](https://us1.discourse-cdn.com/elastic/original/3X/f/4/f45cb5182f07e784f1ad95ad289a6a163a03d814.png)

 ![MicrosoftTeams-image (16)](https://us1.discourse-cdn.com/elastic/original/3X/5/0/50ab4c234c8b54c3772236f14bbe66d5ba43d1b9.png)  
 ![MicrosoftTeams-image (17)](https://us1.discourse-cdn.com/elastic/original/3X/a/a/aa68f88ec3c270da8eec47078a306b850b251934.png)

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.

---

<div class="post-metadata">

**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\
**Post date:** [November 22, 2022, 2:14pm UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/2 "2022-11-22T14:14:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Abj\_Ins](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@Abj\_Ins](https://discuss.elastic.co/u/Abj_Ins)\
**Post date:** [November 23, 2022, 5:57am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/3 "2022-11-23T05:57:42Z")

</div>

Hi Marco,

Here are the requested details.

1. Kibana Version: 8.3.3
2. Kibana Timezone has been configured as "Browser".  
 ![MicrosoftTeams-image (18)](https://us1.discourse-cdn.com/elastic/original/3X/3/2/32c9f9e1515f8509786714c54a8caa8cff42ab3b.png)
3. TSVB Panel Options Interval value has been set as "auto".  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/5/85781037c500d2344802b22a8241b3e13ab94d1c.png)

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

---

<div class="post-metadata">

**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\
**Post date:** [November 24, 2022, 9:44am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/4 "2022-11-24T09:44:30Z")

</div>

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

 ![Screenshot 2022-11-24 at 15.13.37](https://us1.discourse-cdn.com/elastic/original/3X/a/f/afc7e640431a5067bd9e6cfc90b59cc00310526a.jpeg)

---

<div class="post-metadata">

**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\
**Post date:** [November 24, 2022, 10:00am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/5 "2022-11-24T10:00:54Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Abj\_Ins](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@Abj\_Ins](https://discuss.elastic.co/u/Abj_Ins)\
**Post date:** [November 24, 2022, 10:18am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/6 "2022-11-24T10:18:46Z")

</div>

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

```auto
{
  "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"
}

```

---

<div class="post-metadata">

**Author:** ![Abj\_Ins](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@Abj\_Ins](https://discuss.elastic.co/u/Abj_Ins)\
**Post date:** [November 24, 2022, 10:34am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/7 "2022-11-24T10:34:57Z")

</div>

Thanks Macro...  
Please find below as requested.

1. We have tested on both Microsoft Edge and Google Chrome versions  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/1/71d8d64192065ca21a061e268b802e1d93f68d4a.png)

![image](https://us1.discourse-cdn.com/elastic/original/3X/f/d/fd74367797f99c82ad1238cf15075e932a085139.png)

1. Tested on both Windows 10 and 11.  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/b/7bdd980782b58ccbfbf64323be81985a255dedce.png)

![image](https://us1.discourse-cdn.com/elastic/original/3X/c/0/c079d56d9decddebc8eebe9d8c269bf6b7e92eba.png)

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

---

<div class="post-metadata">

**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\
**Post date:** [November 24, 2022, 10:49am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/8 "2022-11-24T10:49:24Z")

</div>

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

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

```

1. move your mouse over the chart to show the cursor (don't click on anything to keep the keyboard focus on the console)
2. 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.

 ![Screenshot 2022-11-24 at 16.11.58](https://us1.discourse-cdn.com/elastic/original/3X/4/9/497f85f688a291df4e8764685d9cf9ea1c1cd9be.png)

---

<div class="post-metadata">

**Author:** ![Abj\_Ins](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@Abj\_Ins](https://discuss.elastic.co/u/Abj_Ins)\
**Post date:** [November 25, 2022, 11:30am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/9 "2022-11-25T11:30:32Z")

</div>

Thanks Macro for the response.

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

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/b/a/ba40a2c3635cfdcda9dc27922fc887c6635c1ae8.png)

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\
**Post date:** [November 25, 2022, 12:19pm UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/10 "2022-11-25T12:19:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Abj\_Ins](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@Abj\_Ins](https://discuss.elastic.co/u/Abj_Ins)\
**Post date:** [November 28, 2022, 7:15am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/11 "2022-11-28T07:15:34Z")

</div>

Hi Macro, find the below warning.

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

---

<div class="post-metadata">

**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\
**Post date:** [December 12, 2022, 5:12pm UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/12 "2022-12-12T17:12:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Abj\_Ins](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@Abj\_Ins](https://discuss.elastic.co/u/Abj_Ins)\
**Post date:** [December 13, 2022, 5:20am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/13 "2022-12-13T05:20:34Z")

</div>

No problem, Marko...

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

 ![MicrosoftTeams-image (20)](https://us1.discourse-cdn.com/elastic/original/3X/9/f/9f0d2d04cd371725919f96ac80c938ca8deb16a0.jpeg)

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

Thanks.

---

<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 10, 2023, 4:34am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/14 "2023-01-10T04:34:20Z")

</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 7, 2023, 4:34am UTC](https://discuss.elastic.co/t/mismatch-between-dotted-lines-and-the-default-dark-lines-in-time-series-of-tsvb-visualization/319540/15 "2023-02-07T04:34:34Z")

</div>

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