JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/highcharts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.2/css/highcharts.css">
<div id="depth"></div>
JavaScript
let depth = {
"bids": [
[
6398.88,
0.871439
],
[
6395.88,
4.672726
],
[
6391.01,
6.154726
],
[
6391,
6.187085
],
[
6390,
6.687085
],
[
6370,
6.6890849999999995
],
[
6347,
7.327985
],
[
6346.98,
8.847986
],
[
6340,
9.172793
],
[
6335.3,
9.389952000000001
],
[
6335,
9.391952000000002
],
[
6330.02,
9.639003000000002
],
[
6330,
9.767994000000002
],
[
6325.01,
10.504894000000002
],
[
6325,
10.514950000000002
],
[
6302.52,
10.514985000000003
],
[
6300,
10.516985000000004
],
[
6282.88,
12.194598000000003
],
[
6252,
12.247203000000003
],
[
6251.09,
12.304528000000003
],
[
6220.25,
13.040528000000004
],
[
6212.01,
13.098213000000003
],
[
6212,
16.114441000000003
],
[
6209.23,
16.134441000000002
],
[
6201,
16.185807000000004
],
[
6200,
17.529942000000005
],
[
6186.01,
17.568560000000005
],
[
6156.36,
18.720560000000006
],
[
6151.1,
...