U.S Solar Employment Growth

by maritavindedal

HTML

<script src="https://code.highcharts.com/stock/highstock.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);

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

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

chart = Highcharts.chart('container', {
    title: {
        text: 'Reproduce issue with markers',
    },
    chart: {
        styledMode: true,
    },
    xAxis: {
        type: 'datetime',
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false,
            },
        },
    },
    series: [
        {name: 'Series A', id: 'seriesA', data: seriesAData},
        {name: 'Series B', id: 'seriesB', data: seriesBData},
    ],
});