# How to zoom correctly in a multiple line-style graph in Observable?

**URL:** <https://talk.observablehq.com/t/how-to-zoom-correctly-in-a-multiple-line-style-graph-in-observable/4167>\
**Category:** Help\
**Created:** [November 18, 2020, 2:26pm UTC](https://talk.observablehq.com/t/how-to-zoom-correctly-in-a-multiple-line-style-graph-in-observable/4167 "2020-11-18T14:26:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![elsebih](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/elsebih/32/3866_2.png) [@elsebih](https://talk.observablehq.com/u/elsebih)\
**Post date:** [November 18, 2020, 2:26pm UTC](https://talk.observablehq.com/t/how-to-zoom-correctly-in-a-multiple-line-style-graph-in-observable/4167/1 "2020-11-18T14:26:33Z")

</div>

Hi,

I am trying to create an Observable multiline chart ([this](https://observablehq.com/@elsebih/multi-pressure-levels-chart-tests) is my Observable notebook draft) but with the capability of zooming out what is plotted like in [this another draft](https://observablehq.com/@elsebih/zoomable-line-chart).

After that, if it’s possible, I would like to add a tooltip like the one that is used in _Line Chart with Tooltip_ in the D3.js examples (sorry but I can’t put 3 links), removing the dot text displayed in the multiline chart draft given.

I tried several times to implement that without success. I’m quite newbie in D3.js.

Hope you can help me. Thanks for your time!

---

<div class="post-metadata">

**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\
**Post date:** [November 19, 2020, 12:22am UTC](https://talk.observablehq.com/t/how-to-zoom-correctly-in-a-multiple-line-style-graph-in-observable/4167/2 "2020-11-19T00:22:17Z")

</div>

hi @elsebih I put together the Multi-Line Chart with zoom, I hope this can be helpful

https://observablehq.com/embed/e3dd54515a6f776b?cell=chart

> **[Multi-Line Chart - Zoom](https://observablehq.com/d/e3dd54515a6f776b)**
>
> Multi-Line Chart - Zoom Data: Bureau of Labor Statistics

---

<div class="post-metadata">

**Author:** ![elsebih](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/elsebih/32/3866_2.png) [@elsebih](https://talk.observablehq.com/u/elsebih)\
**Post date:** [November 19, 2020, 1:34am UTC](https://talk.observablehq.com/t/how-to-zoom-correctly-in-a-multiple-line-style-graph-in-observable/4167/3 "2020-11-19T01:34:02Z")

</div>

Thanks for your time @radames! Working with it I use a clip to display it inside the margins (look at [this draft](https://observablehq.com/@elsebih/multi-line-chart-zoom-tests)). The problem is that I can pan the graph to y-values beside minimum and maximum, not seeing anything. Can I avoid this?

I prefer to not only zoom the x-axis, knowing that it is a possible solution.

---

<div class="post-metadata">

**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\
**Post date:** [November 19, 2020, 6:23am UTC](https://talk.observablehq.com/t/how-to-zoom-correctly-in-a-multiple-line-style-graph-in-observable/4167/4 "2020-11-19T06:23:05Z")

</div>

you want to change the translateExtent in order to limit the panning

```auto
    .translateExtent([
      [margin.left, -Infinity],
      [width - margin.right, Infinity]
    ])

```

---

<div class="post-metadata">

**Author:** ![elsebih](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/elsebih/32/3866_2.png) [@elsebih](https://talk.observablehq.com/u/elsebih)\
**Post date:** [November 19, 2020, 8:14am UTC](https://talk.observablehq.com/t/how-to-zoom-correctly-in-a-multiple-line-style-graph-in-observable/4167/5 "2020-11-19T08:14:14Z")

</div>

It works. Thanks a lot for your time and effort @radames !