Stock chart with GUI

author(s): Sebastian Bochan

by Black Label

HTML

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">


<script src="https://github.highcharts.com/stock/highstock.js"></script>

<script src="https://github.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://github.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://github.highcharts.com/modules/annotations-advanced.src.js"></script>
<script src="https://github.highcharts.com/modules/price-indicator.js"></script>
<script src="https://github.highcharts.com/modules/full-screen.js"></script>

<script src="https://github.highcharts.com/modules/stock-tools.src.js"></script>

<script src="https://github.highcharts.com/stock/modules/heikinashi.js"></script>
<script src="https://github.highcharts.com/stock/modules/hollowcandlestick.js"></script>
<script src="https://github.highcharts.com/modules/accessibility.js"></script>

<div id="container" class="chart"></div>

CSS

#container {
    height: 730px;
}

@media screen and (max-width: 600px) {
    #container {
        height: 400px;
    }
}

JavaScript

let data = [
   [1672531200000, 15.55],
   [1673049600000, 18.15],
   [1673980800000, 12.66],
   [1675459200000, 16.73],
   [1677667200000, 13.19],
   [1678435200000, 11.72],
   [1679808000000, 17.29],
   [1680585600000, 15.75],
   [1681737600000, 18.47],
   [1682409600000, 20.32],
   [1682870400000, 17.73],
   [1683638400000, 22.21],
   [1686864000000, 24.89],
   [1689062400000, 19.97],
   [1689753600000, 26.27],
   [1690444800000, 20.06],
   [1690915200000, 22.28],
   [1693536000000, 17.84],
   [1696492800000, 15.05],
   [1699228800000, 14.54],
   [1717756800000, 15.55],
   [1718275200000, 18.15],
   [1719206400000, 12.66],
   [1720684800000, 16.73],
   [1722892800000, 13.19],
   [1723660800000, 11.72],
   [1725033600000, 17.29],
   [1725811200000, 15.75],
   [1726963200000, 18.47],
   [1727635200000, 20.32],
   [1728096000000, 17.73],
   [1728864000000, 22.21],
   [1732089600000, 24.89],
   [1734288000000, 19.97],
   [1734979200000, 26.27],
   [1735670400000, 20.06],
   [1736140800000, 22.28],
   [1738761600000, 17.84],
   [1741718400000, 15.05],
   [1744454400000, 14.54],
 ];

 let profi = [
   [1672531200000, 16.55],
   [1673049600000, 20.15],
   [1673980800000, 15.66],
   [1675459200000, 17.73],
   [1677667200000, 18.19],
   [1678435200000, 19.72],
   [1679808000000, 18.29],
   [1680585600000, 17.75],
   [1681737600000, 19.47],
   [1682409600000, 21.32],
   [1682870400000, 18.73],
   [1683638400000, 23.21],
   [1686864000000, 25.89],
   [1689062400000, 20.97],
   [1689753600000, 27.27],
   [1690444800000, 22.06],
   [1690915200000, 23.28],
   [1693536000000, 18.84],
   [1696492800000, 66.05],
   [1699228800000, 55.54],
   [1717756800000, 46.55],
   [1718275200000, 39.15],
   [1719206400000, 63.66],
   [1720684800000, 57.73],
   [1722892800000, 44.19],
   [1723660800000, 62.72],
   [1725033600000, 58.29],
   [1725811200000, 36.75],
   [1726963200000, 59.47],
   [1727635200000, 61.32],
   [1728096000000, 58.73],
   [1728864000000, 63.21],
   [1732089600000,...