basic stock

author(s): Torstein Hønsi

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

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>

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

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

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

JavaScript

var DateRange = null;
 var stocknameandinitalvalue = [];
 
 Highcharts.SVGRenderer.prototype.symbols.doublearrowLeft = function (x, y, w, h) {
    return [svgIconLeft];
};

Highcharts.SVGRenderer.prototype.symbols.doublearrowRight = function (x, y, w, h) {
    return [svgIconRight];
};

if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.doublearrowLeft = Highcharts.SVGRenderer.prototype.symbols.doublearrowLeft;
    Highcharts.VMLRenderer.prototype.symbols.doublearrowRight = Highcharts.SVGRenderer.prototype.symbols.doublearrowRight;
}


const svgIconLeft = `M8.215 13.597c.13.124.288.192.47.192a.662.662 0 0 0 .672-.667.68.68 0 0 0-.204-.486L5.198 8.772l3.955-3.854a.69.69 0 0 0 .204-.486.662.662 0 0 0-.673-.666.64.64 0 0 0-.463.192L3.825 8.252a.702.702 0 0 0-.237.525c0 .198.079.368.232.52l4.395 4.3zm5.052 0c.13.124.282.192.469.192a.662.662 0 0 0 .672-.667.703.703 0 0 0-.204-.486l-3.96-3.864 3.96-3.854a.69.69 0 0 0 .204-.486.662.662 0 0 0-.672-.666.653.653 0 0 0-.47.192L8.872 8.252a.745.745 0 0 0-.238.525c0 .198.08.368.238.52l4.396 4.3z`;
const svgIconRight = `M9.785 13.597a.663.663 0 0 1-.469.192.662.662 0 0 1-.672-.667.68.68 0 0 1 .203-.486l3.955-3.864-3.955-3.854a.69.69 0 0 1-.203-.486c0-.373.294-.666.672-.666a.64.64 0 0 1 .464.192l4.395 4.294a.702.702 0 0 1 .238.525c0 .198-.08.368-.232.52l-4.396 4.3zm-5.051 0a.653.653 0 0 1-.469.192.662.662 0 0 1-.672-.667c0-.186.079-.356.203-.486l3.96-3.864-3.96-3.854a.69.69 0 0 1-.203-.486c0-.373.293-.666.672-.666.186 0 .339.067.469.192L9.13 8.252a.745.745 0 0 1 .237.525c0 .198-.08.368-.237.52l-4.396 4.3z`;

 
 
 
Highcharts.stockChart('container', {
 chart:
        {
            events: {
                render: function () {
                    var name = '';
                    this.series.filter(s => {
                        if (s.type === 'candlestick') {
                            startingValue = s.yData[0];
                            stockPrice = s.yData[s.yData.length - 1][3];
                ...