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

<div id="container" style="height: 500px; min-width: 310px"></div>

Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365', function (candlestick) {
  Highcharts.stockChart('container', {
     chart: {
      backgroundColor: "#1c1b2b",
      borderRadius: 15,
      height: 500,
      styledMode: false,
    },

    title: {
      text: "Candlestick & Awesome Oscillator", 
      style: {
        color: "#fff",
      },
    },

    series: [
      {
        type: "candlestick",
        name: "Ethereum",
        id: "eth",
        data: candlestick,
      },
      {
        type: "abands",
        id: "overlay",
        linkedTo: "eth",
        yAxis: 0,
        tooltip: {
          valueDecimals: 2,
        },
      },
      {
        type: "ao",
        id: "oscillator",
        linkedTo: "eth",
        yAxis: 1,
      },
    ],

    rangeSelector: {
       buttons: [
        {
          type: "month",
          count: 1,
          text: "1m",
          title: "View 1 month",
        },
        {
          type: "month",
          count: 4,
          text: "4m",
          title: "View 4 months",
        },
        {
          type: "month",
          count: 8,
          text: "8m",
          title: "View 8 months",
        },
        {
          type: "ytd",
          text: "YTD",
          title: "View year to date",
        },
        {
          type: "all",
          count: 1,
          text: "All",
          title: "View All",
        },
      ],
      buttonTheme: {
        // styles for the buttons
        fill: "none",
        stroke: "none",
        "stroke-width": 0,
        r: 8,
        style: {
          color: "#4F6C89",
          fontWeight: "bold",
        },
        states: {
          select: {
            fill: "transparent",
            style: {
              color: "#D76F2A",
            },
          },
        },
      },
      inputBoxBorderColor: "#4F6C89",
      inputBoxWidth: 110,
      inputBoxHeight: 18,
      inputStyle: {
        color: "#4F6C89",
        fontWeight: "bold",
      },
      labelStyle: {
        color: "#cbd1d6",
        fontWeight: "bold",
      },
      selected: 2,
    },

    plotOptions: {
      line: {
        dashStyle: "dash",
      },
      series: {
        marker: {
          enabled: false,
        },
      },
      candlestick: {
        lineColor: "#FB1809",
        color: "#FB1809",
        upColor: "#4EA64A",
        upLineColor: "#4EA64A",
      },
      abands: {
        lineWidth: 1,
        lineColor: "#20a0b1",
        bottomLine: {
          styles: {
            lineWidth: 0.5,
            lineColor: "#fcfc27",
          },
        },
        topLine: {
          styles: {
            lineWidth: 0.5,
            lineColor: "#2efc27",
          },
        },
      },
    },

    xAxis: {
      lineWidth: 0.1,
      tickColor: "#2f2952",
      crosshair: {
        color: "#8e8aac",
        dashStyle: "dash",
      },
    },

    yAxis: [
      {
        labels: {
          align: "right",
          x: -2,
        },
        height: "80%",
        crosshair: {
          dashStyle: "dash",
          snap: false,
          color: "#696777",
        },

        resize: {
          enabled: true,
          lineWidth: 2,
          lineColor: "#1d1c30",
        },
        gridLineColor: "#201d3a",
        lineWidth: 0,
        visible: true,
      },
      {
        top: "80%",
        height: "20%",
        gridLineColor: "#201d3a",
      },
    ],

    tooltip: {
      split: true,
      shape: "rect",
      shadow: false,
      valueDecimals: 2,

       positioner: function (width, height, point) {
        var chart = this.chart,
          position;

        if (point.isHeader) {
          position = {
            x: Math.max(
              // Left side limit
              0,
              Math.min(
                point.plotX + chart.plotLeft - width / 2,
                // Right side limit
                chart.chartWidth - width - chart.marginRight
              )
            ),
            y: point.plotY,
          };
        } else {
          position = {
            x: point.series.chart.plotLeft,
            y: point.series.yAxis.top - chart.plotTop,
          };
        }

        return position;
      },
    },

    stockTools: {
      gui: {
        enabled: false,
      },
    },

    navigator: {
      enabled: true,
      height: 50,
      margin: 10,
      outlineColor: "#8380a5",
      handles: {
        backgroundColor: "#8380a5",
        borderColor: "#e9d5d5",
      },
      xAxis: {
        gridLineColor: "#8380a5",
      },
    },

    scrollbar: {
      barBackgroundColor: "#8380a5",
      barBorderColor: "#8380a5",
      barBorderRadius: 8,
      buttonArrowColor: "#fff",
      buttonBackgroundColor: "#405466",
      rifleColor: "#fff",
      trackBackgroundColor: "#e9d5d5",
    },

    credits: {
      enabled: false,
    },
  });
});