ARIA · table fallback접근성
Canvas ARIA 메타데이터에 텍스트 요약과 표 대체 표현을 함께 제공합니다.
Graflume · Alpha
시간보다 가격 변동 폭에 집중해 상승·하락을 고정 크기 블록으로 표시합니다. Graflume 공개 카탈로그에 등록된 이 계열의 모든 실행 모드입니다. 각 탭은 독립 데이터, 옵션, Quick API와 지원 기능 근거를 가집니다.
차트 계열 · 전문 차트 계열
시간보다 가격 변동 폭에 집중해 상승·하락을 고정 크기 블록으로 표시합니다.
priceBlocks()graflume/completerenko차트 고유 기능
Graflume 공개 카탈로그에 등록된 이 계열의 모든 실행 모드입니다. 각 탭은 독립 데이터, 옵션, Quick API와 지원 기능 근거를 가집니다.
Point and figure chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Renko · three-line break.
상태불러오는 중
point-and-figureRenkothree-line break불러오는 중
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
datetemporal | closequantitative |
|---|---|
| 2025-01-01 | 95.1 |
| 2025-01-02 | 96.4177 |
| 2025-01-03 | 97.4641 |
| 2025-01-04 | 98.1631 |
| 2025-01-05 | 98.4747 |
| 2025-01-06 | 98.3969 |
| 2025-01-07 | 97.9643 |
| 2025-01-08 | 97.2423 |
| 2025-01-09 | 96.3192 |
| 2025-01-10 | 95.296 |
| 2025-01-11 | 94.2766 |
| 2025-01-12 | 93.3576 |
| 2025-01-13 | 92.62 |
| 2025-01-14 | 92.1232 |
| 2025-01-15 | 91.9016 |
| 2025-01-16 | 91.9631 |
| 2025-01-17 | 92.2911 |
| 2025-01-18 | 92.8475 |
| 2025-01-19 | 93.5779 |
| 2025-01-20 | 94.4172 |
| 2025-01-21 | 95.2956 |
| 2025-01-22 | 96.1441 |
| 2025-01-23 | 96.8995 |
| 2025-01-24 | 97.5083 |
| 2025-01-25 | 97.9299 |
| 2025-01-26 | 98.1388 |
| 2025-01-27 | 98.1252 |
| 2025-01-28 | 97.8956 |
| 2025-01-29 | 97.4723 |
| 2025-01-30 | 96.8921 |
| 2025-01-31 | 96.2043 |
| 2025-02-01 | 95.4682 |
| 2025-02-02 | 94.7495 |
| 2025-02-03 | 94.1163 |
| 2025-02-04 | 93.6345 |
| 2025-02-05 | 93.3624 |
| 2025-02-06 | 93.3458 |
| 2025-02-07 | 93.6128 |
| 2025-02-08 | 94.1706 |
| 2025-02-09 | 95.0024 |
| 2025-02-10 | 96.0672 |
| 2025-02-11 | 97.3012 |
| 2025-02-12 | 98.6223 |
| 2025-02-13 | 99.9361 |
| 2025-02-14 | 101.1441 |
| 2025-02-15 | 102.1532 |
| 2025-02-16 | 102.8851 |
| 2025-02-17 | 103.2854 |
| 2025-02-18 | 103.3306 |
| 2025-02-19 | 103.0322 |
| 2025-02-20 | 102.4378 |
| 2025-02-21 | 101.6282 |
| 2025-02-22 | 100.7105 |
| 2025-02-23 | 99.8085 |
| 2025-02-24 | 99.0497 |
| 2025-02-25 | 98.5523 |
| 2025-02-26 | 98.4121 |
| 2025-02-27 | 98.6906 |
| 2025-02-28 | 99.4076 |
| 2025-03-01 | 100.5364 |
| 2025-03-02 | 102.0054 |
| 2025-03-03 | 103.704 |
| 2025-03-04 | 105.4928 |
| 2025-03-05 | 107.218 |
| 2025-03-06 | 108.7271 |
| 2025-03-07 | 109.8858 |
| 2025-03-08 | 110.5925 |
| 2025-03-09 | 110.7902 |
| 2025-03-10 | 110.4739 |
| 2025-03-11 | 109.6913 |
| 2025-03-12 | 108.5397 |
| 2025-03-13 | 107.1553 |
| 2025-03-14 | 105.6994 |
| 2025-03-15 | 104.3413 |
| 2025-03-16 | 103.2401 |
| 2025-03-17 | 102.5268 |
| 2025-03-18 | 102.291 |
| 2025-03-19 | 102.5698 |
| 2025-03-20 | 103.3445 |
| 2025-03-21 | 104.5421 |
| 2025-03-22 | 106.0432 |
| 2025-03-23 | 107.6952 |
| 2025-03-24 | 109.3286 |
| 2025-03-25 | 110.7759 |
| 2025-03-26 | 111.8893 |
| 2025-03-27 | 112.5571 |
| 2025-03-28 | 112.7151 |
| 2025-03-29 | 112.3534 |
| 2025-03-30 | 111.5169 |
| 2025-03-31 | 110.3002 |
| 2025-04-01 | 108.8365 |
| 2025-04-02 | 107.2832 |
| 2025-04-03 | 105.8047 |
| 2025-04-04 | 104.5551 |
| 2025-04-05 | 103.6618 |
| 2025-04-06 | 103.2134 |
브라우저 API
const data = [
{
"close": 95.1,
"date": "2025-01-01",
"high": 96.3,
"low": 92.9,
"open": 94,
"value": 95.1,
"volume": 1070
},
{
"close": 96.4177,
"date": "2025-01-02",
"high": 97.6977,
"low": 94.6097,
"open": 95.7997,
"value": 96.4177,
"volume": 1144
},
{
"close": 97.4641,
"date": "2025-01-03",
"high": 98.8241,
"low": 96.0986,
"open": 97.3786,
"value": 97.4641,
"volume": 1217
},
{
"close": 98.1631,
"date": "2025-01-04",
"high": 100.0024,
"low": 96.7931,
"open": 98.5624,
"value": 98.1631,
"volume": 1287
},
{
"close": 98.4747,
"date": "2025-01-05",
"high": 100.7522,
"low": 97.3747,
"open": 99.2322,
"value": 98.4747,
"volume": 1353
},
{
"close": 98.3969,
"date": "2025-01-06",
"high": 100.5404,
"low": 97.2069,
"open": 99.3404,
"value": 98.3969,
"volume": 1415
},
{
"close": 97.9643,
"date": "2025-01-07",
"high": 100.1938,
"low": 96.6843,
"open": 98.9138,
"value": 97.9643,
"volume": 1470
},
{
"close": 97.2423,
"date": "2025-01-08",
"high": 99.4061,
"low": 95.8723,
"open": 98.0461,
"value": 97.2423,
"volume": 1519
},
{
"close": 96.3192,
"date": "2025-01-09",
"high": 98.3193,
"low": 95.2192,
"open": 96.8793,
"value": 96.3192,
"volume": 1562
},
{
"close": 95.296,
"date": "2025-01-10",
"high": 97.0993,
"low": 94.106,
"open": 95.5793,
"value": 95.296,
"volume": 1598
},
{
"close": 94.2766,
"date": "2025-01-11",
"high": 95.5096,
"low": 92.9966,
"open": 94.3096,
"value": 94.2766,
"volume": 1629
},
{
"close": 93.3576,
"date": "2025-01-12",
"high": 94.6376,
"low": 91.8392,
"open": 93.2092,
"value": 93.3576,
"volume": 1656
},
{
"close": 92.62,
"date": "2025-01-13",
"high": 93.98,
"low": 91.2761,
"open": 92.3761,
"value": 92.62,
"volume": 1679
},
{
"close": 92.1232,
"date": "2025-01-14",
"high": 93.5632,
"low": 90.6709,
"open": 91.8609,
"value": 92.1232,
"volume": 1699
},
{
"close": 91.9016,
"date": "2025-01-15",
"high": 93.4216,
"low": 90.389,
"open": 91.669,
"value": 91.9016,
"volume": 1106
},
{
"close": 91.9631,
"date": "2025-01-16",
"high": 93.1631,
"low": 90.4003,
"open": 91.7703,
"value": 91.9631,
"volume": 1126
},
{
"close": 92.2911,
"date": "2025-01-17",
"high": 93.5711,
"low": 91.0131,
"open": 92.1131,
"value": 92.2911,
"volume": 1147
},
{
"close": 92.8475,
"date": "2025-01-18",
"high": 94.2075,
"low": 91.4492,
"open": 92.6392,
"value": 92.8475,
"volume": 1173
},
{
"close": 93.5779,
"date": "2025-01-19",
"high": 95.0179,
"low": 92.0148,
"open": 93.2948,
"value": 93.5779,
"volume": 1202
},
{
"close": 94.4172,
"date": "2025-01-20",
"high": 95.9372,
"low": 92.6673,
"open": 94.0373,
"value": 94.4172,
"volume": 1237
},
{
"close": 95.2956,
"date": "2025-01-21",
"high": 96.4956,
"low": 93.7355,
"open": 94.8355,
"value": 95.2956,
"volume": 1278
},
{
"close": 96.1441,
"date": "2025-01-22",
"high": 97.4241,
"low": 94.4743,
"open": 95.6643,
"value": 96.1441,
"volume": 1325
},
{
"close": 96.8995,
"date": "2025-01-23",
"high": 98.2595,
"low": 95.2164,
"open": 96.4964,
"value": 96.8995,
"volume": 1378
},
{
"close": 97.5083,
"date": "2025-01-24",
"high": 98.9483,
"low": 95.9247,
"open": 97.2947,
"value": 97.5083,
"volume": 1437
},
{
"close": 97.9299,
"date": "2025-01-25",
"high": 99.5269,
"low": 96.8299,
"open": 98.0069,
"value": 97.9299,
"volume": 1502
},
{
"close": 98.1388,
"date": "2025-01-26",
"high": 99.7662,
"low": 96.9488,
"open": 98.5662,
"value": 98.1388,
"volume": 1571
},
{
"close": 98.1252,
"date": "2025-01-27",
"high": 100.1787,
"low": 96.8452,
"open": 98.8987,
"value": 98.1252,
"volume": 1643
},
{
"close": 97.8956,
"date": "2025-01-28",
"high": 100.2955,
"low": 96.5256,
"open": 98.9355,
"value": 97.8956,
"volume": 1104
},
{
"close": 97.4723,
"date": "2025-01-29",
"high": 100.0688,
"low": 96.3723,
"open": 98.6288,
"value": 97.4723,
"volume": 1179
},
{
"close": 96.8921,
"date": "2025-01-30",
"high": 99.4875,
"low": 95.7021,
"open": 97.9675,
"value": 96.8921,
"volume": 1252
},
{
"close": 96.2043,
"date": "2025-01-31",
"high": 98.1891,
"low": 94.9243,
"open": 96.9891,
"value": 96.2043,
"volume": 1323
},
{
"close": 95.4682,
"date": "2025-02-01",
"high": 97.0627,
"low": 94.0982,
"open": 95.7827,
"value": 95.4682,
"volume": 1391
},
{
"close": 94.7495,
"date": "2025-02-02",
"high": 96.1095,
"low": 93.3846,
"open": 94.4846,
"value": 94.7495,
"volume": 1454
},
{
"close": 94.1163,
"date": "2025-02-03",
"high": 95.5563,
"low": 92.0724,
"open": 93.2624,
"value": 94.1163,
"volume": 1511
},
{
"close": 93.6345,
"date": "2025-02-04",
"high": 95.1545,
"low": 91.0128,
"open": 92.2928,
"value": 93.6345,
"volume": 1562
},
{
"close": 93.3624,
"date": "2025-02-05",
"high": 94.5624,
"low": 90.3642,
"open": 91.7342,
"value": 93.3624,
"volume": 1607
},
{
"close": 93.3458,
"date": "2025-02-06",
"high": 94.6258,
"low": 90.6009,
"open": 91.7009,
"value": 93.3458,
"volume": 1645
},
{
"close": 93.6128,
"date": "2025-02-07",
"high": 94.9728,
"low": 91.0527,
"open": 92.2427,
"value": 93.6128,
"volume": 1678
},
{
"close": 94.1706,
"date": "2025-02-08",
"high": 95.6106,
"low": 92.0536,
"open": 93.3336,
"value": 94.1706,
"volume": 1706
},
{
"close": 95.0024,
"date": "2025-02-09",
"high": 96.5224,
"low": 93.5031,
"open": 94.8731,
"value": 95.0024,
"volume": 1730
},
{
"close": 96.0672,
"date": "2025-02-10",
"high": 97.8995,
"low": 94.9672,
"open": 96.6995,
"value": 96.0672,
"volume": 1138
},
{
"close": 97.3012,
"date": "2025-02-11",
"high": 99.8932,
"low": 96.1112,
"open": 98.6132,
"value": 97.3012,
"volume": 1157
},
{
"close": 98.6223,
"date": "2025-02-12",
"high": 101.7664,
"low": 97.3423,
"open": 100.4064,
"value": 98.6223,
"volume": 1177
},
{
"close": 99.9361,
"date": "2025-02-13",
"high": 103.3339,
"low": 98.5661,
"open": 101.8939,
"value": 99.9361,
"volume": 1198
},
{
"close": 101.1441,
"date": "2025-02-14",
"high": 104.4588,
"low": 100.0441,
"open": 102.9388,
"value": 101.1441,
"volume": 1222
},
{
"close": 102.1532,
"date": "2025-02-15",
"high": 104.671,
"low": 100.9632,
"open": 103.471,
"value": 102.1532,
"volume": 1250
},
{
"close": 102.8851,
"date": "2025-02-16",
"high": 104.773,
"low": 101.6051,
"open": 103.493,
"value": 102.8851,
"volume": 1283
},
{
"close": 103.2854,
"date": "2025-02-17",
"high": 104.6454,
"low": 101.7045,
"open": 103.0745,
"value": 103.2854,
"volume": 1322
},
{
"close": 103.3306,
"date": "2025-02-18",
"high": 104.7706,
"low": 101.2366,
"open": 102.3366,
"value": 103.3306,
"volume": 1367
},
{
"close": 103.0322,
"date": "2025-02-19",
"high": 104.5522,
"low": 100.2392,
"open": 101.4292,
"value": 103.0322,
"volume": 1418
},
{
"close": 102.4378,
"date": "2025-02-20",
"high": 103.6378,
"low": 99.226,
"open": 100.506,
"value": 102.4378,
"volume": 1476
},
{
"close": 101.6282,
"date": "2025-02-21",
"high": 102.9082,
"low": 98.3323,
"open": 99.7023,
"value": 101.6282,
"volume": 1539
},
{
"close": 100.7105,
"date": "2025-02-22",
"high": 102.0705,
"low": 98.0185,
"open": 99.1185,
"value": 100.7105,
"volume": 1607
},
{
"close": 99.8085,
"date": "2025-02-23",
"high": 101.2485,
"low": 97.6227,
"open": 98.8127,
"value": 99.8085,
"volume": 1065
},
{
"close": 99.0497,
"date": "2025-02-24",
"high": 100.5697,
"low": 97.521,
"open": 98.801,
"value": 99.0497,
"volume": 1138
},
{
"close": 98.5523,
"date": "2025-02-25",
"high": 100.2666,
"low": 97.1823,
"open": 99.0666,
"value": 98.5523,
"volume": 1213
},
{
"close": 98.4121,
"date": "2025-02-26",
"high": 100.8514,
"low": 97.3121,
"open": 99.5714,
"value": 98.4121,
"volume": 1287
},
{
"close": 98.6906,
"date": "2025-02-27",
"high": 101.63,
"low": 97.5006,
"open": 100.27,
"value": 98.6906,
"volume": 1359
},
{
"close": 99.4076,
"date": "2025-02-28",
"high": 102.5602,
"low": 98.1276,
"open": 101.1202,
"value": 99.4076,
"volume": 1428
},
{
"close": 100.5364,
"date": "2025-03-01",
"high": 103.6082,
"low": 99.1664,
"open": 102.0882,
"value": 100.5364,
"volume": 1492
},
{
"close": 102.0054,
"date": "2025-03-02",
"high": 104.3483,
"low": 100.9054,
"open": 103.1483,
"value": 102.0054,
"volume": 1551
},
{
"close": 103.704,
"date": "2025-03-03",
"high": 105.5579,
"low": 102.514,
"open": 104.2779,
"value": 103.704,
"volume": 1604
},
{
"close": 105.4928,
"date": "2025-03-04",
"high": 106.8528,
"low": 104.1683,
"open": 105.4483,
"value": 105.4928,
"volume": 1651
},
{
"close": 107.218,
"date": "2025-03-05",
"high": 108.658,
"low": 105.247,
"open": 106.617,
"value": 107.218,
"volume": 1692
},
{
"close": 108.7271,
"date": "2025-03-06",
"high": 110.2471,
"low": 106.6223,
"open": 107.7223,
"value": 108.7271,
"volume": 1726
},
{
"close": 109.8858,
"date": "2025-03-07",
"high": 111.0858,
"low": 107.4944,
"open": 108.6844,
"value": 109.8858,
"volume": 1755
},
{
"close": 110.5925,
"date": "2025-03-08",
"high": 111.8725,
"low": 108.1331,
"open": 109.4131,
"value": 110.5925,
"volume": 1167
},
{
"close": 110.7902,
"date": "2025-03-09",
"high": 112.1502,
"low": 108.4508,
"open": 109.8208,
"value": 110.7902,
"volume": 1189
},
{
"close": 110.4739,
"date": "2025-03-10",
"high": 111.9139,
"low": 108.7401,
"open": 109.8401,
"value": 110.4739,
"volume": 1209
},
{
"close": 109.6913,
"date": "2025-03-11",
"high": 111.2113,
"low": 108.2511,
"open": 109.4411,
"value": 109.6913,
"volume": 1229
},
{
"close": 108.5397,
"date": "2025-03-12",
"high": 109.8445,
"low": 107.2597,
"open": 108.6445,
"value": 108.5397,
"volume": 1249
},
{
"close": 107.1553,
"date": "2025-03-13",
"high": 108.8079,
"low": 105.7853,
"open": 107.5279,
"value": 107.1553,
"volume": 1272
},
{
"close": 105.6994,
"date": "2025-03-14",
"high": 107.5813,
"low": 104.5994,
"open": 106.2213,
"value": 105.6994,
"volume": 1299
},
{
"close": 104.3413,
"date": "2025-03-15",
"high": 106.3337,
"low": 103.1513,
"open": 104.8937,
"value": 104.3413,
"volume": 1330
},
{
"close": 103.2401,
"date": "2025-03-16",
"high": 105.2501,
"low": 101.9601,
"open": 103.7301,
"value": 103.2401,
"volume": 1367
},
{
"close": 102.5268,
"date": "2025-03-17",
"high": 104.1045,
"low": 101.1568,
"open": 102.9045,
"value": 102.5268,
"volume": 1410
},
{
"close": 102.291,
"date": "2025-03-18",
"high": 103.8319,
"low": 101.191,
"open": 102.5519,
"value": 102.291,
"volume": 1459
},
{
"close": 102.5698,
"date": "2025-03-19",
"high": 104.106,
"low": 101.3798,
"open": 102.746,
"value": 102.5698,
"volume": 1515
},
{
"close": 103.3445,
"date": "2025-03-20",
"high": 104.9254,
"low": 102.0645,
"open": 103.4854,
"value": 103.3445,
"volume": 1576
},
{
"close": 104.5421,
"date": "2025-03-21",
"high": 106.2119,
"low": 103.1721,
"open": 104.6919,
"value": 104.5421,
"volume": 1030
},
{
"close": 106.0432,
"date": "2025-03-22",
"high": 107.4211,
"low": 104.9432,
"open": 106.2211,
"value": 106.0432,
"volume": 1100
},
{
"close": 107.6952,
"date": "2025-03-23",
"high": 109.1644,
"low": 106.5052,
"open": 107.8844,
"value": 107.6952,
"volume": 1173
},
{
"close": 109.3286,
"date": "2025-03-24",
"high": 110.8369,
"low": 108.0486,
"open": 109.4769,
"value": 109.3286,
"volume": 1247
},
{
"close": 110.7759,
"date": "2025-03-25",
"high": 112.2485,
"low": 109.4059,
"open": 110.8085,
"value": 110.7759,
"volume": 1322
},
{
"close": 111.8893,
"date": "2025-03-26",
"high": 113.4093,
"low": 110.631,
"open": 111.731,
"value": 111.8893,
"volume": 1394
},
{
"close": 112.5571,
"date": "2025-03-27",
"high": 113.7571,
"low": 110.9675,
"open": 112.1575,
"value": 112.5571,
"volume": 1464
},
{
"close": 112.7151,
"date": "2025-03-28",
"high": 113.9951,
"low": 110.7912,
"open": 112.0712,
"value": 112.7151,
"volume": 1530
},
{
"close": 112.3534,
"date": "2025-03-29",
"high": 113.7134,
"low": 110.1524,
"open": 111.5224,
"value": 112.3534,
"volume": 1591
},
{
"close": 111.5169,
"date": "2025-03-30",
"high": 112.9569,
"low": 109.515,
"open": 110.615,
"value": 111.5169,
"volume": 1646
},
{
"close": 110.3002,
"date": "2025-03-31",
"high": 111.8202,
"low": 108.2958,
"open": 109.4858,
"value": 110.3002,
"volume": 1695
},
{
"close": 108.8365,
"date": "2025-04-01",
"high": 110.0365,
"low": 107.0011,
"open": 108.2811,
"value": 108.8365,
"volume": 1737
},
{
"close": 107.2832,
"date": "2025-04-02",
"high": 108.5632,
"low": 105.7649,
"open": 107.1349,
"value": 107.2832,
"volume": 1774
},
{
"close": 105.8047,
"date": "2025-04-03",
"high": 107.5123,
"low": 104.7047,
"open": 106.1523,
"value": 105.8047,
"volume": 1192
},
{
"close": 104.5551,
"date": "2025-04-04",
"high": 106.8411,
"low": 103.3651,
"open": 105.4011,
"value": 104.5551,
"volume": 1218
},
{
"close": 103.6618,
"date": "2025-04-05",
"high": 106.4315,
"low": 102.3818,
"open": 104.9115,
"value": 103.6618,
"volume": 1241
},
{
"close": 103.2134,
"date": "2025-04-06",
"high": 105.8831,
"low": 101.8434,
"open": 104.6831,
"value": 103.2134,
"volume": 1261
}
];
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Point and figure chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Renko · three-line break.",
"text": "Price blocks"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
};
Graflume.pointAndFigure('#chart', data, options);이식 가능한 스키마
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Point and figure chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Renko · three-line break.",
"text": "Price blocks"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
}Renko chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Point and Figure · range bars.
상태불러오는 중
renkoPoint and Figurerange bars불러오는 중
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
datetemporal | closequantitative |
|---|---|
| 2025-01-01 | 95.1 |
| 2025-01-02 | 96.4177 |
| 2025-01-03 | 97.4641 |
| 2025-01-04 | 98.1631 |
| 2025-01-05 | 98.4747 |
| 2025-01-06 | 98.3969 |
| 2025-01-07 | 97.9643 |
| 2025-01-08 | 97.2423 |
| 2025-01-09 | 96.3192 |
| 2025-01-10 | 95.296 |
| 2025-01-11 | 94.2766 |
| 2025-01-12 | 93.3576 |
| 2025-01-13 | 92.62 |
| 2025-01-14 | 92.1232 |
| 2025-01-15 | 91.9016 |
| 2025-01-16 | 91.9631 |
| 2025-01-17 | 92.2911 |
| 2025-01-18 | 92.8475 |
| 2025-01-19 | 93.5779 |
| 2025-01-20 | 94.4172 |
| 2025-01-21 | 95.2956 |
| 2025-01-22 | 96.1441 |
| 2025-01-23 | 96.8995 |
| 2025-01-24 | 97.5083 |
| 2025-01-25 | 97.9299 |
| 2025-01-26 | 98.1388 |
| 2025-01-27 | 98.1252 |
| 2025-01-28 | 97.8956 |
| 2025-01-29 | 97.4723 |
| 2025-01-30 | 96.8921 |
| 2025-01-31 | 96.2043 |
| 2025-02-01 | 95.4682 |
| 2025-02-02 | 94.7495 |
| 2025-02-03 | 94.1163 |
| 2025-02-04 | 93.6345 |
| 2025-02-05 | 93.3624 |
| 2025-02-06 | 93.3458 |
| 2025-02-07 | 93.6128 |
| 2025-02-08 | 94.1706 |
| 2025-02-09 | 95.0024 |
| 2025-02-10 | 96.0672 |
| 2025-02-11 | 97.3012 |
| 2025-02-12 | 98.6223 |
| 2025-02-13 | 99.9361 |
| 2025-02-14 | 101.1441 |
| 2025-02-15 | 102.1532 |
| 2025-02-16 | 102.8851 |
| 2025-02-17 | 103.2854 |
| 2025-02-18 | 103.3306 |
| 2025-02-19 | 103.0322 |
| 2025-02-20 | 102.4378 |
| 2025-02-21 | 101.6282 |
| 2025-02-22 | 100.7105 |
| 2025-02-23 | 99.8085 |
| 2025-02-24 | 99.0497 |
| 2025-02-25 | 98.5523 |
| 2025-02-26 | 98.4121 |
| 2025-02-27 | 98.6906 |
| 2025-02-28 | 99.4076 |
| 2025-03-01 | 100.5364 |
| 2025-03-02 | 102.0054 |
| 2025-03-03 | 103.704 |
| 2025-03-04 | 105.4928 |
| 2025-03-05 | 107.218 |
| 2025-03-06 | 108.7271 |
| 2025-03-07 | 109.8858 |
| 2025-03-08 | 110.5925 |
| 2025-03-09 | 110.7902 |
| 2025-03-10 | 110.4739 |
| 2025-03-11 | 109.6913 |
| 2025-03-12 | 108.5397 |
| 2025-03-13 | 107.1553 |
| 2025-03-14 | 105.6994 |
| 2025-03-15 | 104.3413 |
| 2025-03-16 | 103.2401 |
| 2025-03-17 | 102.5268 |
| 2025-03-18 | 102.291 |
| 2025-03-19 | 102.5698 |
| 2025-03-20 | 103.3445 |
| 2025-03-21 | 104.5421 |
| 2025-03-22 | 106.0432 |
| 2025-03-23 | 107.6952 |
| 2025-03-24 | 109.3286 |
| 2025-03-25 | 110.7759 |
| 2025-03-26 | 111.8893 |
| 2025-03-27 | 112.5571 |
| 2025-03-28 | 112.7151 |
| 2025-03-29 | 112.3534 |
| 2025-03-30 | 111.5169 |
| 2025-03-31 | 110.3002 |
| 2025-04-01 | 108.8365 |
| 2025-04-02 | 107.2832 |
| 2025-04-03 | 105.8047 |
| 2025-04-04 | 104.5551 |
| 2025-04-05 | 103.6618 |
| 2025-04-06 | 103.2134 |
브라우저 API
const data = [
{
"close": 95.1,
"date": "2025-01-01",
"high": 96.3,
"low": 92.9,
"open": 94,
"value": 95.1,
"volume": 1070
},
{
"close": 96.4177,
"date": "2025-01-02",
"high": 97.6977,
"low": 94.6097,
"open": 95.7997,
"value": 96.4177,
"volume": 1144
},
{
"close": 97.4641,
"date": "2025-01-03",
"high": 98.8241,
"low": 96.0986,
"open": 97.3786,
"value": 97.4641,
"volume": 1217
},
{
"close": 98.1631,
"date": "2025-01-04",
"high": 100.0024,
"low": 96.7931,
"open": 98.5624,
"value": 98.1631,
"volume": 1287
},
{
"close": 98.4747,
"date": "2025-01-05",
"high": 100.7522,
"low": 97.3747,
"open": 99.2322,
"value": 98.4747,
"volume": 1353
},
{
"close": 98.3969,
"date": "2025-01-06",
"high": 100.5404,
"low": 97.2069,
"open": 99.3404,
"value": 98.3969,
"volume": 1415
},
{
"close": 97.9643,
"date": "2025-01-07",
"high": 100.1938,
"low": 96.6843,
"open": 98.9138,
"value": 97.9643,
"volume": 1470
},
{
"close": 97.2423,
"date": "2025-01-08",
"high": 99.4061,
"low": 95.8723,
"open": 98.0461,
"value": 97.2423,
"volume": 1519
},
{
"close": 96.3192,
"date": "2025-01-09",
"high": 98.3193,
"low": 95.2192,
"open": 96.8793,
"value": 96.3192,
"volume": 1562
},
{
"close": 95.296,
"date": "2025-01-10",
"high": 97.0993,
"low": 94.106,
"open": 95.5793,
"value": 95.296,
"volume": 1598
},
{
"close": 94.2766,
"date": "2025-01-11",
"high": 95.5096,
"low": 92.9966,
"open": 94.3096,
"value": 94.2766,
"volume": 1629
},
{
"close": 93.3576,
"date": "2025-01-12",
"high": 94.6376,
"low": 91.8392,
"open": 93.2092,
"value": 93.3576,
"volume": 1656
},
{
"close": 92.62,
"date": "2025-01-13",
"high": 93.98,
"low": 91.2761,
"open": 92.3761,
"value": 92.62,
"volume": 1679
},
{
"close": 92.1232,
"date": "2025-01-14",
"high": 93.5632,
"low": 90.6709,
"open": 91.8609,
"value": 92.1232,
"volume": 1699
},
{
"close": 91.9016,
"date": "2025-01-15",
"high": 93.4216,
"low": 90.389,
"open": 91.669,
"value": 91.9016,
"volume": 1106
},
{
"close": 91.9631,
"date": "2025-01-16",
"high": 93.1631,
"low": 90.4003,
"open": 91.7703,
"value": 91.9631,
"volume": 1126
},
{
"close": 92.2911,
"date": "2025-01-17",
"high": 93.5711,
"low": 91.0131,
"open": 92.1131,
"value": 92.2911,
"volume": 1147
},
{
"close": 92.8475,
"date": "2025-01-18",
"high": 94.2075,
"low": 91.4492,
"open": 92.6392,
"value": 92.8475,
"volume": 1173
},
{
"close": 93.5779,
"date": "2025-01-19",
"high": 95.0179,
"low": 92.0148,
"open": 93.2948,
"value": 93.5779,
"volume": 1202
},
{
"close": 94.4172,
"date": "2025-01-20",
"high": 95.9372,
"low": 92.6673,
"open": 94.0373,
"value": 94.4172,
"volume": 1237
},
{
"close": 95.2956,
"date": "2025-01-21",
"high": 96.4956,
"low": 93.7355,
"open": 94.8355,
"value": 95.2956,
"volume": 1278
},
{
"close": 96.1441,
"date": "2025-01-22",
"high": 97.4241,
"low": 94.4743,
"open": 95.6643,
"value": 96.1441,
"volume": 1325
},
{
"close": 96.8995,
"date": "2025-01-23",
"high": 98.2595,
"low": 95.2164,
"open": 96.4964,
"value": 96.8995,
"volume": 1378
},
{
"close": 97.5083,
"date": "2025-01-24",
"high": 98.9483,
"low": 95.9247,
"open": 97.2947,
"value": 97.5083,
"volume": 1437
},
{
"close": 97.9299,
"date": "2025-01-25",
"high": 99.5269,
"low": 96.8299,
"open": 98.0069,
"value": 97.9299,
"volume": 1502
},
{
"close": 98.1388,
"date": "2025-01-26",
"high": 99.7662,
"low": 96.9488,
"open": 98.5662,
"value": 98.1388,
"volume": 1571
},
{
"close": 98.1252,
"date": "2025-01-27",
"high": 100.1787,
"low": 96.8452,
"open": 98.8987,
"value": 98.1252,
"volume": 1643
},
{
"close": 97.8956,
"date": "2025-01-28",
"high": 100.2955,
"low": 96.5256,
"open": 98.9355,
"value": 97.8956,
"volume": 1104
},
{
"close": 97.4723,
"date": "2025-01-29",
"high": 100.0688,
"low": 96.3723,
"open": 98.6288,
"value": 97.4723,
"volume": 1179
},
{
"close": 96.8921,
"date": "2025-01-30",
"high": 99.4875,
"low": 95.7021,
"open": 97.9675,
"value": 96.8921,
"volume": 1252
},
{
"close": 96.2043,
"date": "2025-01-31",
"high": 98.1891,
"low": 94.9243,
"open": 96.9891,
"value": 96.2043,
"volume": 1323
},
{
"close": 95.4682,
"date": "2025-02-01",
"high": 97.0627,
"low": 94.0982,
"open": 95.7827,
"value": 95.4682,
"volume": 1391
},
{
"close": 94.7495,
"date": "2025-02-02",
"high": 96.1095,
"low": 93.3846,
"open": 94.4846,
"value": 94.7495,
"volume": 1454
},
{
"close": 94.1163,
"date": "2025-02-03",
"high": 95.5563,
"low": 92.0724,
"open": 93.2624,
"value": 94.1163,
"volume": 1511
},
{
"close": 93.6345,
"date": "2025-02-04",
"high": 95.1545,
"low": 91.0128,
"open": 92.2928,
"value": 93.6345,
"volume": 1562
},
{
"close": 93.3624,
"date": "2025-02-05",
"high": 94.5624,
"low": 90.3642,
"open": 91.7342,
"value": 93.3624,
"volume": 1607
},
{
"close": 93.3458,
"date": "2025-02-06",
"high": 94.6258,
"low": 90.6009,
"open": 91.7009,
"value": 93.3458,
"volume": 1645
},
{
"close": 93.6128,
"date": "2025-02-07",
"high": 94.9728,
"low": 91.0527,
"open": 92.2427,
"value": 93.6128,
"volume": 1678
},
{
"close": 94.1706,
"date": "2025-02-08",
"high": 95.6106,
"low": 92.0536,
"open": 93.3336,
"value": 94.1706,
"volume": 1706
},
{
"close": 95.0024,
"date": "2025-02-09",
"high": 96.5224,
"low": 93.5031,
"open": 94.8731,
"value": 95.0024,
"volume": 1730
},
{
"close": 96.0672,
"date": "2025-02-10",
"high": 97.8995,
"low": 94.9672,
"open": 96.6995,
"value": 96.0672,
"volume": 1138
},
{
"close": 97.3012,
"date": "2025-02-11",
"high": 99.8932,
"low": 96.1112,
"open": 98.6132,
"value": 97.3012,
"volume": 1157
},
{
"close": 98.6223,
"date": "2025-02-12",
"high": 101.7664,
"low": 97.3423,
"open": 100.4064,
"value": 98.6223,
"volume": 1177
},
{
"close": 99.9361,
"date": "2025-02-13",
"high": 103.3339,
"low": 98.5661,
"open": 101.8939,
"value": 99.9361,
"volume": 1198
},
{
"close": 101.1441,
"date": "2025-02-14",
"high": 104.4588,
"low": 100.0441,
"open": 102.9388,
"value": 101.1441,
"volume": 1222
},
{
"close": 102.1532,
"date": "2025-02-15",
"high": 104.671,
"low": 100.9632,
"open": 103.471,
"value": 102.1532,
"volume": 1250
},
{
"close": 102.8851,
"date": "2025-02-16",
"high": 104.773,
"low": 101.6051,
"open": 103.493,
"value": 102.8851,
"volume": 1283
},
{
"close": 103.2854,
"date": "2025-02-17",
"high": 104.6454,
"low": 101.7045,
"open": 103.0745,
"value": 103.2854,
"volume": 1322
},
{
"close": 103.3306,
"date": "2025-02-18",
"high": 104.7706,
"low": 101.2366,
"open": 102.3366,
"value": 103.3306,
"volume": 1367
},
{
"close": 103.0322,
"date": "2025-02-19",
"high": 104.5522,
"low": 100.2392,
"open": 101.4292,
"value": 103.0322,
"volume": 1418
},
{
"close": 102.4378,
"date": "2025-02-20",
"high": 103.6378,
"low": 99.226,
"open": 100.506,
"value": 102.4378,
"volume": 1476
},
{
"close": 101.6282,
"date": "2025-02-21",
"high": 102.9082,
"low": 98.3323,
"open": 99.7023,
"value": 101.6282,
"volume": 1539
},
{
"close": 100.7105,
"date": "2025-02-22",
"high": 102.0705,
"low": 98.0185,
"open": 99.1185,
"value": 100.7105,
"volume": 1607
},
{
"close": 99.8085,
"date": "2025-02-23",
"high": 101.2485,
"low": 97.6227,
"open": 98.8127,
"value": 99.8085,
"volume": 1065
},
{
"close": 99.0497,
"date": "2025-02-24",
"high": 100.5697,
"low": 97.521,
"open": 98.801,
"value": 99.0497,
"volume": 1138
},
{
"close": 98.5523,
"date": "2025-02-25",
"high": 100.2666,
"low": 97.1823,
"open": 99.0666,
"value": 98.5523,
"volume": 1213
},
{
"close": 98.4121,
"date": "2025-02-26",
"high": 100.8514,
"low": 97.3121,
"open": 99.5714,
"value": 98.4121,
"volume": 1287
},
{
"close": 98.6906,
"date": "2025-02-27",
"high": 101.63,
"low": 97.5006,
"open": 100.27,
"value": 98.6906,
"volume": 1359
},
{
"close": 99.4076,
"date": "2025-02-28",
"high": 102.5602,
"low": 98.1276,
"open": 101.1202,
"value": 99.4076,
"volume": 1428
},
{
"close": 100.5364,
"date": "2025-03-01",
"high": 103.6082,
"low": 99.1664,
"open": 102.0882,
"value": 100.5364,
"volume": 1492
},
{
"close": 102.0054,
"date": "2025-03-02",
"high": 104.3483,
"low": 100.9054,
"open": 103.1483,
"value": 102.0054,
"volume": 1551
},
{
"close": 103.704,
"date": "2025-03-03",
"high": 105.5579,
"low": 102.514,
"open": 104.2779,
"value": 103.704,
"volume": 1604
},
{
"close": 105.4928,
"date": "2025-03-04",
"high": 106.8528,
"low": 104.1683,
"open": 105.4483,
"value": 105.4928,
"volume": 1651
},
{
"close": 107.218,
"date": "2025-03-05",
"high": 108.658,
"low": 105.247,
"open": 106.617,
"value": 107.218,
"volume": 1692
},
{
"close": 108.7271,
"date": "2025-03-06",
"high": 110.2471,
"low": 106.6223,
"open": 107.7223,
"value": 108.7271,
"volume": 1726
},
{
"close": 109.8858,
"date": "2025-03-07",
"high": 111.0858,
"low": 107.4944,
"open": 108.6844,
"value": 109.8858,
"volume": 1755
},
{
"close": 110.5925,
"date": "2025-03-08",
"high": 111.8725,
"low": 108.1331,
"open": 109.4131,
"value": 110.5925,
"volume": 1167
},
{
"close": 110.7902,
"date": "2025-03-09",
"high": 112.1502,
"low": 108.4508,
"open": 109.8208,
"value": 110.7902,
"volume": 1189
},
{
"close": 110.4739,
"date": "2025-03-10",
"high": 111.9139,
"low": 108.7401,
"open": 109.8401,
"value": 110.4739,
"volume": 1209
},
{
"close": 109.6913,
"date": "2025-03-11",
"high": 111.2113,
"low": 108.2511,
"open": 109.4411,
"value": 109.6913,
"volume": 1229
},
{
"close": 108.5397,
"date": "2025-03-12",
"high": 109.8445,
"low": 107.2597,
"open": 108.6445,
"value": 108.5397,
"volume": 1249
},
{
"close": 107.1553,
"date": "2025-03-13",
"high": 108.8079,
"low": 105.7853,
"open": 107.5279,
"value": 107.1553,
"volume": 1272
},
{
"close": 105.6994,
"date": "2025-03-14",
"high": 107.5813,
"low": 104.5994,
"open": 106.2213,
"value": 105.6994,
"volume": 1299
},
{
"close": 104.3413,
"date": "2025-03-15",
"high": 106.3337,
"low": 103.1513,
"open": 104.8937,
"value": 104.3413,
"volume": 1330
},
{
"close": 103.2401,
"date": "2025-03-16",
"high": 105.2501,
"low": 101.9601,
"open": 103.7301,
"value": 103.2401,
"volume": 1367
},
{
"close": 102.5268,
"date": "2025-03-17",
"high": 104.1045,
"low": 101.1568,
"open": 102.9045,
"value": 102.5268,
"volume": 1410
},
{
"close": 102.291,
"date": "2025-03-18",
"high": 103.8319,
"low": 101.191,
"open": 102.5519,
"value": 102.291,
"volume": 1459
},
{
"close": 102.5698,
"date": "2025-03-19",
"high": 104.106,
"low": 101.3798,
"open": 102.746,
"value": 102.5698,
"volume": 1515
},
{
"close": 103.3445,
"date": "2025-03-20",
"high": 104.9254,
"low": 102.0645,
"open": 103.4854,
"value": 103.3445,
"volume": 1576
},
{
"close": 104.5421,
"date": "2025-03-21",
"high": 106.2119,
"low": 103.1721,
"open": 104.6919,
"value": 104.5421,
"volume": 1030
},
{
"close": 106.0432,
"date": "2025-03-22",
"high": 107.4211,
"low": 104.9432,
"open": 106.2211,
"value": 106.0432,
"volume": 1100
},
{
"close": 107.6952,
"date": "2025-03-23",
"high": 109.1644,
"low": 106.5052,
"open": 107.8844,
"value": 107.6952,
"volume": 1173
},
{
"close": 109.3286,
"date": "2025-03-24",
"high": 110.8369,
"low": 108.0486,
"open": 109.4769,
"value": 109.3286,
"volume": 1247
},
{
"close": 110.7759,
"date": "2025-03-25",
"high": 112.2485,
"low": 109.4059,
"open": 110.8085,
"value": 110.7759,
"volume": 1322
},
{
"close": 111.8893,
"date": "2025-03-26",
"high": 113.4093,
"low": 110.631,
"open": 111.731,
"value": 111.8893,
"volume": 1394
},
{
"close": 112.5571,
"date": "2025-03-27",
"high": 113.7571,
"low": 110.9675,
"open": 112.1575,
"value": 112.5571,
"volume": 1464
},
{
"close": 112.7151,
"date": "2025-03-28",
"high": 113.9951,
"low": 110.7912,
"open": 112.0712,
"value": 112.7151,
"volume": 1530
},
{
"close": 112.3534,
"date": "2025-03-29",
"high": 113.7134,
"low": 110.1524,
"open": 111.5224,
"value": 112.3534,
"volume": 1591
},
{
"close": 111.5169,
"date": "2025-03-30",
"high": 112.9569,
"low": 109.515,
"open": 110.615,
"value": 111.5169,
"volume": 1646
},
{
"close": 110.3002,
"date": "2025-03-31",
"high": 111.8202,
"low": 108.2958,
"open": 109.4858,
"value": 110.3002,
"volume": 1695
},
{
"close": 108.8365,
"date": "2025-04-01",
"high": 110.0365,
"low": 107.0011,
"open": 108.2811,
"value": 108.8365,
"volume": 1737
},
{
"close": 107.2832,
"date": "2025-04-02",
"high": 108.5632,
"low": 105.7649,
"open": 107.1349,
"value": 107.2832,
"volume": 1774
},
{
"close": 105.8047,
"date": "2025-04-03",
"high": 107.5123,
"low": 104.7047,
"open": 106.1523,
"value": 105.8047,
"volume": 1192
},
{
"close": 104.5551,
"date": "2025-04-04",
"high": 106.8411,
"low": 103.3651,
"open": 105.4011,
"value": 104.5551,
"volume": 1218
},
{
"close": 103.6618,
"date": "2025-04-05",
"high": 106.4315,
"low": 102.3818,
"open": 104.9115,
"value": 103.6618,
"volume": 1241
},
{
"close": 103.2134,
"date": "2025-04-06",
"high": 105.8831,
"low": 101.8434,
"open": 104.6831,
"value": 103.2134,
"volume": 1261
}
];
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Renko chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Renko chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Renko chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Point and Figure · range bars.",
"text": "Price blocks · Renko chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
};
Graflume.renko('#chart', data, options);이식 가능한 스키마
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Renko chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Renko chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Renko chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Point and Figure · range bars.",
"text": "Price blocks · Renko chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
}Kagi chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed brick/box · percent/ATR/log sizing.
상태불러오는 중
kagifixed brick/boxpercent/ATR/log sizing불러오는 중
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
datetemporal | closequantitative |
|---|---|
| 2025-01-01 | 95.1 |
| 2025-01-02 | 96.4177 |
| 2025-01-03 | 97.4641 |
| 2025-01-04 | 98.1631 |
| 2025-01-05 | 98.4747 |
| 2025-01-06 | 98.3969 |
| 2025-01-07 | 97.9643 |
| 2025-01-08 | 97.2423 |
| 2025-01-09 | 96.3192 |
| 2025-01-10 | 95.296 |
| 2025-01-11 | 94.2766 |
| 2025-01-12 | 93.3576 |
| 2025-01-13 | 92.62 |
| 2025-01-14 | 92.1232 |
| 2025-01-15 | 91.9016 |
| 2025-01-16 | 91.9631 |
| 2025-01-17 | 92.2911 |
| 2025-01-18 | 92.8475 |
| 2025-01-19 | 93.5779 |
| 2025-01-20 | 94.4172 |
| 2025-01-21 | 95.2956 |
| 2025-01-22 | 96.1441 |
| 2025-01-23 | 96.8995 |
| 2025-01-24 | 97.5083 |
| 2025-01-25 | 97.9299 |
| 2025-01-26 | 98.1388 |
| 2025-01-27 | 98.1252 |
| 2025-01-28 | 97.8956 |
| 2025-01-29 | 97.4723 |
| 2025-01-30 | 96.8921 |
| 2025-01-31 | 96.2043 |
| 2025-02-01 | 95.4682 |
| 2025-02-02 | 94.7495 |
| 2025-02-03 | 94.1163 |
| 2025-02-04 | 93.6345 |
| 2025-02-05 | 93.3624 |
| 2025-02-06 | 93.3458 |
| 2025-02-07 | 93.6128 |
| 2025-02-08 | 94.1706 |
| 2025-02-09 | 95.0024 |
| 2025-02-10 | 96.0672 |
| 2025-02-11 | 97.3012 |
| 2025-02-12 | 98.6223 |
| 2025-02-13 | 99.9361 |
| 2025-02-14 | 101.1441 |
| 2025-02-15 | 102.1532 |
| 2025-02-16 | 102.8851 |
| 2025-02-17 | 103.2854 |
| 2025-02-18 | 103.3306 |
| 2025-02-19 | 103.0322 |
| 2025-02-20 | 102.4378 |
| 2025-02-21 | 101.6282 |
| 2025-02-22 | 100.7105 |
| 2025-02-23 | 99.8085 |
| 2025-02-24 | 99.0497 |
| 2025-02-25 | 98.5523 |
| 2025-02-26 | 98.4121 |
| 2025-02-27 | 98.6906 |
| 2025-02-28 | 99.4076 |
| 2025-03-01 | 100.5364 |
| 2025-03-02 | 102.0054 |
| 2025-03-03 | 103.704 |
| 2025-03-04 | 105.4928 |
| 2025-03-05 | 107.218 |
| 2025-03-06 | 108.7271 |
| 2025-03-07 | 109.8858 |
| 2025-03-08 | 110.5925 |
| 2025-03-09 | 110.7902 |
| 2025-03-10 | 110.4739 |
| 2025-03-11 | 109.6913 |
| 2025-03-12 | 108.5397 |
| 2025-03-13 | 107.1553 |
| 2025-03-14 | 105.6994 |
| 2025-03-15 | 104.3413 |
| 2025-03-16 | 103.2401 |
| 2025-03-17 | 102.5268 |
| 2025-03-18 | 102.291 |
| 2025-03-19 | 102.5698 |
| 2025-03-20 | 103.3445 |
| 2025-03-21 | 104.5421 |
| 2025-03-22 | 106.0432 |
| 2025-03-23 | 107.6952 |
| 2025-03-24 | 109.3286 |
| 2025-03-25 | 110.7759 |
| 2025-03-26 | 111.8893 |
| 2025-03-27 | 112.5571 |
| 2025-03-28 | 112.7151 |
| 2025-03-29 | 112.3534 |
| 2025-03-30 | 111.5169 |
| 2025-03-31 | 110.3002 |
| 2025-04-01 | 108.8365 |
| 2025-04-02 | 107.2832 |
| 2025-04-03 | 105.8047 |
| 2025-04-04 | 104.5551 |
| 2025-04-05 | 103.6618 |
| 2025-04-06 | 103.2134 |
브라우저 API
const data = [
{
"close": 95.1,
"date": "2025-01-01",
"high": 96.3,
"low": 92.9,
"open": 94,
"value": 95.1,
"volume": 1070
},
{
"close": 96.4177,
"date": "2025-01-02",
"high": 97.6977,
"low": 94.6097,
"open": 95.7997,
"value": 96.4177,
"volume": 1144
},
{
"close": 97.4641,
"date": "2025-01-03",
"high": 98.8241,
"low": 96.0986,
"open": 97.3786,
"value": 97.4641,
"volume": 1217
},
{
"close": 98.1631,
"date": "2025-01-04",
"high": 100.0024,
"low": 96.7931,
"open": 98.5624,
"value": 98.1631,
"volume": 1287
},
{
"close": 98.4747,
"date": "2025-01-05",
"high": 100.7522,
"low": 97.3747,
"open": 99.2322,
"value": 98.4747,
"volume": 1353
},
{
"close": 98.3969,
"date": "2025-01-06",
"high": 100.5404,
"low": 97.2069,
"open": 99.3404,
"value": 98.3969,
"volume": 1415
},
{
"close": 97.9643,
"date": "2025-01-07",
"high": 100.1938,
"low": 96.6843,
"open": 98.9138,
"value": 97.9643,
"volume": 1470
},
{
"close": 97.2423,
"date": "2025-01-08",
"high": 99.4061,
"low": 95.8723,
"open": 98.0461,
"value": 97.2423,
"volume": 1519
},
{
"close": 96.3192,
"date": "2025-01-09",
"high": 98.3193,
"low": 95.2192,
"open": 96.8793,
"value": 96.3192,
"volume": 1562
},
{
"close": 95.296,
"date": "2025-01-10",
"high": 97.0993,
"low": 94.106,
"open": 95.5793,
"value": 95.296,
"volume": 1598
},
{
"close": 94.2766,
"date": "2025-01-11",
"high": 95.5096,
"low": 92.9966,
"open": 94.3096,
"value": 94.2766,
"volume": 1629
},
{
"close": 93.3576,
"date": "2025-01-12",
"high": 94.6376,
"low": 91.8392,
"open": 93.2092,
"value": 93.3576,
"volume": 1656
},
{
"close": 92.62,
"date": "2025-01-13",
"high": 93.98,
"low": 91.2761,
"open": 92.3761,
"value": 92.62,
"volume": 1679
},
{
"close": 92.1232,
"date": "2025-01-14",
"high": 93.5632,
"low": 90.6709,
"open": 91.8609,
"value": 92.1232,
"volume": 1699
},
{
"close": 91.9016,
"date": "2025-01-15",
"high": 93.4216,
"low": 90.389,
"open": 91.669,
"value": 91.9016,
"volume": 1106
},
{
"close": 91.9631,
"date": "2025-01-16",
"high": 93.1631,
"low": 90.4003,
"open": 91.7703,
"value": 91.9631,
"volume": 1126
},
{
"close": 92.2911,
"date": "2025-01-17",
"high": 93.5711,
"low": 91.0131,
"open": 92.1131,
"value": 92.2911,
"volume": 1147
},
{
"close": 92.8475,
"date": "2025-01-18",
"high": 94.2075,
"low": 91.4492,
"open": 92.6392,
"value": 92.8475,
"volume": 1173
},
{
"close": 93.5779,
"date": "2025-01-19",
"high": 95.0179,
"low": 92.0148,
"open": 93.2948,
"value": 93.5779,
"volume": 1202
},
{
"close": 94.4172,
"date": "2025-01-20",
"high": 95.9372,
"low": 92.6673,
"open": 94.0373,
"value": 94.4172,
"volume": 1237
},
{
"close": 95.2956,
"date": "2025-01-21",
"high": 96.4956,
"low": 93.7355,
"open": 94.8355,
"value": 95.2956,
"volume": 1278
},
{
"close": 96.1441,
"date": "2025-01-22",
"high": 97.4241,
"low": 94.4743,
"open": 95.6643,
"value": 96.1441,
"volume": 1325
},
{
"close": 96.8995,
"date": "2025-01-23",
"high": 98.2595,
"low": 95.2164,
"open": 96.4964,
"value": 96.8995,
"volume": 1378
},
{
"close": 97.5083,
"date": "2025-01-24",
"high": 98.9483,
"low": 95.9247,
"open": 97.2947,
"value": 97.5083,
"volume": 1437
},
{
"close": 97.9299,
"date": "2025-01-25",
"high": 99.5269,
"low": 96.8299,
"open": 98.0069,
"value": 97.9299,
"volume": 1502
},
{
"close": 98.1388,
"date": "2025-01-26",
"high": 99.7662,
"low": 96.9488,
"open": 98.5662,
"value": 98.1388,
"volume": 1571
},
{
"close": 98.1252,
"date": "2025-01-27",
"high": 100.1787,
"low": 96.8452,
"open": 98.8987,
"value": 98.1252,
"volume": 1643
},
{
"close": 97.8956,
"date": "2025-01-28",
"high": 100.2955,
"low": 96.5256,
"open": 98.9355,
"value": 97.8956,
"volume": 1104
},
{
"close": 97.4723,
"date": "2025-01-29",
"high": 100.0688,
"low": 96.3723,
"open": 98.6288,
"value": 97.4723,
"volume": 1179
},
{
"close": 96.8921,
"date": "2025-01-30",
"high": 99.4875,
"low": 95.7021,
"open": 97.9675,
"value": 96.8921,
"volume": 1252
},
{
"close": 96.2043,
"date": "2025-01-31",
"high": 98.1891,
"low": 94.9243,
"open": 96.9891,
"value": 96.2043,
"volume": 1323
},
{
"close": 95.4682,
"date": "2025-02-01",
"high": 97.0627,
"low": 94.0982,
"open": 95.7827,
"value": 95.4682,
"volume": 1391
},
{
"close": 94.7495,
"date": "2025-02-02",
"high": 96.1095,
"low": 93.3846,
"open": 94.4846,
"value": 94.7495,
"volume": 1454
},
{
"close": 94.1163,
"date": "2025-02-03",
"high": 95.5563,
"low": 92.0724,
"open": 93.2624,
"value": 94.1163,
"volume": 1511
},
{
"close": 93.6345,
"date": "2025-02-04",
"high": 95.1545,
"low": 91.0128,
"open": 92.2928,
"value": 93.6345,
"volume": 1562
},
{
"close": 93.3624,
"date": "2025-02-05",
"high": 94.5624,
"low": 90.3642,
"open": 91.7342,
"value": 93.3624,
"volume": 1607
},
{
"close": 93.3458,
"date": "2025-02-06",
"high": 94.6258,
"low": 90.6009,
"open": 91.7009,
"value": 93.3458,
"volume": 1645
},
{
"close": 93.6128,
"date": "2025-02-07",
"high": 94.9728,
"low": 91.0527,
"open": 92.2427,
"value": 93.6128,
"volume": 1678
},
{
"close": 94.1706,
"date": "2025-02-08",
"high": 95.6106,
"low": 92.0536,
"open": 93.3336,
"value": 94.1706,
"volume": 1706
},
{
"close": 95.0024,
"date": "2025-02-09",
"high": 96.5224,
"low": 93.5031,
"open": 94.8731,
"value": 95.0024,
"volume": 1730
},
{
"close": 96.0672,
"date": "2025-02-10",
"high": 97.8995,
"low": 94.9672,
"open": 96.6995,
"value": 96.0672,
"volume": 1138
},
{
"close": 97.3012,
"date": "2025-02-11",
"high": 99.8932,
"low": 96.1112,
"open": 98.6132,
"value": 97.3012,
"volume": 1157
},
{
"close": 98.6223,
"date": "2025-02-12",
"high": 101.7664,
"low": 97.3423,
"open": 100.4064,
"value": 98.6223,
"volume": 1177
},
{
"close": 99.9361,
"date": "2025-02-13",
"high": 103.3339,
"low": 98.5661,
"open": 101.8939,
"value": 99.9361,
"volume": 1198
},
{
"close": 101.1441,
"date": "2025-02-14",
"high": 104.4588,
"low": 100.0441,
"open": 102.9388,
"value": 101.1441,
"volume": 1222
},
{
"close": 102.1532,
"date": "2025-02-15",
"high": 104.671,
"low": 100.9632,
"open": 103.471,
"value": 102.1532,
"volume": 1250
},
{
"close": 102.8851,
"date": "2025-02-16",
"high": 104.773,
"low": 101.6051,
"open": 103.493,
"value": 102.8851,
"volume": 1283
},
{
"close": 103.2854,
"date": "2025-02-17",
"high": 104.6454,
"low": 101.7045,
"open": 103.0745,
"value": 103.2854,
"volume": 1322
},
{
"close": 103.3306,
"date": "2025-02-18",
"high": 104.7706,
"low": 101.2366,
"open": 102.3366,
"value": 103.3306,
"volume": 1367
},
{
"close": 103.0322,
"date": "2025-02-19",
"high": 104.5522,
"low": 100.2392,
"open": 101.4292,
"value": 103.0322,
"volume": 1418
},
{
"close": 102.4378,
"date": "2025-02-20",
"high": 103.6378,
"low": 99.226,
"open": 100.506,
"value": 102.4378,
"volume": 1476
},
{
"close": 101.6282,
"date": "2025-02-21",
"high": 102.9082,
"low": 98.3323,
"open": 99.7023,
"value": 101.6282,
"volume": 1539
},
{
"close": 100.7105,
"date": "2025-02-22",
"high": 102.0705,
"low": 98.0185,
"open": 99.1185,
"value": 100.7105,
"volume": 1607
},
{
"close": 99.8085,
"date": "2025-02-23",
"high": 101.2485,
"low": 97.6227,
"open": 98.8127,
"value": 99.8085,
"volume": 1065
},
{
"close": 99.0497,
"date": "2025-02-24",
"high": 100.5697,
"low": 97.521,
"open": 98.801,
"value": 99.0497,
"volume": 1138
},
{
"close": 98.5523,
"date": "2025-02-25",
"high": 100.2666,
"low": 97.1823,
"open": 99.0666,
"value": 98.5523,
"volume": 1213
},
{
"close": 98.4121,
"date": "2025-02-26",
"high": 100.8514,
"low": 97.3121,
"open": 99.5714,
"value": 98.4121,
"volume": 1287
},
{
"close": 98.6906,
"date": "2025-02-27",
"high": 101.63,
"low": 97.5006,
"open": 100.27,
"value": 98.6906,
"volume": 1359
},
{
"close": 99.4076,
"date": "2025-02-28",
"high": 102.5602,
"low": 98.1276,
"open": 101.1202,
"value": 99.4076,
"volume": 1428
},
{
"close": 100.5364,
"date": "2025-03-01",
"high": 103.6082,
"low": 99.1664,
"open": 102.0882,
"value": 100.5364,
"volume": 1492
},
{
"close": 102.0054,
"date": "2025-03-02",
"high": 104.3483,
"low": 100.9054,
"open": 103.1483,
"value": 102.0054,
"volume": 1551
},
{
"close": 103.704,
"date": "2025-03-03",
"high": 105.5579,
"low": 102.514,
"open": 104.2779,
"value": 103.704,
"volume": 1604
},
{
"close": 105.4928,
"date": "2025-03-04",
"high": 106.8528,
"low": 104.1683,
"open": 105.4483,
"value": 105.4928,
"volume": 1651
},
{
"close": 107.218,
"date": "2025-03-05",
"high": 108.658,
"low": 105.247,
"open": 106.617,
"value": 107.218,
"volume": 1692
},
{
"close": 108.7271,
"date": "2025-03-06",
"high": 110.2471,
"low": 106.6223,
"open": 107.7223,
"value": 108.7271,
"volume": 1726
},
{
"close": 109.8858,
"date": "2025-03-07",
"high": 111.0858,
"low": 107.4944,
"open": 108.6844,
"value": 109.8858,
"volume": 1755
},
{
"close": 110.5925,
"date": "2025-03-08",
"high": 111.8725,
"low": 108.1331,
"open": 109.4131,
"value": 110.5925,
"volume": 1167
},
{
"close": 110.7902,
"date": "2025-03-09",
"high": 112.1502,
"low": 108.4508,
"open": 109.8208,
"value": 110.7902,
"volume": 1189
},
{
"close": 110.4739,
"date": "2025-03-10",
"high": 111.9139,
"low": 108.7401,
"open": 109.8401,
"value": 110.4739,
"volume": 1209
},
{
"close": 109.6913,
"date": "2025-03-11",
"high": 111.2113,
"low": 108.2511,
"open": 109.4411,
"value": 109.6913,
"volume": 1229
},
{
"close": 108.5397,
"date": "2025-03-12",
"high": 109.8445,
"low": 107.2597,
"open": 108.6445,
"value": 108.5397,
"volume": 1249
},
{
"close": 107.1553,
"date": "2025-03-13",
"high": 108.8079,
"low": 105.7853,
"open": 107.5279,
"value": 107.1553,
"volume": 1272
},
{
"close": 105.6994,
"date": "2025-03-14",
"high": 107.5813,
"low": 104.5994,
"open": 106.2213,
"value": 105.6994,
"volume": 1299
},
{
"close": 104.3413,
"date": "2025-03-15",
"high": 106.3337,
"low": 103.1513,
"open": 104.8937,
"value": 104.3413,
"volume": 1330
},
{
"close": 103.2401,
"date": "2025-03-16",
"high": 105.2501,
"low": 101.9601,
"open": 103.7301,
"value": 103.2401,
"volume": 1367
},
{
"close": 102.5268,
"date": "2025-03-17",
"high": 104.1045,
"low": 101.1568,
"open": 102.9045,
"value": 102.5268,
"volume": 1410
},
{
"close": 102.291,
"date": "2025-03-18",
"high": 103.8319,
"low": 101.191,
"open": 102.5519,
"value": 102.291,
"volume": 1459
},
{
"close": 102.5698,
"date": "2025-03-19",
"high": 104.106,
"low": 101.3798,
"open": 102.746,
"value": 102.5698,
"volume": 1515
},
{
"close": 103.3445,
"date": "2025-03-20",
"high": 104.9254,
"low": 102.0645,
"open": 103.4854,
"value": 103.3445,
"volume": 1576
},
{
"close": 104.5421,
"date": "2025-03-21",
"high": 106.2119,
"low": 103.1721,
"open": 104.6919,
"value": 104.5421,
"volume": 1030
},
{
"close": 106.0432,
"date": "2025-03-22",
"high": 107.4211,
"low": 104.9432,
"open": 106.2211,
"value": 106.0432,
"volume": 1100
},
{
"close": 107.6952,
"date": "2025-03-23",
"high": 109.1644,
"low": 106.5052,
"open": 107.8844,
"value": 107.6952,
"volume": 1173
},
{
"close": 109.3286,
"date": "2025-03-24",
"high": 110.8369,
"low": 108.0486,
"open": 109.4769,
"value": 109.3286,
"volume": 1247
},
{
"close": 110.7759,
"date": "2025-03-25",
"high": 112.2485,
"low": 109.4059,
"open": 110.8085,
"value": 110.7759,
"volume": 1322
},
{
"close": 111.8893,
"date": "2025-03-26",
"high": 113.4093,
"low": 110.631,
"open": 111.731,
"value": 111.8893,
"volume": 1394
},
{
"close": 112.5571,
"date": "2025-03-27",
"high": 113.7571,
"low": 110.9675,
"open": 112.1575,
"value": 112.5571,
"volume": 1464
},
{
"close": 112.7151,
"date": "2025-03-28",
"high": 113.9951,
"low": 110.7912,
"open": 112.0712,
"value": 112.7151,
"volume": 1530
},
{
"close": 112.3534,
"date": "2025-03-29",
"high": 113.7134,
"low": 110.1524,
"open": 111.5224,
"value": 112.3534,
"volume": 1591
},
{
"close": 111.5169,
"date": "2025-03-30",
"high": 112.9569,
"low": 109.515,
"open": 110.615,
"value": 111.5169,
"volume": 1646
},
{
"close": 110.3002,
"date": "2025-03-31",
"high": 111.8202,
"low": 108.2958,
"open": 109.4858,
"value": 110.3002,
"volume": 1695
},
{
"close": 108.8365,
"date": "2025-04-01",
"high": 110.0365,
"low": 107.0011,
"open": 108.2811,
"value": 108.8365,
"volume": 1737
},
{
"close": 107.2832,
"date": "2025-04-02",
"high": 108.5632,
"low": 105.7649,
"open": 107.1349,
"value": 107.2832,
"volume": 1774
},
{
"close": 105.8047,
"date": "2025-04-03",
"high": 107.5123,
"low": 104.7047,
"open": 106.1523,
"value": 105.8047,
"volume": 1192
},
{
"close": 104.5551,
"date": "2025-04-04",
"high": 106.8411,
"low": 103.3651,
"open": 105.4011,
"value": 104.5551,
"volume": 1218
},
{
"close": 103.6618,
"date": "2025-04-05",
"high": 106.4315,
"low": 102.3818,
"open": 104.9115,
"value": 103.6618,
"volume": 1241
},
{
"close": 103.2134,
"date": "2025-04-06",
"high": 105.8831,
"low": 101.8434,
"open": 104.6831,
"value": 103.2134,
"volume": 1261
}
];
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Kagi chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Kagi chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Kagi chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed brick/box · percent/ATR/log sizing.",
"text": "Price blocks · Kagi chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
};
Graflume.kagi('#chart', data, options);이식 가능한 스키마
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Kagi chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Kagi chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Kagi chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: fixed brick/box · percent/ATR/log sizing.",
"text": "Price blocks · Kagi chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
}Three line break chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: partial provenance tooltip · OHLC-source provenance.
상태불러오는 중
three-line-breakpartial provenance tooltipOHLC-source provenance불러오는 중
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
datetemporal | closequantitative |
|---|---|
| 2025-01-01 | 95.1 |
| 2025-01-02 | 96.4177 |
| 2025-01-03 | 97.4641 |
| 2025-01-04 | 98.1631 |
| 2025-01-05 | 98.4747 |
| 2025-01-06 | 98.3969 |
| 2025-01-07 | 97.9643 |
| 2025-01-08 | 97.2423 |
| 2025-01-09 | 96.3192 |
| 2025-01-10 | 95.296 |
| 2025-01-11 | 94.2766 |
| 2025-01-12 | 93.3576 |
| 2025-01-13 | 92.62 |
| 2025-01-14 | 92.1232 |
| 2025-01-15 | 91.9016 |
| 2025-01-16 | 91.9631 |
| 2025-01-17 | 92.2911 |
| 2025-01-18 | 92.8475 |
| 2025-01-19 | 93.5779 |
| 2025-01-20 | 94.4172 |
| 2025-01-21 | 95.2956 |
| 2025-01-22 | 96.1441 |
| 2025-01-23 | 96.8995 |
| 2025-01-24 | 97.5083 |
| 2025-01-25 | 97.9299 |
| 2025-01-26 | 98.1388 |
| 2025-01-27 | 98.1252 |
| 2025-01-28 | 97.8956 |
| 2025-01-29 | 97.4723 |
| 2025-01-30 | 96.8921 |
| 2025-01-31 | 96.2043 |
| 2025-02-01 | 95.4682 |
| 2025-02-02 | 94.7495 |
| 2025-02-03 | 94.1163 |
| 2025-02-04 | 93.6345 |
| 2025-02-05 | 93.3624 |
| 2025-02-06 | 93.3458 |
| 2025-02-07 | 93.6128 |
| 2025-02-08 | 94.1706 |
| 2025-02-09 | 95.0024 |
| 2025-02-10 | 96.0672 |
| 2025-02-11 | 97.3012 |
| 2025-02-12 | 98.6223 |
| 2025-02-13 | 99.9361 |
| 2025-02-14 | 101.1441 |
| 2025-02-15 | 102.1532 |
| 2025-02-16 | 102.8851 |
| 2025-02-17 | 103.2854 |
| 2025-02-18 | 103.3306 |
| 2025-02-19 | 103.0322 |
| 2025-02-20 | 102.4378 |
| 2025-02-21 | 101.6282 |
| 2025-02-22 | 100.7105 |
| 2025-02-23 | 99.8085 |
| 2025-02-24 | 99.0497 |
| 2025-02-25 | 98.5523 |
| 2025-02-26 | 98.4121 |
| 2025-02-27 | 98.6906 |
| 2025-02-28 | 99.4076 |
| 2025-03-01 | 100.5364 |
| 2025-03-02 | 102.0054 |
| 2025-03-03 | 103.704 |
| 2025-03-04 | 105.4928 |
| 2025-03-05 | 107.218 |
| 2025-03-06 | 108.7271 |
| 2025-03-07 | 109.8858 |
| 2025-03-08 | 110.5925 |
| 2025-03-09 | 110.7902 |
| 2025-03-10 | 110.4739 |
| 2025-03-11 | 109.6913 |
| 2025-03-12 | 108.5397 |
| 2025-03-13 | 107.1553 |
| 2025-03-14 | 105.6994 |
| 2025-03-15 | 104.3413 |
| 2025-03-16 | 103.2401 |
| 2025-03-17 | 102.5268 |
| 2025-03-18 | 102.291 |
| 2025-03-19 | 102.5698 |
| 2025-03-20 | 103.3445 |
| 2025-03-21 | 104.5421 |
| 2025-03-22 | 106.0432 |
| 2025-03-23 | 107.6952 |
| 2025-03-24 | 109.3286 |
| 2025-03-25 | 110.7759 |
| 2025-03-26 | 111.8893 |
| 2025-03-27 | 112.5571 |
| 2025-03-28 | 112.7151 |
| 2025-03-29 | 112.3534 |
| 2025-03-30 | 111.5169 |
| 2025-03-31 | 110.3002 |
| 2025-04-01 | 108.8365 |
| 2025-04-02 | 107.2832 |
| 2025-04-03 | 105.8047 |
| 2025-04-04 | 104.5551 |
| 2025-04-05 | 103.6618 |
| 2025-04-06 | 103.2134 |
브라우저 API
const data = [
{
"close": 95.1,
"date": "2025-01-01",
"high": 96.3,
"low": 92.9,
"open": 94,
"value": 95.1,
"volume": 1070
},
{
"close": 96.4177,
"date": "2025-01-02",
"high": 97.6977,
"low": 94.6097,
"open": 95.7997,
"value": 96.4177,
"volume": 1144
},
{
"close": 97.4641,
"date": "2025-01-03",
"high": 98.8241,
"low": 96.0986,
"open": 97.3786,
"value": 97.4641,
"volume": 1217
},
{
"close": 98.1631,
"date": "2025-01-04",
"high": 100.0024,
"low": 96.7931,
"open": 98.5624,
"value": 98.1631,
"volume": 1287
},
{
"close": 98.4747,
"date": "2025-01-05",
"high": 100.7522,
"low": 97.3747,
"open": 99.2322,
"value": 98.4747,
"volume": 1353
},
{
"close": 98.3969,
"date": "2025-01-06",
"high": 100.5404,
"low": 97.2069,
"open": 99.3404,
"value": 98.3969,
"volume": 1415
},
{
"close": 97.9643,
"date": "2025-01-07",
"high": 100.1938,
"low": 96.6843,
"open": 98.9138,
"value": 97.9643,
"volume": 1470
},
{
"close": 97.2423,
"date": "2025-01-08",
"high": 99.4061,
"low": 95.8723,
"open": 98.0461,
"value": 97.2423,
"volume": 1519
},
{
"close": 96.3192,
"date": "2025-01-09",
"high": 98.3193,
"low": 95.2192,
"open": 96.8793,
"value": 96.3192,
"volume": 1562
},
{
"close": 95.296,
"date": "2025-01-10",
"high": 97.0993,
"low": 94.106,
"open": 95.5793,
"value": 95.296,
"volume": 1598
},
{
"close": 94.2766,
"date": "2025-01-11",
"high": 95.5096,
"low": 92.9966,
"open": 94.3096,
"value": 94.2766,
"volume": 1629
},
{
"close": 93.3576,
"date": "2025-01-12",
"high": 94.6376,
"low": 91.8392,
"open": 93.2092,
"value": 93.3576,
"volume": 1656
},
{
"close": 92.62,
"date": "2025-01-13",
"high": 93.98,
"low": 91.2761,
"open": 92.3761,
"value": 92.62,
"volume": 1679
},
{
"close": 92.1232,
"date": "2025-01-14",
"high": 93.5632,
"low": 90.6709,
"open": 91.8609,
"value": 92.1232,
"volume": 1699
},
{
"close": 91.9016,
"date": "2025-01-15",
"high": 93.4216,
"low": 90.389,
"open": 91.669,
"value": 91.9016,
"volume": 1106
},
{
"close": 91.9631,
"date": "2025-01-16",
"high": 93.1631,
"low": 90.4003,
"open": 91.7703,
"value": 91.9631,
"volume": 1126
},
{
"close": 92.2911,
"date": "2025-01-17",
"high": 93.5711,
"low": 91.0131,
"open": 92.1131,
"value": 92.2911,
"volume": 1147
},
{
"close": 92.8475,
"date": "2025-01-18",
"high": 94.2075,
"low": 91.4492,
"open": 92.6392,
"value": 92.8475,
"volume": 1173
},
{
"close": 93.5779,
"date": "2025-01-19",
"high": 95.0179,
"low": 92.0148,
"open": 93.2948,
"value": 93.5779,
"volume": 1202
},
{
"close": 94.4172,
"date": "2025-01-20",
"high": 95.9372,
"low": 92.6673,
"open": 94.0373,
"value": 94.4172,
"volume": 1237
},
{
"close": 95.2956,
"date": "2025-01-21",
"high": 96.4956,
"low": 93.7355,
"open": 94.8355,
"value": 95.2956,
"volume": 1278
},
{
"close": 96.1441,
"date": "2025-01-22",
"high": 97.4241,
"low": 94.4743,
"open": 95.6643,
"value": 96.1441,
"volume": 1325
},
{
"close": 96.8995,
"date": "2025-01-23",
"high": 98.2595,
"low": 95.2164,
"open": 96.4964,
"value": 96.8995,
"volume": 1378
},
{
"close": 97.5083,
"date": "2025-01-24",
"high": 98.9483,
"low": 95.9247,
"open": 97.2947,
"value": 97.5083,
"volume": 1437
},
{
"close": 97.9299,
"date": "2025-01-25",
"high": 99.5269,
"low": 96.8299,
"open": 98.0069,
"value": 97.9299,
"volume": 1502
},
{
"close": 98.1388,
"date": "2025-01-26",
"high": 99.7662,
"low": 96.9488,
"open": 98.5662,
"value": 98.1388,
"volume": 1571
},
{
"close": 98.1252,
"date": "2025-01-27",
"high": 100.1787,
"low": 96.8452,
"open": 98.8987,
"value": 98.1252,
"volume": 1643
},
{
"close": 97.8956,
"date": "2025-01-28",
"high": 100.2955,
"low": 96.5256,
"open": 98.9355,
"value": 97.8956,
"volume": 1104
},
{
"close": 97.4723,
"date": "2025-01-29",
"high": 100.0688,
"low": 96.3723,
"open": 98.6288,
"value": 97.4723,
"volume": 1179
},
{
"close": 96.8921,
"date": "2025-01-30",
"high": 99.4875,
"low": 95.7021,
"open": 97.9675,
"value": 96.8921,
"volume": 1252
},
{
"close": 96.2043,
"date": "2025-01-31",
"high": 98.1891,
"low": 94.9243,
"open": 96.9891,
"value": 96.2043,
"volume": 1323
},
{
"close": 95.4682,
"date": "2025-02-01",
"high": 97.0627,
"low": 94.0982,
"open": 95.7827,
"value": 95.4682,
"volume": 1391
},
{
"close": 94.7495,
"date": "2025-02-02",
"high": 96.1095,
"low": 93.3846,
"open": 94.4846,
"value": 94.7495,
"volume": 1454
},
{
"close": 94.1163,
"date": "2025-02-03",
"high": 95.5563,
"low": 92.0724,
"open": 93.2624,
"value": 94.1163,
"volume": 1511
},
{
"close": 93.6345,
"date": "2025-02-04",
"high": 95.1545,
"low": 91.0128,
"open": 92.2928,
"value": 93.6345,
"volume": 1562
},
{
"close": 93.3624,
"date": "2025-02-05",
"high": 94.5624,
"low": 90.3642,
"open": 91.7342,
"value": 93.3624,
"volume": 1607
},
{
"close": 93.3458,
"date": "2025-02-06",
"high": 94.6258,
"low": 90.6009,
"open": 91.7009,
"value": 93.3458,
"volume": 1645
},
{
"close": 93.6128,
"date": "2025-02-07",
"high": 94.9728,
"low": 91.0527,
"open": 92.2427,
"value": 93.6128,
"volume": 1678
},
{
"close": 94.1706,
"date": "2025-02-08",
"high": 95.6106,
"low": 92.0536,
"open": 93.3336,
"value": 94.1706,
"volume": 1706
},
{
"close": 95.0024,
"date": "2025-02-09",
"high": 96.5224,
"low": 93.5031,
"open": 94.8731,
"value": 95.0024,
"volume": 1730
},
{
"close": 96.0672,
"date": "2025-02-10",
"high": 97.8995,
"low": 94.9672,
"open": 96.6995,
"value": 96.0672,
"volume": 1138
},
{
"close": 97.3012,
"date": "2025-02-11",
"high": 99.8932,
"low": 96.1112,
"open": 98.6132,
"value": 97.3012,
"volume": 1157
},
{
"close": 98.6223,
"date": "2025-02-12",
"high": 101.7664,
"low": 97.3423,
"open": 100.4064,
"value": 98.6223,
"volume": 1177
},
{
"close": 99.9361,
"date": "2025-02-13",
"high": 103.3339,
"low": 98.5661,
"open": 101.8939,
"value": 99.9361,
"volume": 1198
},
{
"close": 101.1441,
"date": "2025-02-14",
"high": 104.4588,
"low": 100.0441,
"open": 102.9388,
"value": 101.1441,
"volume": 1222
},
{
"close": 102.1532,
"date": "2025-02-15",
"high": 104.671,
"low": 100.9632,
"open": 103.471,
"value": 102.1532,
"volume": 1250
},
{
"close": 102.8851,
"date": "2025-02-16",
"high": 104.773,
"low": 101.6051,
"open": 103.493,
"value": 102.8851,
"volume": 1283
},
{
"close": 103.2854,
"date": "2025-02-17",
"high": 104.6454,
"low": 101.7045,
"open": 103.0745,
"value": 103.2854,
"volume": 1322
},
{
"close": 103.3306,
"date": "2025-02-18",
"high": 104.7706,
"low": 101.2366,
"open": 102.3366,
"value": 103.3306,
"volume": 1367
},
{
"close": 103.0322,
"date": "2025-02-19",
"high": 104.5522,
"low": 100.2392,
"open": 101.4292,
"value": 103.0322,
"volume": 1418
},
{
"close": 102.4378,
"date": "2025-02-20",
"high": 103.6378,
"low": 99.226,
"open": 100.506,
"value": 102.4378,
"volume": 1476
},
{
"close": 101.6282,
"date": "2025-02-21",
"high": 102.9082,
"low": 98.3323,
"open": 99.7023,
"value": 101.6282,
"volume": 1539
},
{
"close": 100.7105,
"date": "2025-02-22",
"high": 102.0705,
"low": 98.0185,
"open": 99.1185,
"value": 100.7105,
"volume": 1607
},
{
"close": 99.8085,
"date": "2025-02-23",
"high": 101.2485,
"low": 97.6227,
"open": 98.8127,
"value": 99.8085,
"volume": 1065
},
{
"close": 99.0497,
"date": "2025-02-24",
"high": 100.5697,
"low": 97.521,
"open": 98.801,
"value": 99.0497,
"volume": 1138
},
{
"close": 98.5523,
"date": "2025-02-25",
"high": 100.2666,
"low": 97.1823,
"open": 99.0666,
"value": 98.5523,
"volume": 1213
},
{
"close": 98.4121,
"date": "2025-02-26",
"high": 100.8514,
"low": 97.3121,
"open": 99.5714,
"value": 98.4121,
"volume": 1287
},
{
"close": 98.6906,
"date": "2025-02-27",
"high": 101.63,
"low": 97.5006,
"open": 100.27,
"value": 98.6906,
"volume": 1359
},
{
"close": 99.4076,
"date": "2025-02-28",
"high": 102.5602,
"low": 98.1276,
"open": 101.1202,
"value": 99.4076,
"volume": 1428
},
{
"close": 100.5364,
"date": "2025-03-01",
"high": 103.6082,
"low": 99.1664,
"open": 102.0882,
"value": 100.5364,
"volume": 1492
},
{
"close": 102.0054,
"date": "2025-03-02",
"high": 104.3483,
"low": 100.9054,
"open": 103.1483,
"value": 102.0054,
"volume": 1551
},
{
"close": 103.704,
"date": "2025-03-03",
"high": 105.5579,
"low": 102.514,
"open": 104.2779,
"value": 103.704,
"volume": 1604
},
{
"close": 105.4928,
"date": "2025-03-04",
"high": 106.8528,
"low": 104.1683,
"open": 105.4483,
"value": 105.4928,
"volume": 1651
},
{
"close": 107.218,
"date": "2025-03-05",
"high": 108.658,
"low": 105.247,
"open": 106.617,
"value": 107.218,
"volume": 1692
},
{
"close": 108.7271,
"date": "2025-03-06",
"high": 110.2471,
"low": 106.6223,
"open": 107.7223,
"value": 108.7271,
"volume": 1726
},
{
"close": 109.8858,
"date": "2025-03-07",
"high": 111.0858,
"low": 107.4944,
"open": 108.6844,
"value": 109.8858,
"volume": 1755
},
{
"close": 110.5925,
"date": "2025-03-08",
"high": 111.8725,
"low": 108.1331,
"open": 109.4131,
"value": 110.5925,
"volume": 1167
},
{
"close": 110.7902,
"date": "2025-03-09",
"high": 112.1502,
"low": 108.4508,
"open": 109.8208,
"value": 110.7902,
"volume": 1189
},
{
"close": 110.4739,
"date": "2025-03-10",
"high": 111.9139,
"low": 108.7401,
"open": 109.8401,
"value": 110.4739,
"volume": 1209
},
{
"close": 109.6913,
"date": "2025-03-11",
"high": 111.2113,
"low": 108.2511,
"open": 109.4411,
"value": 109.6913,
"volume": 1229
},
{
"close": 108.5397,
"date": "2025-03-12",
"high": 109.8445,
"low": 107.2597,
"open": 108.6445,
"value": 108.5397,
"volume": 1249
},
{
"close": 107.1553,
"date": "2025-03-13",
"high": 108.8079,
"low": 105.7853,
"open": 107.5279,
"value": 107.1553,
"volume": 1272
},
{
"close": 105.6994,
"date": "2025-03-14",
"high": 107.5813,
"low": 104.5994,
"open": 106.2213,
"value": 105.6994,
"volume": 1299
},
{
"close": 104.3413,
"date": "2025-03-15",
"high": 106.3337,
"low": 103.1513,
"open": 104.8937,
"value": 104.3413,
"volume": 1330
},
{
"close": 103.2401,
"date": "2025-03-16",
"high": 105.2501,
"low": 101.9601,
"open": 103.7301,
"value": 103.2401,
"volume": 1367
},
{
"close": 102.5268,
"date": "2025-03-17",
"high": 104.1045,
"low": 101.1568,
"open": 102.9045,
"value": 102.5268,
"volume": 1410
},
{
"close": 102.291,
"date": "2025-03-18",
"high": 103.8319,
"low": 101.191,
"open": 102.5519,
"value": 102.291,
"volume": 1459
},
{
"close": 102.5698,
"date": "2025-03-19",
"high": 104.106,
"low": 101.3798,
"open": 102.746,
"value": 102.5698,
"volume": 1515
},
{
"close": 103.3445,
"date": "2025-03-20",
"high": 104.9254,
"low": 102.0645,
"open": 103.4854,
"value": 103.3445,
"volume": 1576
},
{
"close": 104.5421,
"date": "2025-03-21",
"high": 106.2119,
"low": 103.1721,
"open": 104.6919,
"value": 104.5421,
"volume": 1030
},
{
"close": 106.0432,
"date": "2025-03-22",
"high": 107.4211,
"low": 104.9432,
"open": 106.2211,
"value": 106.0432,
"volume": 1100
},
{
"close": 107.6952,
"date": "2025-03-23",
"high": 109.1644,
"low": 106.5052,
"open": 107.8844,
"value": 107.6952,
"volume": 1173
},
{
"close": 109.3286,
"date": "2025-03-24",
"high": 110.8369,
"low": 108.0486,
"open": 109.4769,
"value": 109.3286,
"volume": 1247
},
{
"close": 110.7759,
"date": "2025-03-25",
"high": 112.2485,
"low": 109.4059,
"open": 110.8085,
"value": 110.7759,
"volume": 1322
},
{
"close": 111.8893,
"date": "2025-03-26",
"high": 113.4093,
"low": 110.631,
"open": 111.731,
"value": 111.8893,
"volume": 1394
},
{
"close": 112.5571,
"date": "2025-03-27",
"high": 113.7571,
"low": 110.9675,
"open": 112.1575,
"value": 112.5571,
"volume": 1464
},
{
"close": 112.7151,
"date": "2025-03-28",
"high": 113.9951,
"low": 110.7912,
"open": 112.0712,
"value": 112.7151,
"volume": 1530
},
{
"close": 112.3534,
"date": "2025-03-29",
"high": 113.7134,
"low": 110.1524,
"open": 111.5224,
"value": 112.3534,
"volume": 1591
},
{
"close": 111.5169,
"date": "2025-03-30",
"high": 112.9569,
"low": 109.515,
"open": 110.615,
"value": 111.5169,
"volume": 1646
},
{
"close": 110.3002,
"date": "2025-03-31",
"high": 111.8202,
"low": 108.2958,
"open": 109.4858,
"value": 110.3002,
"volume": 1695
},
{
"close": 108.8365,
"date": "2025-04-01",
"high": 110.0365,
"low": 107.0011,
"open": 108.2811,
"value": 108.8365,
"volume": 1737
},
{
"close": 107.2832,
"date": "2025-04-02",
"high": 108.5632,
"low": 105.7649,
"open": 107.1349,
"value": 107.2832,
"volume": 1774
},
{
"close": 105.8047,
"date": "2025-04-03",
"high": 107.5123,
"low": 104.7047,
"open": 106.1523,
"value": 105.8047,
"volume": 1192
},
{
"close": 104.5551,
"date": "2025-04-04",
"high": 106.8411,
"low": 103.3651,
"open": 105.4011,
"value": 104.5551,
"volume": 1218
},
{
"close": 103.6618,
"date": "2025-04-05",
"high": 106.4315,
"low": 102.3818,
"open": 104.9115,
"value": 103.6618,
"volume": 1241
},
{
"close": 103.2134,
"date": "2025-04-06",
"high": 105.8831,
"low": 101.8434,
"open": 104.6831,
"value": 103.2134,
"volume": 1261
}
];
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Three line break chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Three line break chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Three line break chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: partial provenance tooltip · OHLC-source provenance.",
"text": "Price blocks · Three line break chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
};
Graflume.threeLineBreak('#chart', data, options);이식 가능한 스키마
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Three line break chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Three line break chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Three line break chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: partial provenance tooltip · OHLC-source provenance.",
"text": "Price blocks · Three line break chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
}Range bars chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Kagi.
상태불러오는 중
range-barsKagi불러오는 중
행 데이터와 zero-copy TypedArray 열은 하나의 데이터 계약을 공유합니다.
datetemporal | closequantitative |
|---|---|
| 2025-01-01 | 95.1 |
| 2025-01-02 | 96.4177 |
| 2025-01-03 | 97.4641 |
| 2025-01-04 | 98.1631 |
| 2025-01-05 | 98.4747 |
| 2025-01-06 | 98.3969 |
| 2025-01-07 | 97.9643 |
| 2025-01-08 | 97.2423 |
| 2025-01-09 | 96.3192 |
| 2025-01-10 | 95.296 |
| 2025-01-11 | 94.2766 |
| 2025-01-12 | 93.3576 |
| 2025-01-13 | 92.62 |
| 2025-01-14 | 92.1232 |
| 2025-01-15 | 91.9016 |
| 2025-01-16 | 91.9631 |
| 2025-01-17 | 92.2911 |
| 2025-01-18 | 92.8475 |
| 2025-01-19 | 93.5779 |
| 2025-01-20 | 94.4172 |
| 2025-01-21 | 95.2956 |
| 2025-01-22 | 96.1441 |
| 2025-01-23 | 96.8995 |
| 2025-01-24 | 97.5083 |
| 2025-01-25 | 97.9299 |
| 2025-01-26 | 98.1388 |
| 2025-01-27 | 98.1252 |
| 2025-01-28 | 97.8956 |
| 2025-01-29 | 97.4723 |
| 2025-01-30 | 96.8921 |
| 2025-01-31 | 96.2043 |
| 2025-02-01 | 95.4682 |
| 2025-02-02 | 94.7495 |
| 2025-02-03 | 94.1163 |
| 2025-02-04 | 93.6345 |
| 2025-02-05 | 93.3624 |
| 2025-02-06 | 93.3458 |
| 2025-02-07 | 93.6128 |
| 2025-02-08 | 94.1706 |
| 2025-02-09 | 95.0024 |
| 2025-02-10 | 96.0672 |
| 2025-02-11 | 97.3012 |
| 2025-02-12 | 98.6223 |
| 2025-02-13 | 99.9361 |
| 2025-02-14 | 101.1441 |
| 2025-02-15 | 102.1532 |
| 2025-02-16 | 102.8851 |
| 2025-02-17 | 103.2854 |
| 2025-02-18 | 103.3306 |
| 2025-02-19 | 103.0322 |
| 2025-02-20 | 102.4378 |
| 2025-02-21 | 101.6282 |
| 2025-02-22 | 100.7105 |
| 2025-02-23 | 99.8085 |
| 2025-02-24 | 99.0497 |
| 2025-02-25 | 98.5523 |
| 2025-02-26 | 98.4121 |
| 2025-02-27 | 98.6906 |
| 2025-02-28 | 99.4076 |
| 2025-03-01 | 100.5364 |
| 2025-03-02 | 102.0054 |
| 2025-03-03 | 103.704 |
| 2025-03-04 | 105.4928 |
| 2025-03-05 | 107.218 |
| 2025-03-06 | 108.7271 |
| 2025-03-07 | 109.8858 |
| 2025-03-08 | 110.5925 |
| 2025-03-09 | 110.7902 |
| 2025-03-10 | 110.4739 |
| 2025-03-11 | 109.6913 |
| 2025-03-12 | 108.5397 |
| 2025-03-13 | 107.1553 |
| 2025-03-14 | 105.6994 |
| 2025-03-15 | 104.3413 |
| 2025-03-16 | 103.2401 |
| 2025-03-17 | 102.5268 |
| 2025-03-18 | 102.291 |
| 2025-03-19 | 102.5698 |
| 2025-03-20 | 103.3445 |
| 2025-03-21 | 104.5421 |
| 2025-03-22 | 106.0432 |
| 2025-03-23 | 107.6952 |
| 2025-03-24 | 109.3286 |
| 2025-03-25 | 110.7759 |
| 2025-03-26 | 111.8893 |
| 2025-03-27 | 112.5571 |
| 2025-03-28 | 112.7151 |
| 2025-03-29 | 112.3534 |
| 2025-03-30 | 111.5169 |
| 2025-03-31 | 110.3002 |
| 2025-04-01 | 108.8365 |
| 2025-04-02 | 107.2832 |
| 2025-04-03 | 105.8047 |
| 2025-04-04 | 104.5551 |
| 2025-04-05 | 103.6618 |
| 2025-04-06 | 103.2134 |
브라우저 API
const data = [
{
"close": 95.1,
"date": "2025-01-01",
"high": 96.3,
"low": 92.9,
"open": 94,
"value": 95.1,
"volume": 1070
},
{
"close": 96.4177,
"date": "2025-01-02",
"high": 97.6977,
"low": 94.6097,
"open": 95.7997,
"value": 96.4177,
"volume": 1144
},
{
"close": 97.4641,
"date": "2025-01-03",
"high": 98.8241,
"low": 96.0986,
"open": 97.3786,
"value": 97.4641,
"volume": 1217
},
{
"close": 98.1631,
"date": "2025-01-04",
"high": 100.0024,
"low": 96.7931,
"open": 98.5624,
"value": 98.1631,
"volume": 1287
},
{
"close": 98.4747,
"date": "2025-01-05",
"high": 100.7522,
"low": 97.3747,
"open": 99.2322,
"value": 98.4747,
"volume": 1353
},
{
"close": 98.3969,
"date": "2025-01-06",
"high": 100.5404,
"low": 97.2069,
"open": 99.3404,
"value": 98.3969,
"volume": 1415
},
{
"close": 97.9643,
"date": "2025-01-07",
"high": 100.1938,
"low": 96.6843,
"open": 98.9138,
"value": 97.9643,
"volume": 1470
},
{
"close": 97.2423,
"date": "2025-01-08",
"high": 99.4061,
"low": 95.8723,
"open": 98.0461,
"value": 97.2423,
"volume": 1519
},
{
"close": 96.3192,
"date": "2025-01-09",
"high": 98.3193,
"low": 95.2192,
"open": 96.8793,
"value": 96.3192,
"volume": 1562
},
{
"close": 95.296,
"date": "2025-01-10",
"high": 97.0993,
"low": 94.106,
"open": 95.5793,
"value": 95.296,
"volume": 1598
},
{
"close": 94.2766,
"date": "2025-01-11",
"high": 95.5096,
"low": 92.9966,
"open": 94.3096,
"value": 94.2766,
"volume": 1629
},
{
"close": 93.3576,
"date": "2025-01-12",
"high": 94.6376,
"low": 91.8392,
"open": 93.2092,
"value": 93.3576,
"volume": 1656
},
{
"close": 92.62,
"date": "2025-01-13",
"high": 93.98,
"low": 91.2761,
"open": 92.3761,
"value": 92.62,
"volume": 1679
},
{
"close": 92.1232,
"date": "2025-01-14",
"high": 93.5632,
"low": 90.6709,
"open": 91.8609,
"value": 92.1232,
"volume": 1699
},
{
"close": 91.9016,
"date": "2025-01-15",
"high": 93.4216,
"low": 90.389,
"open": 91.669,
"value": 91.9016,
"volume": 1106
},
{
"close": 91.9631,
"date": "2025-01-16",
"high": 93.1631,
"low": 90.4003,
"open": 91.7703,
"value": 91.9631,
"volume": 1126
},
{
"close": 92.2911,
"date": "2025-01-17",
"high": 93.5711,
"low": 91.0131,
"open": 92.1131,
"value": 92.2911,
"volume": 1147
},
{
"close": 92.8475,
"date": "2025-01-18",
"high": 94.2075,
"low": 91.4492,
"open": 92.6392,
"value": 92.8475,
"volume": 1173
},
{
"close": 93.5779,
"date": "2025-01-19",
"high": 95.0179,
"low": 92.0148,
"open": 93.2948,
"value": 93.5779,
"volume": 1202
},
{
"close": 94.4172,
"date": "2025-01-20",
"high": 95.9372,
"low": 92.6673,
"open": 94.0373,
"value": 94.4172,
"volume": 1237
},
{
"close": 95.2956,
"date": "2025-01-21",
"high": 96.4956,
"low": 93.7355,
"open": 94.8355,
"value": 95.2956,
"volume": 1278
},
{
"close": 96.1441,
"date": "2025-01-22",
"high": 97.4241,
"low": 94.4743,
"open": 95.6643,
"value": 96.1441,
"volume": 1325
},
{
"close": 96.8995,
"date": "2025-01-23",
"high": 98.2595,
"low": 95.2164,
"open": 96.4964,
"value": 96.8995,
"volume": 1378
},
{
"close": 97.5083,
"date": "2025-01-24",
"high": 98.9483,
"low": 95.9247,
"open": 97.2947,
"value": 97.5083,
"volume": 1437
},
{
"close": 97.9299,
"date": "2025-01-25",
"high": 99.5269,
"low": 96.8299,
"open": 98.0069,
"value": 97.9299,
"volume": 1502
},
{
"close": 98.1388,
"date": "2025-01-26",
"high": 99.7662,
"low": 96.9488,
"open": 98.5662,
"value": 98.1388,
"volume": 1571
},
{
"close": 98.1252,
"date": "2025-01-27",
"high": 100.1787,
"low": 96.8452,
"open": 98.8987,
"value": 98.1252,
"volume": 1643
},
{
"close": 97.8956,
"date": "2025-01-28",
"high": 100.2955,
"low": 96.5256,
"open": 98.9355,
"value": 97.8956,
"volume": 1104
},
{
"close": 97.4723,
"date": "2025-01-29",
"high": 100.0688,
"low": 96.3723,
"open": 98.6288,
"value": 97.4723,
"volume": 1179
},
{
"close": 96.8921,
"date": "2025-01-30",
"high": 99.4875,
"low": 95.7021,
"open": 97.9675,
"value": 96.8921,
"volume": 1252
},
{
"close": 96.2043,
"date": "2025-01-31",
"high": 98.1891,
"low": 94.9243,
"open": 96.9891,
"value": 96.2043,
"volume": 1323
},
{
"close": 95.4682,
"date": "2025-02-01",
"high": 97.0627,
"low": 94.0982,
"open": 95.7827,
"value": 95.4682,
"volume": 1391
},
{
"close": 94.7495,
"date": "2025-02-02",
"high": 96.1095,
"low": 93.3846,
"open": 94.4846,
"value": 94.7495,
"volume": 1454
},
{
"close": 94.1163,
"date": "2025-02-03",
"high": 95.5563,
"low": 92.0724,
"open": 93.2624,
"value": 94.1163,
"volume": 1511
},
{
"close": 93.6345,
"date": "2025-02-04",
"high": 95.1545,
"low": 91.0128,
"open": 92.2928,
"value": 93.6345,
"volume": 1562
},
{
"close": 93.3624,
"date": "2025-02-05",
"high": 94.5624,
"low": 90.3642,
"open": 91.7342,
"value": 93.3624,
"volume": 1607
},
{
"close": 93.3458,
"date": "2025-02-06",
"high": 94.6258,
"low": 90.6009,
"open": 91.7009,
"value": 93.3458,
"volume": 1645
},
{
"close": 93.6128,
"date": "2025-02-07",
"high": 94.9728,
"low": 91.0527,
"open": 92.2427,
"value": 93.6128,
"volume": 1678
},
{
"close": 94.1706,
"date": "2025-02-08",
"high": 95.6106,
"low": 92.0536,
"open": 93.3336,
"value": 94.1706,
"volume": 1706
},
{
"close": 95.0024,
"date": "2025-02-09",
"high": 96.5224,
"low": 93.5031,
"open": 94.8731,
"value": 95.0024,
"volume": 1730
},
{
"close": 96.0672,
"date": "2025-02-10",
"high": 97.8995,
"low": 94.9672,
"open": 96.6995,
"value": 96.0672,
"volume": 1138
},
{
"close": 97.3012,
"date": "2025-02-11",
"high": 99.8932,
"low": 96.1112,
"open": 98.6132,
"value": 97.3012,
"volume": 1157
},
{
"close": 98.6223,
"date": "2025-02-12",
"high": 101.7664,
"low": 97.3423,
"open": 100.4064,
"value": 98.6223,
"volume": 1177
},
{
"close": 99.9361,
"date": "2025-02-13",
"high": 103.3339,
"low": 98.5661,
"open": 101.8939,
"value": 99.9361,
"volume": 1198
},
{
"close": 101.1441,
"date": "2025-02-14",
"high": 104.4588,
"low": 100.0441,
"open": 102.9388,
"value": 101.1441,
"volume": 1222
},
{
"close": 102.1532,
"date": "2025-02-15",
"high": 104.671,
"low": 100.9632,
"open": 103.471,
"value": 102.1532,
"volume": 1250
},
{
"close": 102.8851,
"date": "2025-02-16",
"high": 104.773,
"low": 101.6051,
"open": 103.493,
"value": 102.8851,
"volume": 1283
},
{
"close": 103.2854,
"date": "2025-02-17",
"high": 104.6454,
"low": 101.7045,
"open": 103.0745,
"value": 103.2854,
"volume": 1322
},
{
"close": 103.3306,
"date": "2025-02-18",
"high": 104.7706,
"low": 101.2366,
"open": 102.3366,
"value": 103.3306,
"volume": 1367
},
{
"close": 103.0322,
"date": "2025-02-19",
"high": 104.5522,
"low": 100.2392,
"open": 101.4292,
"value": 103.0322,
"volume": 1418
},
{
"close": 102.4378,
"date": "2025-02-20",
"high": 103.6378,
"low": 99.226,
"open": 100.506,
"value": 102.4378,
"volume": 1476
},
{
"close": 101.6282,
"date": "2025-02-21",
"high": 102.9082,
"low": 98.3323,
"open": 99.7023,
"value": 101.6282,
"volume": 1539
},
{
"close": 100.7105,
"date": "2025-02-22",
"high": 102.0705,
"low": 98.0185,
"open": 99.1185,
"value": 100.7105,
"volume": 1607
},
{
"close": 99.8085,
"date": "2025-02-23",
"high": 101.2485,
"low": 97.6227,
"open": 98.8127,
"value": 99.8085,
"volume": 1065
},
{
"close": 99.0497,
"date": "2025-02-24",
"high": 100.5697,
"low": 97.521,
"open": 98.801,
"value": 99.0497,
"volume": 1138
},
{
"close": 98.5523,
"date": "2025-02-25",
"high": 100.2666,
"low": 97.1823,
"open": 99.0666,
"value": 98.5523,
"volume": 1213
},
{
"close": 98.4121,
"date": "2025-02-26",
"high": 100.8514,
"low": 97.3121,
"open": 99.5714,
"value": 98.4121,
"volume": 1287
},
{
"close": 98.6906,
"date": "2025-02-27",
"high": 101.63,
"low": 97.5006,
"open": 100.27,
"value": 98.6906,
"volume": 1359
},
{
"close": 99.4076,
"date": "2025-02-28",
"high": 102.5602,
"low": 98.1276,
"open": 101.1202,
"value": 99.4076,
"volume": 1428
},
{
"close": 100.5364,
"date": "2025-03-01",
"high": 103.6082,
"low": 99.1664,
"open": 102.0882,
"value": 100.5364,
"volume": 1492
},
{
"close": 102.0054,
"date": "2025-03-02",
"high": 104.3483,
"low": 100.9054,
"open": 103.1483,
"value": 102.0054,
"volume": 1551
},
{
"close": 103.704,
"date": "2025-03-03",
"high": 105.5579,
"low": 102.514,
"open": 104.2779,
"value": 103.704,
"volume": 1604
},
{
"close": 105.4928,
"date": "2025-03-04",
"high": 106.8528,
"low": 104.1683,
"open": 105.4483,
"value": 105.4928,
"volume": 1651
},
{
"close": 107.218,
"date": "2025-03-05",
"high": 108.658,
"low": 105.247,
"open": 106.617,
"value": 107.218,
"volume": 1692
},
{
"close": 108.7271,
"date": "2025-03-06",
"high": 110.2471,
"low": 106.6223,
"open": 107.7223,
"value": 108.7271,
"volume": 1726
},
{
"close": 109.8858,
"date": "2025-03-07",
"high": 111.0858,
"low": 107.4944,
"open": 108.6844,
"value": 109.8858,
"volume": 1755
},
{
"close": 110.5925,
"date": "2025-03-08",
"high": 111.8725,
"low": 108.1331,
"open": 109.4131,
"value": 110.5925,
"volume": 1167
},
{
"close": 110.7902,
"date": "2025-03-09",
"high": 112.1502,
"low": 108.4508,
"open": 109.8208,
"value": 110.7902,
"volume": 1189
},
{
"close": 110.4739,
"date": "2025-03-10",
"high": 111.9139,
"low": 108.7401,
"open": 109.8401,
"value": 110.4739,
"volume": 1209
},
{
"close": 109.6913,
"date": "2025-03-11",
"high": 111.2113,
"low": 108.2511,
"open": 109.4411,
"value": 109.6913,
"volume": 1229
},
{
"close": 108.5397,
"date": "2025-03-12",
"high": 109.8445,
"low": 107.2597,
"open": 108.6445,
"value": 108.5397,
"volume": 1249
},
{
"close": 107.1553,
"date": "2025-03-13",
"high": 108.8079,
"low": 105.7853,
"open": 107.5279,
"value": 107.1553,
"volume": 1272
},
{
"close": 105.6994,
"date": "2025-03-14",
"high": 107.5813,
"low": 104.5994,
"open": 106.2213,
"value": 105.6994,
"volume": 1299
},
{
"close": 104.3413,
"date": "2025-03-15",
"high": 106.3337,
"low": 103.1513,
"open": 104.8937,
"value": 104.3413,
"volume": 1330
},
{
"close": 103.2401,
"date": "2025-03-16",
"high": 105.2501,
"low": 101.9601,
"open": 103.7301,
"value": 103.2401,
"volume": 1367
},
{
"close": 102.5268,
"date": "2025-03-17",
"high": 104.1045,
"low": 101.1568,
"open": 102.9045,
"value": 102.5268,
"volume": 1410
},
{
"close": 102.291,
"date": "2025-03-18",
"high": 103.8319,
"low": 101.191,
"open": 102.5519,
"value": 102.291,
"volume": 1459
},
{
"close": 102.5698,
"date": "2025-03-19",
"high": 104.106,
"low": 101.3798,
"open": 102.746,
"value": 102.5698,
"volume": 1515
},
{
"close": 103.3445,
"date": "2025-03-20",
"high": 104.9254,
"low": 102.0645,
"open": 103.4854,
"value": 103.3445,
"volume": 1576
},
{
"close": 104.5421,
"date": "2025-03-21",
"high": 106.2119,
"low": 103.1721,
"open": 104.6919,
"value": 104.5421,
"volume": 1030
},
{
"close": 106.0432,
"date": "2025-03-22",
"high": 107.4211,
"low": 104.9432,
"open": 106.2211,
"value": 106.0432,
"volume": 1100
},
{
"close": 107.6952,
"date": "2025-03-23",
"high": 109.1644,
"low": 106.5052,
"open": 107.8844,
"value": 107.6952,
"volume": 1173
},
{
"close": 109.3286,
"date": "2025-03-24",
"high": 110.8369,
"low": 108.0486,
"open": 109.4769,
"value": 109.3286,
"volume": 1247
},
{
"close": 110.7759,
"date": "2025-03-25",
"high": 112.2485,
"low": 109.4059,
"open": 110.8085,
"value": 110.7759,
"volume": 1322
},
{
"close": 111.8893,
"date": "2025-03-26",
"high": 113.4093,
"low": 110.631,
"open": 111.731,
"value": 111.8893,
"volume": 1394
},
{
"close": 112.5571,
"date": "2025-03-27",
"high": 113.7571,
"low": 110.9675,
"open": 112.1575,
"value": 112.5571,
"volume": 1464
},
{
"close": 112.7151,
"date": "2025-03-28",
"high": 113.9951,
"low": 110.7912,
"open": 112.0712,
"value": 112.7151,
"volume": 1530
},
{
"close": 112.3534,
"date": "2025-03-29",
"high": 113.7134,
"low": 110.1524,
"open": 111.5224,
"value": 112.3534,
"volume": 1591
},
{
"close": 111.5169,
"date": "2025-03-30",
"high": 112.9569,
"low": 109.515,
"open": 110.615,
"value": 111.5169,
"volume": 1646
},
{
"close": 110.3002,
"date": "2025-03-31",
"high": 111.8202,
"low": 108.2958,
"open": 109.4858,
"value": 110.3002,
"volume": 1695
},
{
"close": 108.8365,
"date": "2025-04-01",
"high": 110.0365,
"low": 107.0011,
"open": 108.2811,
"value": 108.8365,
"volume": 1737
},
{
"close": 107.2832,
"date": "2025-04-02",
"high": 108.5632,
"low": 105.7649,
"open": 107.1349,
"value": 107.2832,
"volume": 1774
},
{
"close": 105.8047,
"date": "2025-04-03",
"high": 107.5123,
"low": 104.7047,
"open": 106.1523,
"value": 105.8047,
"volume": 1192
},
{
"close": 104.5551,
"date": "2025-04-04",
"high": 106.8411,
"low": 103.3651,
"open": 105.4011,
"value": 104.5551,
"volume": 1218
},
{
"close": 103.6618,
"date": "2025-04-05",
"high": 106.4315,
"low": 102.3818,
"open": 104.9115,
"value": 103.6618,
"volume": 1241
},
{
"close": 103.2134,
"date": "2025-04-06",
"high": 105.8831,
"low": 101.8434,
"open": 104.6831,
"value": 103.2134,
"volume": 1261
}
];
const options = {
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Range bars chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Range bars chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Range bars chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Kagi.",
"text": "Price blocks · Range bars chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
};
Graflume.rangeBars('#chart', data, options);이식 가능한 스키마
{
"accessibility": {
"description": "확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.",
"label": "Price blocks · Range bars chart example"
},
"axes": {
"x": {
"format": {
"dateStyle": "short",
"timeZone": "UTC",
"type": "date"
},
"ticks": {
"count": 6,
"spacing": 8
}
},
"y": {
"format": {
"currency": "USD",
"currencyDisplay": "narrowSymbol",
"fractionDigits": 0,
"type": "currency"
}
}
},
"height": 620,
"interaction": {
"controls": {
"annotations": false,
"export": true,
"fullscreen": true,
"labels": {
"controls": "차트 조작",
"enterFullscreen": "전체 화면 열기",
"exitFullscreen": "전체 화면 닫기",
"exportPng": "PNG 다운로드",
"hideAnnotations": "설명 말풍선 숨기기",
"loop": "반복 재생",
"nextFrame": "다음 프레임",
"pause": "일시 정지",
"play": "재생",
"previousFrame": "이전 프레임",
"reset": "보기 초기화",
"seek": "재생 위치",
"showAnnotations": "설명 말풍선 표시",
"speed": "재생 속도",
"zoomIn": "확대",
"zoomOut": "축소"
},
"playback": false,
"reset": true,
"zoom": true
},
"hover": true,
"navigation": {
"drag": true,
"keyboard": true,
"maxZoom": 6,
"minZoom": 1,
"pinch": true,
"wheel": "modifier"
},
"tooltip": {
"fields": [
{
"dateStyle": "long",
"field": "date",
"format": "date",
"label": "날짜",
"timeZone": "UTC"
},
{
"field": "close",
"format": "number",
"label": "종가"
},
{
"field": "brickStart",
"format": "number",
"label": "블록 시작"
},
{
"field": "brickEnd",
"format": "number",
"label": "블록 종료"
},
{
"field": "brickSize",
"format": "number",
"label": "블록 크기"
}
],
"title": "Price blocks · Range bars chart",
"trigger": "mark"
}
},
"locale": "ko",
"padding": {
"top": 52
},
"theme": "graflume-light",
"title": {
"subtitle": "Range bars chart 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: Kagi.",
"text": "Price blocks · Range bars chart"
},
"width": "container",
"x": {
"field": "date",
"title": "Trading day",
"type": "temporal"
},
"y": {
"field": "close",
"title": "Price",
"type": "quantitative"
}
}Catalog
The source-controlled catalog maps callable modes in this family and compatibility identifiers to their canonical modes. This table contains executable entries only.
5 modes · 5 compatibility identifiers
| ID | Name | Quick API | mode | mark | renderer |
|---|---|---|---|---|---|
point-and-figure | Point and figure chart | pointAndFigure() | point-and-figure | point-figure | canvas |
renko | Renko chart | renko() | renko | renko | canvas |
kagi new · current-limitations-2026-08-26 | Kagi chart | kagi() | kagi | renko | canvas |
three-line-break new · current-limitations-2026-08-26 | Three line break chart | threeLineBreak() | three-line-break | renko | canvas |
range-bars new · current-limitations-2026-08-26 | Range bars chart | rangeBars() | range-bars | renko | canvas |
| Identifier | Canonical mode ID |
|---|---|
kagi | kagi |
pointandfigure | point-and-figure |
rangebars | range-bars |
renko | renko |
threelinebreak | three-line-break |
매뉴얼
ARIA · table fallbackCanvas ARIA 메타데이터에 텍스트 요약과 표 대체 표현을 함께 제공합니다.
standard · large · ultrastandard·large·ultra 프로필은 렌더링 작업량을 제한합니다.