Графики HighChart не отображаются правильно на маленьком div

Я использую библиотеку javascript под названием Highcharts https://www.highcharts.com/ для построения данных JSON на фондовый/линейный график.

Обратитесь к изображению ниже, чтобы понять термины, которые я использую в этом посте. https://www.highcharts.com/images/docs/understanding_highstock.png

Так что все работает нормально, когда я нажимаю на кнопки выбора диапазона для увеличения. Но когда я использую навигатор, чтобы указать огромный диапазон (годы), окончательный линейный график неверен. Я создал несколько изображений, чтобы помочь вам понять, что я имею в виду.

Использование кнопок выбора диапазона для указания меньшего диапазона отлично работает при попытке построить [1519162460000,246.39649367343821] в качестве моей окончательной цены:

А теперь позвольте мне изменить размер навигатора, чтобы показать всю ценовую историю:

Если вы внимательно посмотрите на изображение, вы увидите, что последний график на графике неверен и показывает 230,72 доллара США, тогда как он должен отображать 246,40 доллара США 246.39649367343821 ‹- округлено.

Как вы, наверное, заметили, это серьезная проблема для тех, кто пытается отобразить релевантную информацию о ценах на моем веб-сайте.

Если я не ограничу ширину блока диаграммы или не изменю размер окна браузера, графики будут отображаться нормально, но я все еще не знаю, в чем проблема. (примечание: то, что я только что описал, не работает в codepen, потому что ширина области просмотра ограничена, поэтому графики путаются независимо от того, когда я перемещаюсь по достаточно большому диапазону)

Ниже приведен фрагмент моих js и html вместе со ссылкой на созданную мной кодовую ручку.

JS

Highcharts.setOptions({
  lang: {
    thousandsSep: ","
  }
});



Highcharts.stockChart("chart", {
  chart: {
    width: 290,
    padding: [5, 5, 5, 5]
  },

  title: {
    text: "Litecoin Price" // make dynamic
  },

  series: [
    {
      name: "Price",
      data: JSON.parse(data)["stats"],
      tooltip: {
        valueDecimals: 2,
        valuePrefix: "$",
        valueSuffix: " USD"
      }
    }
  ],

  responsive: {
    rules: [
      {
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          chart: {
            zoomType: "none"
          },
          credits: {
            enabled: false
          },
          scrollbar: {
            enabled: false
          } //,
          //navigator: {
          //enabled: false
          //},
          //rangeSelector: {
          //enabled: false
          //}
        }
      }
    ]
  },

  scrollbar: {
    liveRedraw: false
  },

  rangeSelector: {
    allButtonsEnabled: false,
    buttons: [
      {
        type: "month",
        count: 1,
        text: "1m"
      },
      {
        type: "month",
        count: 3,
        text: "3m"
      },
      {
        type: "month",
        count: 6,
        text: "6m"
      },
      {
        type: "year",
        count: 1,
        text: "1y"
      },
      {
        type: "ytd",
        count: 1,
        text: "YTD"
      }
    ],
    selected: 4,
    inputEnabled: true,
    enabled: true,
    inputStyle: {
      color: "#757575"
    },
    labelStyle: {
      color: "#757575"
    }
  }
});

HTML

<div class="card" style="padding: 10px; min-width: 330px;">
  <div class="card chart-card" style="height: 350px; overflow: hidden; width: 300px;">
    <div id="chart" style="height: 350px; min-width: 300px;">
                <div id="highcharts-loading">
                        <div style="display: block; margin: 0 auto; position: absolute; top: calc(50% - 24px); left: calc(50% - 24px);"><span class="loading1"></span></div>
                </div>

                <div id="highcharts-nodata" style="display:none; text-align: center;">No chart data found</div>
        </div>
    </div>
</div>