Highcharts Fibonacci Time Zones Annotation demo

author(s): Rafał Sebestjański

HTML

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

<div id="container"></div>
<div id="button-box">
    <button id='applyColors'>Apply colors</button>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

#container {
    max-width: 800px;
    margin: 0 auto;
}

#button-box {
    padding: 10px;
}

button {
    height: 36px;
    padding: 8px 17px;
    border: 1px solid rgba(227, 227, 232, 1);
    border-radius: 4px;
    background-color: white;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    font-family: "IBM Plex Sans", sans-serif;
}

button:hover {
    opacity: 0.8;
    cursor: pointer;
    border-color: #000;
}

JavaScript

(async () => {

    const data = await fetch(
        'https://demo-live-data.highcharts.com/aapl-c.json'
    ).then(response => response.json());

    const length = data.length;

    // Create the chart
    const chart = Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        subtitle: {
            text: 'With Fibonacci Time Zones'
        },

        annotations: [{
            type: 'fibonacciTimeZones',
            controlPointOptions: {
                visible: true
            },
            typeOptions: {
                points: [{
                    x: data[length - 60][0]
                }, {
                    x: data[length - 59][0]
                }]
            }
        }],

        xAxis: {
            ordinal: false
        },

        series: [{
            name: 'AAPL',
            data: data,
            tooltip: {
                valueDecimals: 2
            }
        }]

    });

    const applyColors = document.getElementById('applyColors');

    applyColors.onclick = function () {
        chart.annotations[0].update({
            typeOptions: {
                line: {
                    fill: '#06d001',
                    stroke: '#06d001',
                    strokeWidth: 2
                }
            }
        });
    };
})();