JSFiddle - React, Tailwind, and code Playground

by ArtemGr

HTML

<script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>

JavaScript

var chart = LightweightCharts.createChart(document.body, {
  width: 600,
  height: 300,
  layout: {
    backgroundColor: '#000000',
    textColor: 'rgba(255, 255, 255, 0.9)',
  },
  grid: {
    vertLines: {
      color: 'rgba(197, 203, 206, 0.5)',
    },
    horzLines: {
      color: 'rgba(197, 203, 206, 0.5)',
    },
  },
  crosshair: {
    mode: LightweightCharts.CrosshairMode.Normal,
  },
  rightPriceScale: {
    borderColor: 'rgba(197, 203, 206, 0.8)',
  },
  timeScale: {
    borderColor: 'rgba(197, 203, 206, 0.8)',
  },
});

const lineSeries = chart.addLineSeries();
lineSeries.setData([
  { time: '2018-10-19', value: 80.01 },
  { time: '2019-05-24', value: 80.01 }
]);

var candleSeries = chart.addCandlestickSeries({
  upColor: 'rgba(255, 144, 0, 1)',
  downColor: '#000',
  borderDownColor: 'rgba(255, 144, 0, 1)',
  borderUpColor: 'rgba(255, 144, 0, 1)',
  wickDownColor: 'rgba(255, 144, 0, 1)',
  wickUpColor: 'rgba(255, 144, 0, 1)',
});

candleSeries.setData([{
    time: '2018-10-19',
    open: 180.34,
    high: 180.99,
    low: 178.57,
    close: 179.85
  },
  {
    time: '2018-10-22',
    open: 180.82,
    high: 181.40,
    low: 177.56,
    close: 178.75
  },
  {
    time: '2018-10-23',
    open: 175.77,
    high: 179.49,
    low: 175.44,
    close: 178.53
  },
  {
    time: '2018-10-24',
    open: 178.58,
    high: 182.37,
    low: 176.31,
    close: 176.97
  },
  {
    time: '2018-10-25',
    open: 177.52,
    high: 180.50,
    low: 176.83,
    close: 179.07
  },
  {
    time: '2018-10-26',
    open: 176.88,
    high: 177.34,
    low: 170.91,
    close: 172.23
  },
  {
    time: '2018-10-29',
    open: 173.74,
    high: 175.99,
    low: 170.95,
    close: 173.20
  },
  {
    time: '2018-10-30',
    open: 173.16,
    high: 176.43,
    low: 172.64,
    close: 176.24
  },
  {
    time: '2018-10-31',
    open: 177.98,
    high: 178.85,
    low: 175.59,
    close: 175.88
  },
  {
    time: '2018-11-01',
    open: 176.84,
    high: 180.86,
    low: 175.90,
   ...