Anychart.Timeline: Zooming moves chart on containers with margin-left/margin-right != 0

Question

If a margin-left or margin-right <> 0 is added to the chart container element (or a wrapping element) zooming using the mouse wheel or the zoom UI moves the chart to the left.

I forked a play ground example and added

#container {
  margin-left: 10%;
  margin-right: 10%;
}

to the original code. Here is the link to the example: https://playground.anychart.com/tJlE0hGZ/1

Is there any chance to stop this behavior (other than removing the margins)?

---

EDIT: Upon reading the tips below I realized that I over-simplified my example.

What I really need is a chart container wrapped in a centered <div/>

HTML

<div id="wrapper">
  <div id="container"></div>
</div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper{
  width: 100%;
  height: 500px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

I created a new playground fork: https://playground.anychart.com/PD9ICirX/2

---

UPDATE: I reported this case to the AnyChart support team and after some days I received a mail stating that this behavior is in fact a bug which will be addressed in a future update.

Answer 1

The problem may be addressed in two ways.

JS (recommended)
Remove CSS rules corresponding to the margin of a container.
Call an AnyChart margin method.

//set chart's margin
chart.margin(0, '10%')

Example demo of the AnyChart margin method usage (line 44)

CSS
Set container width to 80% with CSS rules.

#container {
  width: 80%;
  height: 100%;
  
  margin: 0;
  padding: 0;
  
  margin-left: 10%;
  margin-right: 10%;
}

Example demo of the CSS rules