react-stockchart kagi

apple historic price, curse shows date and price

legend shows daily open high low close price

curse shows volume when hoved on volume bar

scroll to zoom and view 30 year picture

zoom in to see daily up and down

switch to microsoft

//App.js

http://chuanshuoge2.blogspot.com/2020/01/react-django-yahoofin-get-daily-stock.html

-----------------------
//HistoricGraph.js

import React, { useState, useEffect } from 'react';
import Kaji from './Kaji'

function HistoryGraph(props) {
    const { open, close, high, low, adjclose, volume, date } = props
    const [data, setdata] = useState(null)

    useEffect(() => {
        if (adjclose) {
            let ohlc = []
            let i = 0
            while (i < adjclose.length) {
                //old date format %m/%d/%Y
                const old_date = date[i].split('/')
                ohlc.push(
                    {
                        'open': open[i],
                        'close': close[i],
                        'volume': volume[i],
                        'high': high[i],
                        'low': low[i],
                        //new date format y,m,d
                        'date': new Date(parseInt(old_date[2]), parseInt(old_date[0]) - 1, old_date[1])
                    }
                )
                i++
            }
            setdata(ohlc)
        }
    }, [props])

    return (
        <div>
            {date ?
                <Kaji data={data} width={1000} ratio={1} type='svg'></Kaji>
                : null}
        </div>
    );
}

export default HistoryGraph;

-----------------------
//Kaji.js

https://github.com/rrag/react-stockcharts/blob/master/docs/lib/charts/Kagi.js

-------------------------
//package.json

{
  "name": "react-yahoo-fin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "antd": "^3.26.6",
    "axios": "^0.19.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-html-parser": "^2.0.2",
    "react-scripts": "3.3.0",
    "react-sticky-header": "^0.2.0",
    "react-stockcharts": "^0.7.8",
    "reactstrap": "^8.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

reference:
https://rrag.github.io/react-stockcharts/documentation.html#/kagi
https://github.com/rrag/react-stockcharts
https://github.com/rrag/react-stockcharts/blob/master/docs/lib/charts/Kagi.js
https://chuanshuoge2.blogspot.com/2020/01/react-django-yahoofin-get-daily-stock.html