JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

<button onclick="setFull()">Set full</button>
<button onclick="setExtremeToRecentDate()">
    Recent date
</button>

<p>To reproduce the issue, click on "Recent date" and then to "Set full". You should now see a series of markers floating around the chart canvas, without even following the "line" they correspond to.</p>
<p>This happens ONLY first first time you switch between the 2</p>
<p>Bonus: Hovering the mouse to the end of each line starts moving the markers to it.</p>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");

JavaScript

let chart;

const generateSeries = (startDate, startPrice) => {
    let date = startDate;
    let price = startPrice;
    const result = [];
    const now = Date.now();

    const getNextPrice = (currentPrice, drift = 0.0003, volatility = 0.008) => {
        const randomNormal = () => {
            let sum = 0;
            for (let i = 0; i < 12; i++) {
                sum += Math.random();
            }
            return sum - 6;
        };
        const dailyReturn = drift + volatility * randomNormal();
        return currentPrice * (1 + dailyReturn);
    };

    while (date.getTime() < now) {
        result.push([date.getTime(), price]);
        date = new Date(date.setDate(date.getDate() + 1));
        price = Number(getNextPrice(price).toFixed(2));
    }

    return result;
};

const seriesAData = generateSeries(new Date('2014-01-01'), 125);
const seriesBData = generateSeries(new Date('2018-08-13'), 378);

// Helper to re-hide markers on load/redraw
function hideA11yMarkers(hcChart) {
    const ensureHidden = el => {
        if (!el) {
            return;
        }
        const alreadyHidden =
      typeof el.hasClass === 'function' ?
          el.hasClass('highcharts-a11y-markers-hidden') :
          ((el.attr('class') || '').indexOf('highcharts-a11y-markers-hidden') > -1);
        if (!alreadyHidden) {
            el.addClass('highcharts-a11y-markers-hidden');
        }
    };

    hcChart.series.forEach(s => {
        ensureHidden(s.group);
        ensureHidden(s.markerGroup);
    });
}

const setFull = () => {
    chart.xAxis[0].setExtremes(undefined, undefined); // triggers redraw
};

const setExtremeToRecentDate = () => {
    const today = new Date();
    const threeMonthsAgo = new Date(today);
    threeMonthsAgo.setMonth(today.getMonth() - 3);
    chart.xAxis[0].setExtremes(threeMonthsAgo.getTime(), undefined); // triggers redraw
};

chart = Highcharts.chart('container', {
    title:...