Graflume · Alpha

Volume profile · 기본 구현 · 공통 기능

가격 구간별 거래량을 집계해 수평 막대로 가격대의 집중도를 보여줍니다. 필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다. 기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요.

차트 계열 · 전문 차트 계열

Volume profile

가격 구간별 거래량을 집계해 수평 막대로 가격대의 집중도를 보여줍니다.

Quick API
volumeProfile()
브라우저 스냅샷
graflume/complete
mark
volume-profile
프리셋
1

기본 구현

가장 단순한 차트

필수 데이터와 차트 고유 인코딩만 사용한 출발점입니다. 아래 코드를 펼치면 그대로 실행할 수 있습니다.

기본 예제

가격 구간별 거래량을 집계해 수평 막대로 가격대의 집중도를 보여줍니다.

상태불러오는 중

  • minimal-implementation
Graflume.volumeByPrice() Canvas 2D
조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.volumeByPrice()

const data = [
  {
    "close": 95.1,
    "date": "2025-01-01",
    "high": 96.3,
    "low": 92.9,
    "open": 94,
    "price": 95.1,
    "value": 95.1,
    "volume": 1070
  },
  {
    "close": 96.4177,
    "date": "2025-01-02",
    "high": 97.6977,
    "low": 94.6097,
    "open": 95.7997,
    "price": 96.4177,
    "value": 96.4177,
    "volume": 1144
  },
  {
    "close": 97.4641,
    "date": "2025-01-03",
    "high": 98.8241,
    "low": 96.0986,
    "open": 97.3786,
    "price": 97.4641,
    "value": 97.4641,
    "volume": 1217
  },
  {
    "close": 98.1631,
    "date": "2025-01-04",
    "high": 100.0024,
    "low": 96.7931,
    "open": 98.5624,
    "price": 98.1631,
    "value": 98.1631,
    "volume": 1287
  },
  {
    "close": 98.4747,
    "date": "2025-01-05",
    "high": 100.7522,
    "low": 97.3747,
    "open": 99.2322,
    "price": 98.4747,
    "value": 98.4747,
    "volume": 1353
  },
  {
    "close": 98.3969,
    "date": "2025-01-06",
    "high": 100.5404,
    "low": 97.2069,
    "open": 99.3404,
    "price": 98.3969,
    "value": 98.3969,
    "volume": 1415
  },
  {
    "close": 97.9643,
    "date": "2025-01-07",
    "high": 100.1938,
    "low": 96.6843,
    "open": 98.9138,
    "price": 97.9643,
    "value": 97.9643,
    "volume": 1470
  },
  {
    "close": 97.2423,
    "date": "2025-01-08",
    "high": 99.4061,
    "low": 95.8723,
    "open": 98.0461,
    "price": 97.2423,
    "value": 97.2423,
    "volume": 1519
  },
  {
    "close": 96.3192,
    "date": "2025-01-09",
    "high": 98.3193,
    "low": 95.2192,
    "open": 96.8793,
    "price": 96.3192,
    "value": 96.3192,
    "volume": 1562
  },
  {
    "close": 95.296,
    "date": "2025-01-10",
    "high": 97.0993,
    "low": 94.106,
    "open": 95.5793,
    "price": 95.296,
    "value": 95.296,
    "volume": 1598
  },
  {
    "close": 94.2766,
    "date": "2025-01-11",
    "high": 95.5096,
    "low": 92.9966,
    "open": 94.3096,
    "price": 94.2766,
    "value": 94.2766,
    "volume": 1629
  },
  {
    "close": 93.3576,
    "date": "2025-01-12",
    "high": 94.6376,
    "low": 91.8392,
    "open": 93.2092,
    "price": 93.3576,
    "value": 93.3576,
    "volume": 1656
  },
  {
    "close": 92.62,
    "date": "2025-01-13",
    "high": 93.98,
    "low": 91.2761,
    "open": 92.3761,
    "price": 92.62,
    "value": 92.62,
    "volume": 1679
  },
  {
    "close": 92.1232,
    "date": "2025-01-14",
    "high": 93.5632,
    "low": 90.6709,
    "open": 91.8609,
    "price": 92.1232,
    "value": 92.1232,
    "volume": 1699
  },
  {
    "close": 91.9016,
    "date": "2025-01-15",
    "high": 93.4216,
    "low": 90.389,
    "open": 91.669,
    "price": 91.9016,
    "value": 91.9016,
    "volume": 1106
  },
  {
    "close": 91.9631,
    "date": "2025-01-16",
    "high": 93.1631,
    "low": 90.4003,
    "open": 91.7703,
    "price": 91.9631,
    "value": 91.9631,
    "volume": 1126
  },
  {
    "close": 92.2911,
    "date": "2025-01-17",
    "high": 93.5711,
    "low": 91.0131,
    "open": 92.1131,
    "price": 92.2911,
    "value": 92.2911,
    "volume": 1147
  },
  {
    "close": 92.8475,
    "date": "2025-01-18",
    "high": 94.2075,
    "low": 91.4492,
    "open": 92.6392,
    "price": 92.8475,
    "value": 92.8475,
    "volume": 1173
  },
  {
    "close": 93.5779,
    "date": "2025-01-19",
    "high": 95.0179,
    "low": 92.0148,
    "open": 93.2948,
    "price": 93.5779,
    "value": 93.5779,
    "volume": 1202
  },
  {
    "close": 94.4172,
    "date": "2025-01-20",
    "high": 95.9372,
    "low": 92.6673,
    "open": 94.0373,
    "price": 94.4172,
    "value": 94.4172,
    "volume": 1237
  },
  {
    "close": 95.2956,
    "date": "2025-01-21",
    "high": 96.4956,
    "low": 93.7355,
    "open": 94.8355,
    "price": 95.2956,
    "value": 95.2956,
    "volume": 1278
  },
  {
    "close": 96.1441,
    "date": "2025-01-22",
    "high": 97.4241,
    "low": 94.4743,
    "open": 95.6643,
    "price": 96.1441,
    "value": 96.1441,
    "volume": 1325
  },
  {
    "close": 96.8995,
    "date": "2025-01-23",
    "high": 98.2595,
    "low": 95.2164,
    "open": 96.4964,
    "price": 96.8995,
    "value": 96.8995,
    "volume": 1378
  },
  {
    "close": 97.5083,
    "date": "2025-01-24",
    "high": 98.9483,
    "low": 95.9247,
    "open": 97.2947,
    "price": 97.5083,
    "value": 97.5083,
    "volume": 1437
  },
  {
    "close": 97.9299,
    "date": "2025-01-25",
    "high": 99.5269,
    "low": 96.8299,
    "open": 98.0069,
    "price": 97.9299,
    "value": 97.9299,
    "volume": 1502
  },
  {
    "close": 98.1388,
    "date": "2025-01-26",
    "high": 99.7662,
    "low": 96.9488,
    "open": 98.5662,
    "price": 98.1388,
    "value": 98.1388,
    "volume": 1571
  },
  {
    "close": 98.1252,
    "date": "2025-01-27",
    "high": 100.1787,
    "low": 96.8452,
    "open": 98.8987,
    "price": 98.1252,
    "value": 98.1252,
    "volume": 1643
  },
  {
    "close": 97.8956,
    "date": "2025-01-28",
    "high": 100.2955,
    "low": 96.5256,
    "open": 98.9355,
    "price": 97.8956,
    "value": 97.8956,
    "volume": 1104
  },
  {
    "close": 97.4723,
    "date": "2025-01-29",
    "high": 100.0688,
    "low": 96.3723,
    "open": 98.6288,
    "price": 97.4723,
    "value": 97.4723,
    "volume": 1179
  },
  {
    "close": 96.8921,
    "date": "2025-01-30",
    "high": 99.4875,
    "low": 95.7021,
    "open": 97.9675,
    "price": 96.8921,
    "value": 96.8921,
    "volume": 1252
  },
  {
    "close": 96.2043,
    "date": "2025-01-31",
    "high": 98.1891,
    "low": 94.9243,
    "open": 96.9891,
    "price": 96.2043,
    "value": 96.2043,
    "volume": 1323
  },
  {
    "close": 95.4682,
    "date": "2025-02-01",
    "high": 97.0627,
    "low": 94.0982,
    "open": 95.7827,
    "price": 95.4682,
    "value": 95.4682,
    "volume": 1391
  },
  {
    "close": 94.7495,
    "date": "2025-02-02",
    "high": 96.1095,
    "low": 93.3846,
    "open": 94.4846,
    "price": 94.7495,
    "value": 94.7495,
    "volume": 1454
  },
  {
    "close": 94.1163,
    "date": "2025-02-03",
    "high": 95.5563,
    "low": 92.0724,
    "open": 93.2624,
    "price": 94.1163,
    "value": 94.1163,
    "volume": 1511
  },
  {
    "close": 93.6345,
    "date": "2025-02-04",
    "high": 95.1545,
    "low": 91.0128,
    "open": 92.2928,
    "price": 93.6345,
    "value": 93.6345,
    "volume": 1562
  },
  {
    "close": 93.3624,
    "date": "2025-02-05",
    "high": 94.5624,
    "low": 90.3642,
    "open": 91.7342,
    "price": 93.3624,
    "value": 93.3624,
    "volume": 1607
  },
  {
    "close": 93.3458,
    "date": "2025-02-06",
    "high": 94.6258,
    "low": 90.6009,
    "open": 91.7009,
    "price": 93.3458,
    "value": 93.3458,
    "volume": 1645
  },
  {
    "close": 93.6128,
    "date": "2025-02-07",
    "high": 94.9728,
    "low": 91.0527,
    "open": 92.2427,
    "price": 93.6128,
    "value": 93.6128,
    "volume": 1678
  },
  {
    "close": 94.1706,
    "date": "2025-02-08",
    "high": 95.6106,
    "low": 92.0536,
    "open": 93.3336,
    "price": 94.1706,
    "value": 94.1706,
    "volume": 1706
  },
  {
    "close": 95.0024,
    "date": "2025-02-09",
    "high": 96.5224,
    "low": 93.5031,
    "open": 94.8731,
    "price": 95.0024,
    "value": 95.0024,
    "volume": 1730
  },
  {
    "close": 96.0672,
    "date": "2025-02-10",
    "high": 97.8995,
    "low": 94.9672,
    "open": 96.6995,
    "price": 96.0672,
    "value": 96.0672,
    "volume": 1138
  },
  {
    "close": 97.3012,
    "date": "2025-02-11",
    "high": 99.8932,
    "low": 96.1112,
    "open": 98.6132,
    "price": 97.3012,
    "value": 97.3012,
    "volume": 1157
  },
  {
    "close": 98.6223,
    "date": "2025-02-12",
    "high": 101.7664,
    "low": 97.3423,
    "open": 100.4064,
    "price": 98.6223,
    "value": 98.6223,
    "volume": 1177
  },
  {
    "close": 99.9361,
    "date": "2025-02-13",
    "high": 103.3339,
    "low": 98.5661,
    "open": 101.8939,
    "price": 99.9361,
    "value": 99.9361,
    "volume": 1198
  },
  {
    "close": 101.1441,
    "date": "2025-02-14",
    "high": 104.4588,
    "low": 100.0441,
    "open": 102.9388,
    "price": 101.1441,
    "value": 101.1441,
    "volume": 1222
  },
  {
    "close": 102.1532,
    "date": "2025-02-15",
    "high": 104.671,
    "low": 100.9632,
    "open": 103.471,
    "price": 102.1532,
    "value": 102.1532,
    "volume": 1250
  },
  {
    "close": 102.8851,
    "date": "2025-02-16",
    "high": 104.773,
    "low": 101.6051,
    "open": 103.493,
    "price": 102.8851,
    "value": 102.8851,
    "volume": 1283
  },
  {
    "close": 103.2854,
    "date": "2025-02-17",
    "high": 104.6454,
    "low": 101.7045,
    "open": 103.0745,
    "price": 103.2854,
    "value": 103.2854,
    "volume": 1322
  },
  {
    "close": 103.3306,
    "date": "2025-02-18",
    "high": 104.7706,
    "low": 101.2366,
    "open": 102.3366,
    "price": 103.3306,
    "value": 103.3306,
    "volume": 1367
  },
  {
    "close": 103.0322,
    "date": "2025-02-19",
    "high": 104.5522,
    "low": 100.2392,
    "open": 101.4292,
    "price": 103.0322,
    "value": 103.0322,
    "volume": 1418
  },
  {
    "close": 102.4378,
    "date": "2025-02-20",
    "high": 103.6378,
    "low": 99.226,
    "open": 100.506,
    "price": 102.4378,
    "value": 102.4378,
    "volume": 1476
  },
  {
    "close": 101.6282,
    "date": "2025-02-21",
    "high": 102.9082,
    "low": 98.3323,
    "open": 99.7023,
    "price": 101.6282,
    "value": 101.6282,
    "volume": 1539
  },
  {
    "close": 100.7105,
    "date": "2025-02-22",
    "high": 102.0705,
    "low": 98.0185,
    "open": 99.1185,
    "price": 100.7105,
    "value": 100.7105,
    "volume": 1607
  },
  {
    "close": 99.8085,
    "date": "2025-02-23",
    "high": 101.2485,
    "low": 97.6227,
    "open": 98.8127,
    "price": 99.8085,
    "value": 99.8085,
    "volume": 1065
  },
  {
    "close": 99.0497,
    "date": "2025-02-24",
    "high": 100.5697,
    "low": 97.521,
    "open": 98.801,
    "price": 99.0497,
    "value": 99.0497,
    "volume": 1138
  },
  {
    "close": 98.5523,
    "date": "2025-02-25",
    "high": 100.2666,
    "low": 97.1823,
    "open": 99.0666,
    "price": 98.5523,
    "value": 98.5523,
    "volume": 1213
  },
  {
    "close": 98.4121,
    "date": "2025-02-26",
    "high": 100.8514,
    "low": 97.3121,
    "open": 99.5714,
    "price": 98.4121,
    "value": 98.4121,
    "volume": 1287
  },
  {
    "close": 98.6906,
    "date": "2025-02-27",
    "high": 101.63,
    "low": 97.5006,
    "open": 100.27,
    "price": 98.6906,
    "value": 98.6906,
    "volume": 1359
  },
  {
    "close": 99.4076,
    "date": "2025-02-28",
    "high": 102.5602,
    "low": 98.1276,
    "open": 101.1202,
    "price": 99.4076,
    "value": 99.4076,
    "volume": 1428
  },
  {
    "close": 100.5364,
    "date": "2025-03-01",
    "high": 103.6082,
    "low": 99.1664,
    "open": 102.0882,
    "price": 100.5364,
    "value": 100.5364,
    "volume": 1492
  },
  {
    "close": 102.0054,
    "date": "2025-03-02",
    "high": 104.3483,
    "low": 100.9054,
    "open": 103.1483,
    "price": 102.0054,
    "value": 102.0054,
    "volume": 1551
  },
  {
    "close": 103.704,
    "date": "2025-03-03",
    "high": 105.5579,
    "low": 102.514,
    "open": 104.2779,
    "price": 103.704,
    "value": 103.704,
    "volume": 1604
  },
  {
    "close": 105.4928,
    "date": "2025-03-04",
    "high": 106.8528,
    "low": 104.1683,
    "open": 105.4483,
    "price": 105.4928,
    "value": 105.4928,
    "volume": 1651
  },
  {
    "close": 107.218,
    "date": "2025-03-05",
    "high": 108.658,
    "low": 105.247,
    "open": 106.617,
    "price": 107.218,
    "value": 107.218,
    "volume": 1692
  },
  {
    "close": 108.7271,
    "date": "2025-03-06",
    "high": 110.2471,
    "low": 106.6223,
    "open": 107.7223,
    "price": 108.7271,
    "value": 108.7271,
    "volume": 1726
  },
  {
    "close": 109.8858,
    "date": "2025-03-07",
    "high": 111.0858,
    "low": 107.4944,
    "open": 108.6844,
    "price": 109.8858,
    "value": 109.8858,
    "volume": 1755
  },
  {
    "close": 110.5925,
    "date": "2025-03-08",
    "high": 111.8725,
    "low": 108.1331,
    "open": 109.4131,
    "price": 110.5925,
    "value": 110.5925,
    "volume": 1167
  },
  {
    "close": 110.7902,
    "date": "2025-03-09",
    "high": 112.1502,
    "low": 108.4508,
    "open": 109.8208,
    "price": 110.7902,
    "value": 110.7902,
    "volume": 1189
  },
  {
    "close": 110.4739,
    "date": "2025-03-10",
    "high": 111.9139,
    "low": 108.7401,
    "open": 109.8401,
    "price": 110.4739,
    "value": 110.4739,
    "volume": 1209
  },
  {
    "close": 109.6913,
    "date": "2025-03-11",
    "high": 111.2113,
    "low": 108.2511,
    "open": 109.4411,
    "price": 109.6913,
    "value": 109.6913,
    "volume": 1229
  },
  {
    "close": 108.5397,
    "date": "2025-03-12",
    "high": 109.8445,
    "low": 107.2597,
    "open": 108.6445,
    "price": 108.5397,
    "value": 108.5397,
    "volume": 1249
  },
  {
    "close": 107.1553,
    "date": "2025-03-13",
    "high": 108.8079,
    "low": 105.7853,
    "open": 107.5279,
    "price": 107.1553,
    "value": 107.1553,
    "volume": 1272
  },
  {
    "close": 105.6994,
    "date": "2025-03-14",
    "high": 107.5813,
    "low": 104.5994,
    "open": 106.2213,
    "price": 105.6994,
    "value": 105.6994,
    "volume": 1299
  },
  {
    "close": 104.3413,
    "date": "2025-03-15",
    "high": 106.3337,
    "low": 103.1513,
    "open": 104.8937,
    "price": 104.3413,
    "value": 104.3413,
    "volume": 1330
  },
  {
    "close": 103.2401,
    "date": "2025-03-16",
    "high": 105.2501,
    "low": 101.9601,
    "open": 103.7301,
    "price": 103.2401,
    "value": 103.2401,
    "volume": 1367
  },
  {
    "close": 102.5268,
    "date": "2025-03-17",
    "high": 104.1045,
    "low": 101.1568,
    "open": 102.9045,
    "price": 102.5268,
    "value": 102.5268,
    "volume": 1410
  },
  {
    "close": 102.291,
    "date": "2025-03-18",
    "high": 103.8319,
    "low": 101.191,
    "open": 102.5519,
    "price": 102.291,
    "value": 102.291,
    "volume": 1459
  },
  {
    "close": 102.5698,
    "date": "2025-03-19",
    "high": 104.106,
    "low": 101.3798,
    "open": 102.746,
    "price": 102.5698,
    "value": 102.5698,
    "volume": 1515
  },
  {
    "close": 103.3445,
    "date": "2025-03-20",
    "high": 104.9254,
    "low": 102.0645,
    "open": 103.4854,
    "price": 103.3445,
    "value": 103.3445,
    "volume": 1576
  },
  {
    "close": 104.5421,
    "date": "2025-03-21",
    "high": 106.2119,
    "low": 103.1721,
    "open": 104.6919,
    "price": 104.5421,
    "value": 104.5421,
    "volume": 1030
  },
  {
    "close": 106.0432,
    "date": "2025-03-22",
    "high": 107.4211,
    "low": 104.9432,
    "open": 106.2211,
    "price": 106.0432,
    "value": 106.0432,
    "volume": 1100
  },
  {
    "close": 107.6952,
    "date": "2025-03-23",
    "high": 109.1644,
    "low": 106.5052,
    "open": 107.8844,
    "price": 107.6952,
    "value": 107.6952,
    "volume": 1173
  },
  {
    "close": 109.3286,
    "date": "2025-03-24",
    "high": 110.8369,
    "low": 108.0486,
    "open": 109.4769,
    "price": 109.3286,
    "value": 109.3286,
    "volume": 1247
  },
  {
    "close": 110.7759,
    "date": "2025-03-25",
    "high": 112.2485,
    "low": 109.4059,
    "open": 110.8085,
    "price": 110.7759,
    "value": 110.7759,
    "volume": 1322
  },
  {
    "close": 111.8893,
    "date": "2025-03-26",
    "high": 113.4093,
    "low": 110.631,
    "open": 111.731,
    "price": 111.8893,
    "value": 111.8893,
    "volume": 1394
  },
  {
    "close": 112.5571,
    "date": "2025-03-27",
    "high": 113.7571,
    "low": 110.9675,
    "open": 112.1575,
    "price": 112.5571,
    "value": 112.5571,
    "volume": 1464
  },
  {
    "close": 112.7151,
    "date": "2025-03-28",
    "high": 113.9951,
    "low": 110.7912,
    "open": 112.0712,
    "price": 112.7151,
    "value": 112.7151,
    "volume": 1530
  },
  {
    "close": 112.3534,
    "date": "2025-03-29",
    "high": 113.7134,
    "low": 110.1524,
    "open": 111.5224,
    "price": 112.3534,
    "value": 112.3534,
    "volume": 1591
  },
  {
    "close": 111.5169,
    "date": "2025-03-30",
    "high": 112.9569,
    "low": 109.515,
    "open": 110.615,
    "price": 111.5169,
    "value": 111.5169,
    "volume": 1646
  },
  {
    "close": 110.3002,
    "date": "2025-03-31",
    "high": 111.8202,
    "low": 108.2958,
    "open": 109.4858,
    "price": 110.3002,
    "value": 110.3002,
    "volume": 1695
  },
  {
    "close": 108.8365,
    "date": "2025-04-01",
    "high": 110.0365,
    "low": 107.0011,
    "open": 108.2811,
    "price": 108.8365,
    "value": 108.8365,
    "volume": 1737
  },
  {
    "close": 107.2832,
    "date": "2025-04-02",
    "high": 108.5632,
    "low": 105.7649,
    "open": 107.1349,
    "price": 107.2832,
    "value": 107.2832,
    "volume": 1774
  },
  {
    "close": 105.8047,
    "date": "2025-04-03",
    "high": 107.5123,
    "low": 104.7047,
    "open": 106.1523,
    "price": 105.8047,
    "value": 105.8047,
    "volume": 1192
  },
  {
    "close": 104.5551,
    "date": "2025-04-04",
    "high": 106.8411,
    "low": 103.3651,
    "open": 105.4011,
    "price": 104.5551,
    "value": 104.5551,
    "volume": 1218
  },
  {
    "close": 103.6618,
    "date": "2025-04-05",
    "high": 106.4315,
    "low": 102.3818,
    "open": 104.9115,
    "price": 103.6618,
    "value": 103.6618,
    "volume": 1241
  },
  {
    "close": 103.2134,
    "date": "2025-04-06",
    "high": 105.8831,
    "low": 101.8434,
    "open": 104.6831,
    "price": 103.2134,
    "value": 103.2134,
    "volume": 1261
  },
  {
    "close": 103.2508,
    "date": "2025-04-07",
    "high": 105.9763,
    "low": 102.1508,
    "open": 104.6963,
    "price": 103.2508,
    "value": 103.2508,
    "volume": 1280
  },
  {
    "close": 103.7646,
    "date": "2025-04-08",
    "high": 106.2837,
    "low": 102.5746,
    "open": 104.9237,
    "price": 103.7646,
    "value": 103.7646,
    "volume": 1300
  },
  {
    "close": 104.6978,
    "date": "2025-04-09",
    "high": 106.7802,
    "low": 103.4178,
    "open": 105.3402,
    "price": 104.6978,
    "value": 104.6978,
    "volume": 1322
  },
  {
    "close": 105.9529,
    "date": "2025-04-10",
    "high": 107.4729,
    "low": 104.5575,
    "open": 105.9275,
    "price": 105.9529,
    "value": 105.9529,
    "volume": 1348
  },
  {
    "close": 107.4035,
    "date": "2025-04-11",
    "high": 108.6035,
    "low": 105.5728,
    "open": 106.6728,
    "price": 107.4035,
    "value": 107.4035,
    "volume": 1377
  },
  {
    "close": 108.9091,
    "date": "2025-04-12",
    "high": 110.1891,
    "low": 106.3728,
    "open": 107.5628,
    "price": 108.9091,
    "value": 108.9091,
    "volume": 1413
  },
  {
    "close": 110.3293,
    "date": "2025-04-13",
    "high": 111.6893,
    "low": 107.2946,
    "open": 108.5746,
    "price": 110.3293,
    "value": 110.3293,
    "volume": 1454
  },
  {
    "close": 111.5393,
    "date": "2025-04-14",
    "high": 112.9793,
    "low": 108.297,
    "open": 109.667,
    "price": 111.5393,
    "value": 111.5393,
    "volume": 1501
  },
  {
    "close": 112.4412,
    "date": "2025-04-15",
    "high": 113.9612,
    "low": 109.6753,
    "open": 110.7753,
    "price": 112.4412,
    "value": 112.4412,
    "volume": 1555
  },
  {
    "close": 112.9737,
    "date": "2025-04-16",
    "high": 114.1737,
    "low": 110.6216,
    "open": 111.8116,
    "price": 112.9737,
    "value": 112.9737,
    "volume": 1001
  },
  {
    "close": 113.1161,
    "date": "2025-04-17",
    "high": 114.3961,
    "low": 111.3934,
    "open": 112.6734,
    "price": 113.1161,
    "value": 113.1161,
    "volume": 1066
  },
  {
    "close": 112.8889,
    "date": "2025-04-18",
    "high": 114.617,
    "low": 111.5189,
    "open": 113.257,
    "price": 112.8889,
    "value": 112.8889,
    "volume": 1135
  },
  {
    "close": 112.3494,
    "date": "2025-04-19",
    "high": 114.9168,
    "low": 111.2494,
    "open": 113.4768,
    "price": 112.3494,
    "value": 112.3494,
    "volume": 1207
  },
  {
    "close": 111.5843,
    "date": "2025-04-20",
    "high": 114.8036,
    "low": 110.3943,
    "open": 113.2836,
    "price": 111.5843,
    "value": 111.5843,
    "volume": 1281
  },
  {
    "close": 110.6994,
    "date": "2025-04-21",
    "high": 113.8802,
    "low": 109.4194,
    "open": 112.6802,
    "price": 110.6994,
    "value": 110.6994,
    "volume": 1356
  },
  {
    "close": 109.8078,
    "date": "2025-04-22",
    "high": 113.0093,
    "low": 108.4378,
    "open": 111.7293,
    "price": 109.8078,
    "value": 109.8078,
    "volume": 1429
  },
  {
    "close": 109.0188,
    "date": "2025-04-23",
    "high": 111.9117,
    "low": 107.9188,
    "open": 110.5517,
    "price": 109.0188,
    "value": 109.0188,
    "volume": 1500
  },
  {
    "close": 108.4273,
    "date": "2025-04-24",
    "high": 110.7532,
    "low": 107.2373,
    "open": 109.3132,
    "price": 108.4273,
    "value": 108.4273,
    "volume": 1568
  },
  {
    "close": 108.1054,
    "date": "2025-04-25",
    "high": 109.723,
    "low": 106.8254,
    "open": 108.203,
    "price": 108.1054,
    "value": 108.1054,
    "volume": 1630
  },
  {
    "close": 108.0975,
    "date": "2025-04-26",
    "high": 109.2975,
    "low": 106.036,
    "open": 107.406,
    "price": 108.0975,
    "value": 108.0975,
    "volume": 1687
  },
  {
    "close": 108.4172,
    "date": "2025-04-27",
    "high": 109.6972,
    "low": 105.9744,
    "open": 107.0744,
    "price": 108.4172,
    "value": 108.4172,
    "volume": 1738
  },
  {
    "close": 109.049,
    "date": "2025-04-28",
    "high": 110.409,
    "low": 106.1123,
    "open": 107.3023,
    "price": 109.049,
    "value": 109.049,
    "volume": 1782
  },
  {
    "close": 109.9509,
    "date": "2025-04-29",
    "high": 111.3909,
    "low": 106.8301,
    "open": 108.1101,
    "price": 109.9509,
    "value": 109.9509,
    "volume": 1208
  },
  {
    "close": 111.0606,
    "date": "2025-04-30",
    "high": 112.5806,
    "low": 108.0699,
    "open": 109.4399,
    "price": 111.0606,
    "value": 111.0606,
    "volume": 1240
  },
  {
    "close": 112.3022,
    "date": "2025-05-01",
    "high": 113.5022,
    "low": 110.0634,
    "open": 111.1634,
    "price": 112.3022,
    "value": 112.3022,
    "volume": 1268
  },
  {
    "close": 113.5933,
    "date": "2025-05-02",
    "high": 114.8733,
    "low": 111.9115,
    "open": 113.1015,
    "price": 113.5933,
    "value": 113.5933,
    "volume": 1292
  },
  {
    "close": 114.8528,
    "date": "2025-05-03",
    "high": 116.4114,
    "low": 113.5728,
    "open": 115.0514,
    "price": 114.8528,
    "value": 114.8528,
    "volume": 1313
  },
  {
    "close": 116.0068,
    "date": "2025-05-04",
    "high": 118.2567,
    "low": 114.6368,
    "open": 116.8167,
    "price": 116.0068,
    "value": 116.0068,
    "volume": 1332
  },
  {
    "close": 116.9939,
    "date": "2025-05-05",
    "high": 119.7556,
    "low": 115.8939,
    "open": 118.2356,
    "price": 116.9939,
    "value": 116.9939,
    "volume": 1352
  },
  {
    "close": 117.7688,
    "date": "2025-05-06",
    "high": 120.4018,
    "low": 116.5788,
    "open": 119.2018,
    "price": 117.7688,
    "value": 117.7688,
    "volume": 1373
  },
  {
    "close": 118.3042,
    "date": "2025-05-07",
    "high": 120.9553,
    "low": 117.0242,
    "open": 119.6753,
    "price": 118.3042,
    "value": 118.3042,
    "volume": 1397
  },
  {
    "close": 118.5916,
    "date": "2025-05-08",
    "high": 121.042,
    "low": 117.2216,
    "open": 119.682,
    "price": 118.5916,
    "value": 118.5916,
    "volume": 1425
  }
];

const options = {
  "height": 620,
  "locale": "ko",
  "mark": {
    "fields": {
      "price": "price",
      "volume": "volume"
    }
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Trading day",
    "type": "temporal"
  },
  "y": {
    "field": "price",
    "title": "Price",
    "type": "quantitative"
  }
};

Graflume.volumeByPrice('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "height": 620,
  "locale": "ko",
  "mark": {
    "fields": {
      "price": "price",
      "volume": "volume"
    }
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Trading day",
    "type": "temporal"
  },
  "y": {
    "field": "price",
    "title": "Price",
    "type": "quantitative"
  }
}

공통 기능

모든 차트에서 사용하는 기능

기능 탭을 선택해 헤더, 도구 설명, 테마, 범례, 강조, 말풍선, 선택, 화면 제어와 접근성을 하나씩 적용한 결과와 코드를 비교하세요. 데이터 표식 위에 마우스를 올리세요. 지원하는 차트에서는 축을 따라 커서를 움직이면 가장 가까운 값을 볼 수 있습니다. 모든 정확한 값은 아래 표에서 확인할 수 있습니다.

헤더

차트 안에 제목과 보조 설명을 넣어 무엇을 보여주는지 먼저 밝힙니다.

상태불러오는 중

  • header
Graflume.volumeByPrice() Canvas 2D
조작 도움말

확대·이동은 화면을 살펴보기 위한 기능이며 데이터 축이나 값은 바꾸지 않습니다. 재생 조작이 보이는 차트에서는 원본 데이터에서 고유값이 처음 등장한 순서대로 실제 단계만 이동합니다.

Tab으로 조작부를 이동하고 Enter 또는 Space로 실행하세요. 차트에 초점이 있을 때 더하기·빼기 키로 확대·축소하고 화살표 키로 이동할 수 있습니다.

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

불러오는 중

브라우저 API · 이식 가능한 스키마

브라우저 API

Graflume.volumeByPrice()

const data = [
  {
    "close": 95.1,
    "date": "2025-01-01",
    "high": 96.3,
    "low": 92.9,
    "open": 94,
    "price": 95.1,
    "value": 95.1,
    "volume": 1070
  },
  {
    "close": 96.4177,
    "date": "2025-01-02",
    "high": 97.6977,
    "low": 94.6097,
    "open": 95.7997,
    "price": 96.4177,
    "value": 96.4177,
    "volume": 1144
  },
  {
    "close": 97.4641,
    "date": "2025-01-03",
    "high": 98.8241,
    "low": 96.0986,
    "open": 97.3786,
    "price": 97.4641,
    "value": 97.4641,
    "volume": 1217
  },
  {
    "close": 98.1631,
    "date": "2025-01-04",
    "high": 100.0024,
    "low": 96.7931,
    "open": 98.5624,
    "price": 98.1631,
    "value": 98.1631,
    "volume": 1287
  },
  {
    "close": 98.4747,
    "date": "2025-01-05",
    "high": 100.7522,
    "low": 97.3747,
    "open": 99.2322,
    "price": 98.4747,
    "value": 98.4747,
    "volume": 1353
  },
  {
    "close": 98.3969,
    "date": "2025-01-06",
    "high": 100.5404,
    "low": 97.2069,
    "open": 99.3404,
    "price": 98.3969,
    "value": 98.3969,
    "volume": 1415
  },
  {
    "close": 97.9643,
    "date": "2025-01-07",
    "high": 100.1938,
    "low": 96.6843,
    "open": 98.9138,
    "price": 97.9643,
    "value": 97.9643,
    "volume": 1470
  },
  {
    "close": 97.2423,
    "date": "2025-01-08",
    "high": 99.4061,
    "low": 95.8723,
    "open": 98.0461,
    "price": 97.2423,
    "value": 97.2423,
    "volume": 1519
  },
  {
    "close": 96.3192,
    "date": "2025-01-09",
    "high": 98.3193,
    "low": 95.2192,
    "open": 96.8793,
    "price": 96.3192,
    "value": 96.3192,
    "volume": 1562
  },
  {
    "close": 95.296,
    "date": "2025-01-10",
    "high": 97.0993,
    "low": 94.106,
    "open": 95.5793,
    "price": 95.296,
    "value": 95.296,
    "volume": 1598
  },
  {
    "close": 94.2766,
    "date": "2025-01-11",
    "high": 95.5096,
    "low": 92.9966,
    "open": 94.3096,
    "price": 94.2766,
    "value": 94.2766,
    "volume": 1629
  },
  {
    "close": 93.3576,
    "date": "2025-01-12",
    "high": 94.6376,
    "low": 91.8392,
    "open": 93.2092,
    "price": 93.3576,
    "value": 93.3576,
    "volume": 1656
  },
  {
    "close": 92.62,
    "date": "2025-01-13",
    "high": 93.98,
    "low": 91.2761,
    "open": 92.3761,
    "price": 92.62,
    "value": 92.62,
    "volume": 1679
  },
  {
    "close": 92.1232,
    "date": "2025-01-14",
    "high": 93.5632,
    "low": 90.6709,
    "open": 91.8609,
    "price": 92.1232,
    "value": 92.1232,
    "volume": 1699
  },
  {
    "close": 91.9016,
    "date": "2025-01-15",
    "high": 93.4216,
    "low": 90.389,
    "open": 91.669,
    "price": 91.9016,
    "value": 91.9016,
    "volume": 1106
  },
  {
    "close": 91.9631,
    "date": "2025-01-16",
    "high": 93.1631,
    "low": 90.4003,
    "open": 91.7703,
    "price": 91.9631,
    "value": 91.9631,
    "volume": 1126
  },
  {
    "close": 92.2911,
    "date": "2025-01-17",
    "high": 93.5711,
    "low": 91.0131,
    "open": 92.1131,
    "price": 92.2911,
    "value": 92.2911,
    "volume": 1147
  },
  {
    "close": 92.8475,
    "date": "2025-01-18",
    "high": 94.2075,
    "low": 91.4492,
    "open": 92.6392,
    "price": 92.8475,
    "value": 92.8475,
    "volume": 1173
  },
  {
    "close": 93.5779,
    "date": "2025-01-19",
    "high": 95.0179,
    "low": 92.0148,
    "open": 93.2948,
    "price": 93.5779,
    "value": 93.5779,
    "volume": 1202
  },
  {
    "close": 94.4172,
    "date": "2025-01-20",
    "high": 95.9372,
    "low": 92.6673,
    "open": 94.0373,
    "price": 94.4172,
    "value": 94.4172,
    "volume": 1237
  },
  {
    "close": 95.2956,
    "date": "2025-01-21",
    "high": 96.4956,
    "low": 93.7355,
    "open": 94.8355,
    "price": 95.2956,
    "value": 95.2956,
    "volume": 1278
  },
  {
    "close": 96.1441,
    "date": "2025-01-22",
    "high": 97.4241,
    "low": 94.4743,
    "open": 95.6643,
    "price": 96.1441,
    "value": 96.1441,
    "volume": 1325
  },
  {
    "close": 96.8995,
    "date": "2025-01-23",
    "high": 98.2595,
    "low": 95.2164,
    "open": 96.4964,
    "price": 96.8995,
    "value": 96.8995,
    "volume": 1378
  },
  {
    "close": 97.5083,
    "date": "2025-01-24",
    "high": 98.9483,
    "low": 95.9247,
    "open": 97.2947,
    "price": 97.5083,
    "value": 97.5083,
    "volume": 1437
  },
  {
    "close": 97.9299,
    "date": "2025-01-25",
    "high": 99.5269,
    "low": 96.8299,
    "open": 98.0069,
    "price": 97.9299,
    "value": 97.9299,
    "volume": 1502
  },
  {
    "close": 98.1388,
    "date": "2025-01-26",
    "high": 99.7662,
    "low": 96.9488,
    "open": 98.5662,
    "price": 98.1388,
    "value": 98.1388,
    "volume": 1571
  },
  {
    "close": 98.1252,
    "date": "2025-01-27",
    "high": 100.1787,
    "low": 96.8452,
    "open": 98.8987,
    "price": 98.1252,
    "value": 98.1252,
    "volume": 1643
  },
  {
    "close": 97.8956,
    "date": "2025-01-28",
    "high": 100.2955,
    "low": 96.5256,
    "open": 98.9355,
    "price": 97.8956,
    "value": 97.8956,
    "volume": 1104
  },
  {
    "close": 97.4723,
    "date": "2025-01-29",
    "high": 100.0688,
    "low": 96.3723,
    "open": 98.6288,
    "price": 97.4723,
    "value": 97.4723,
    "volume": 1179
  },
  {
    "close": 96.8921,
    "date": "2025-01-30",
    "high": 99.4875,
    "low": 95.7021,
    "open": 97.9675,
    "price": 96.8921,
    "value": 96.8921,
    "volume": 1252
  },
  {
    "close": 96.2043,
    "date": "2025-01-31",
    "high": 98.1891,
    "low": 94.9243,
    "open": 96.9891,
    "price": 96.2043,
    "value": 96.2043,
    "volume": 1323
  },
  {
    "close": 95.4682,
    "date": "2025-02-01",
    "high": 97.0627,
    "low": 94.0982,
    "open": 95.7827,
    "price": 95.4682,
    "value": 95.4682,
    "volume": 1391
  },
  {
    "close": 94.7495,
    "date": "2025-02-02",
    "high": 96.1095,
    "low": 93.3846,
    "open": 94.4846,
    "price": 94.7495,
    "value": 94.7495,
    "volume": 1454
  },
  {
    "close": 94.1163,
    "date": "2025-02-03",
    "high": 95.5563,
    "low": 92.0724,
    "open": 93.2624,
    "price": 94.1163,
    "value": 94.1163,
    "volume": 1511
  },
  {
    "close": 93.6345,
    "date": "2025-02-04",
    "high": 95.1545,
    "low": 91.0128,
    "open": 92.2928,
    "price": 93.6345,
    "value": 93.6345,
    "volume": 1562
  },
  {
    "close": 93.3624,
    "date": "2025-02-05",
    "high": 94.5624,
    "low": 90.3642,
    "open": 91.7342,
    "price": 93.3624,
    "value": 93.3624,
    "volume": 1607
  },
  {
    "close": 93.3458,
    "date": "2025-02-06",
    "high": 94.6258,
    "low": 90.6009,
    "open": 91.7009,
    "price": 93.3458,
    "value": 93.3458,
    "volume": 1645
  },
  {
    "close": 93.6128,
    "date": "2025-02-07",
    "high": 94.9728,
    "low": 91.0527,
    "open": 92.2427,
    "price": 93.6128,
    "value": 93.6128,
    "volume": 1678
  },
  {
    "close": 94.1706,
    "date": "2025-02-08",
    "high": 95.6106,
    "low": 92.0536,
    "open": 93.3336,
    "price": 94.1706,
    "value": 94.1706,
    "volume": 1706
  },
  {
    "close": 95.0024,
    "date": "2025-02-09",
    "high": 96.5224,
    "low": 93.5031,
    "open": 94.8731,
    "price": 95.0024,
    "value": 95.0024,
    "volume": 1730
  },
  {
    "close": 96.0672,
    "date": "2025-02-10",
    "high": 97.8995,
    "low": 94.9672,
    "open": 96.6995,
    "price": 96.0672,
    "value": 96.0672,
    "volume": 1138
  },
  {
    "close": 97.3012,
    "date": "2025-02-11",
    "high": 99.8932,
    "low": 96.1112,
    "open": 98.6132,
    "price": 97.3012,
    "value": 97.3012,
    "volume": 1157
  },
  {
    "close": 98.6223,
    "date": "2025-02-12",
    "high": 101.7664,
    "low": 97.3423,
    "open": 100.4064,
    "price": 98.6223,
    "value": 98.6223,
    "volume": 1177
  },
  {
    "close": 99.9361,
    "date": "2025-02-13",
    "high": 103.3339,
    "low": 98.5661,
    "open": 101.8939,
    "price": 99.9361,
    "value": 99.9361,
    "volume": 1198
  },
  {
    "close": 101.1441,
    "date": "2025-02-14",
    "high": 104.4588,
    "low": 100.0441,
    "open": 102.9388,
    "price": 101.1441,
    "value": 101.1441,
    "volume": 1222
  },
  {
    "close": 102.1532,
    "date": "2025-02-15",
    "high": 104.671,
    "low": 100.9632,
    "open": 103.471,
    "price": 102.1532,
    "value": 102.1532,
    "volume": 1250
  },
  {
    "close": 102.8851,
    "date": "2025-02-16",
    "high": 104.773,
    "low": 101.6051,
    "open": 103.493,
    "price": 102.8851,
    "value": 102.8851,
    "volume": 1283
  },
  {
    "close": 103.2854,
    "date": "2025-02-17",
    "high": 104.6454,
    "low": 101.7045,
    "open": 103.0745,
    "price": 103.2854,
    "value": 103.2854,
    "volume": 1322
  },
  {
    "close": 103.3306,
    "date": "2025-02-18",
    "high": 104.7706,
    "low": 101.2366,
    "open": 102.3366,
    "price": 103.3306,
    "value": 103.3306,
    "volume": 1367
  },
  {
    "close": 103.0322,
    "date": "2025-02-19",
    "high": 104.5522,
    "low": 100.2392,
    "open": 101.4292,
    "price": 103.0322,
    "value": 103.0322,
    "volume": 1418
  },
  {
    "close": 102.4378,
    "date": "2025-02-20",
    "high": 103.6378,
    "low": 99.226,
    "open": 100.506,
    "price": 102.4378,
    "value": 102.4378,
    "volume": 1476
  },
  {
    "close": 101.6282,
    "date": "2025-02-21",
    "high": 102.9082,
    "low": 98.3323,
    "open": 99.7023,
    "price": 101.6282,
    "value": 101.6282,
    "volume": 1539
  },
  {
    "close": 100.7105,
    "date": "2025-02-22",
    "high": 102.0705,
    "low": 98.0185,
    "open": 99.1185,
    "price": 100.7105,
    "value": 100.7105,
    "volume": 1607
  },
  {
    "close": 99.8085,
    "date": "2025-02-23",
    "high": 101.2485,
    "low": 97.6227,
    "open": 98.8127,
    "price": 99.8085,
    "value": 99.8085,
    "volume": 1065
  },
  {
    "close": 99.0497,
    "date": "2025-02-24",
    "high": 100.5697,
    "low": 97.521,
    "open": 98.801,
    "price": 99.0497,
    "value": 99.0497,
    "volume": 1138
  },
  {
    "close": 98.5523,
    "date": "2025-02-25",
    "high": 100.2666,
    "low": 97.1823,
    "open": 99.0666,
    "price": 98.5523,
    "value": 98.5523,
    "volume": 1213
  },
  {
    "close": 98.4121,
    "date": "2025-02-26",
    "high": 100.8514,
    "low": 97.3121,
    "open": 99.5714,
    "price": 98.4121,
    "value": 98.4121,
    "volume": 1287
  },
  {
    "close": 98.6906,
    "date": "2025-02-27",
    "high": 101.63,
    "low": 97.5006,
    "open": 100.27,
    "price": 98.6906,
    "value": 98.6906,
    "volume": 1359
  },
  {
    "close": 99.4076,
    "date": "2025-02-28",
    "high": 102.5602,
    "low": 98.1276,
    "open": 101.1202,
    "price": 99.4076,
    "value": 99.4076,
    "volume": 1428
  },
  {
    "close": 100.5364,
    "date": "2025-03-01",
    "high": 103.6082,
    "low": 99.1664,
    "open": 102.0882,
    "price": 100.5364,
    "value": 100.5364,
    "volume": 1492
  },
  {
    "close": 102.0054,
    "date": "2025-03-02",
    "high": 104.3483,
    "low": 100.9054,
    "open": 103.1483,
    "price": 102.0054,
    "value": 102.0054,
    "volume": 1551
  },
  {
    "close": 103.704,
    "date": "2025-03-03",
    "high": 105.5579,
    "low": 102.514,
    "open": 104.2779,
    "price": 103.704,
    "value": 103.704,
    "volume": 1604
  },
  {
    "close": 105.4928,
    "date": "2025-03-04",
    "high": 106.8528,
    "low": 104.1683,
    "open": 105.4483,
    "price": 105.4928,
    "value": 105.4928,
    "volume": 1651
  },
  {
    "close": 107.218,
    "date": "2025-03-05",
    "high": 108.658,
    "low": 105.247,
    "open": 106.617,
    "price": 107.218,
    "value": 107.218,
    "volume": 1692
  },
  {
    "close": 108.7271,
    "date": "2025-03-06",
    "high": 110.2471,
    "low": 106.6223,
    "open": 107.7223,
    "price": 108.7271,
    "value": 108.7271,
    "volume": 1726
  },
  {
    "close": 109.8858,
    "date": "2025-03-07",
    "high": 111.0858,
    "low": 107.4944,
    "open": 108.6844,
    "price": 109.8858,
    "value": 109.8858,
    "volume": 1755
  },
  {
    "close": 110.5925,
    "date": "2025-03-08",
    "high": 111.8725,
    "low": 108.1331,
    "open": 109.4131,
    "price": 110.5925,
    "value": 110.5925,
    "volume": 1167
  },
  {
    "close": 110.7902,
    "date": "2025-03-09",
    "high": 112.1502,
    "low": 108.4508,
    "open": 109.8208,
    "price": 110.7902,
    "value": 110.7902,
    "volume": 1189
  },
  {
    "close": 110.4739,
    "date": "2025-03-10",
    "high": 111.9139,
    "low": 108.7401,
    "open": 109.8401,
    "price": 110.4739,
    "value": 110.4739,
    "volume": 1209
  },
  {
    "close": 109.6913,
    "date": "2025-03-11",
    "high": 111.2113,
    "low": 108.2511,
    "open": 109.4411,
    "price": 109.6913,
    "value": 109.6913,
    "volume": 1229
  },
  {
    "close": 108.5397,
    "date": "2025-03-12",
    "high": 109.8445,
    "low": 107.2597,
    "open": 108.6445,
    "price": 108.5397,
    "value": 108.5397,
    "volume": 1249
  },
  {
    "close": 107.1553,
    "date": "2025-03-13",
    "high": 108.8079,
    "low": 105.7853,
    "open": 107.5279,
    "price": 107.1553,
    "value": 107.1553,
    "volume": 1272
  },
  {
    "close": 105.6994,
    "date": "2025-03-14",
    "high": 107.5813,
    "low": 104.5994,
    "open": 106.2213,
    "price": 105.6994,
    "value": 105.6994,
    "volume": 1299
  },
  {
    "close": 104.3413,
    "date": "2025-03-15",
    "high": 106.3337,
    "low": 103.1513,
    "open": 104.8937,
    "price": 104.3413,
    "value": 104.3413,
    "volume": 1330
  },
  {
    "close": 103.2401,
    "date": "2025-03-16",
    "high": 105.2501,
    "low": 101.9601,
    "open": 103.7301,
    "price": 103.2401,
    "value": 103.2401,
    "volume": 1367
  },
  {
    "close": 102.5268,
    "date": "2025-03-17",
    "high": 104.1045,
    "low": 101.1568,
    "open": 102.9045,
    "price": 102.5268,
    "value": 102.5268,
    "volume": 1410
  },
  {
    "close": 102.291,
    "date": "2025-03-18",
    "high": 103.8319,
    "low": 101.191,
    "open": 102.5519,
    "price": 102.291,
    "value": 102.291,
    "volume": 1459
  },
  {
    "close": 102.5698,
    "date": "2025-03-19",
    "high": 104.106,
    "low": 101.3798,
    "open": 102.746,
    "price": 102.5698,
    "value": 102.5698,
    "volume": 1515
  },
  {
    "close": 103.3445,
    "date": "2025-03-20",
    "high": 104.9254,
    "low": 102.0645,
    "open": 103.4854,
    "price": 103.3445,
    "value": 103.3445,
    "volume": 1576
  },
  {
    "close": 104.5421,
    "date": "2025-03-21",
    "high": 106.2119,
    "low": 103.1721,
    "open": 104.6919,
    "price": 104.5421,
    "value": 104.5421,
    "volume": 1030
  },
  {
    "close": 106.0432,
    "date": "2025-03-22",
    "high": 107.4211,
    "low": 104.9432,
    "open": 106.2211,
    "price": 106.0432,
    "value": 106.0432,
    "volume": 1100
  },
  {
    "close": 107.6952,
    "date": "2025-03-23",
    "high": 109.1644,
    "low": 106.5052,
    "open": 107.8844,
    "price": 107.6952,
    "value": 107.6952,
    "volume": 1173
  },
  {
    "close": 109.3286,
    "date": "2025-03-24",
    "high": 110.8369,
    "low": 108.0486,
    "open": 109.4769,
    "price": 109.3286,
    "value": 109.3286,
    "volume": 1247
  },
  {
    "close": 110.7759,
    "date": "2025-03-25",
    "high": 112.2485,
    "low": 109.4059,
    "open": 110.8085,
    "price": 110.7759,
    "value": 110.7759,
    "volume": 1322
  },
  {
    "close": 111.8893,
    "date": "2025-03-26",
    "high": 113.4093,
    "low": 110.631,
    "open": 111.731,
    "price": 111.8893,
    "value": 111.8893,
    "volume": 1394
  },
  {
    "close": 112.5571,
    "date": "2025-03-27",
    "high": 113.7571,
    "low": 110.9675,
    "open": 112.1575,
    "price": 112.5571,
    "value": 112.5571,
    "volume": 1464
  },
  {
    "close": 112.7151,
    "date": "2025-03-28",
    "high": 113.9951,
    "low": 110.7912,
    "open": 112.0712,
    "price": 112.7151,
    "value": 112.7151,
    "volume": 1530
  },
  {
    "close": 112.3534,
    "date": "2025-03-29",
    "high": 113.7134,
    "low": 110.1524,
    "open": 111.5224,
    "price": 112.3534,
    "value": 112.3534,
    "volume": 1591
  },
  {
    "close": 111.5169,
    "date": "2025-03-30",
    "high": 112.9569,
    "low": 109.515,
    "open": 110.615,
    "price": 111.5169,
    "value": 111.5169,
    "volume": 1646
  },
  {
    "close": 110.3002,
    "date": "2025-03-31",
    "high": 111.8202,
    "low": 108.2958,
    "open": 109.4858,
    "price": 110.3002,
    "value": 110.3002,
    "volume": 1695
  },
  {
    "close": 108.8365,
    "date": "2025-04-01",
    "high": 110.0365,
    "low": 107.0011,
    "open": 108.2811,
    "price": 108.8365,
    "value": 108.8365,
    "volume": 1737
  },
  {
    "close": 107.2832,
    "date": "2025-04-02",
    "high": 108.5632,
    "low": 105.7649,
    "open": 107.1349,
    "price": 107.2832,
    "value": 107.2832,
    "volume": 1774
  },
  {
    "close": 105.8047,
    "date": "2025-04-03",
    "high": 107.5123,
    "low": 104.7047,
    "open": 106.1523,
    "price": 105.8047,
    "value": 105.8047,
    "volume": 1192
  },
  {
    "close": 104.5551,
    "date": "2025-04-04",
    "high": 106.8411,
    "low": 103.3651,
    "open": 105.4011,
    "price": 104.5551,
    "value": 104.5551,
    "volume": 1218
  },
  {
    "close": 103.6618,
    "date": "2025-04-05",
    "high": 106.4315,
    "low": 102.3818,
    "open": 104.9115,
    "price": 103.6618,
    "value": 103.6618,
    "volume": 1241
  },
  {
    "close": 103.2134,
    "date": "2025-04-06",
    "high": 105.8831,
    "low": 101.8434,
    "open": 104.6831,
    "price": 103.2134,
    "value": 103.2134,
    "volume": 1261
  },
  {
    "close": 103.2508,
    "date": "2025-04-07",
    "high": 105.9763,
    "low": 102.1508,
    "open": 104.6963,
    "price": 103.2508,
    "value": 103.2508,
    "volume": 1280
  },
  {
    "close": 103.7646,
    "date": "2025-04-08",
    "high": 106.2837,
    "low": 102.5746,
    "open": 104.9237,
    "price": 103.7646,
    "value": 103.7646,
    "volume": 1300
  },
  {
    "close": 104.6978,
    "date": "2025-04-09",
    "high": 106.7802,
    "low": 103.4178,
    "open": 105.3402,
    "price": 104.6978,
    "value": 104.6978,
    "volume": 1322
  },
  {
    "close": 105.9529,
    "date": "2025-04-10",
    "high": 107.4729,
    "low": 104.5575,
    "open": 105.9275,
    "price": 105.9529,
    "value": 105.9529,
    "volume": 1348
  },
  {
    "close": 107.4035,
    "date": "2025-04-11",
    "high": 108.6035,
    "low": 105.5728,
    "open": 106.6728,
    "price": 107.4035,
    "value": 107.4035,
    "volume": 1377
  },
  {
    "close": 108.9091,
    "date": "2025-04-12",
    "high": 110.1891,
    "low": 106.3728,
    "open": 107.5628,
    "price": 108.9091,
    "value": 108.9091,
    "volume": 1413
  },
  {
    "close": 110.3293,
    "date": "2025-04-13",
    "high": 111.6893,
    "low": 107.2946,
    "open": 108.5746,
    "price": 110.3293,
    "value": 110.3293,
    "volume": 1454
  },
  {
    "close": 111.5393,
    "date": "2025-04-14",
    "high": 112.9793,
    "low": 108.297,
    "open": 109.667,
    "price": 111.5393,
    "value": 111.5393,
    "volume": 1501
  },
  {
    "close": 112.4412,
    "date": "2025-04-15",
    "high": 113.9612,
    "low": 109.6753,
    "open": 110.7753,
    "price": 112.4412,
    "value": 112.4412,
    "volume": 1555
  },
  {
    "close": 112.9737,
    "date": "2025-04-16",
    "high": 114.1737,
    "low": 110.6216,
    "open": 111.8116,
    "price": 112.9737,
    "value": 112.9737,
    "volume": 1001
  },
  {
    "close": 113.1161,
    "date": "2025-04-17",
    "high": 114.3961,
    "low": 111.3934,
    "open": 112.6734,
    "price": 113.1161,
    "value": 113.1161,
    "volume": 1066
  },
  {
    "close": 112.8889,
    "date": "2025-04-18",
    "high": 114.617,
    "low": 111.5189,
    "open": 113.257,
    "price": 112.8889,
    "value": 112.8889,
    "volume": 1135
  },
  {
    "close": 112.3494,
    "date": "2025-04-19",
    "high": 114.9168,
    "low": 111.2494,
    "open": 113.4768,
    "price": 112.3494,
    "value": 112.3494,
    "volume": 1207
  },
  {
    "close": 111.5843,
    "date": "2025-04-20",
    "high": 114.8036,
    "low": 110.3943,
    "open": 113.2836,
    "price": 111.5843,
    "value": 111.5843,
    "volume": 1281
  },
  {
    "close": 110.6994,
    "date": "2025-04-21",
    "high": 113.8802,
    "low": 109.4194,
    "open": 112.6802,
    "price": 110.6994,
    "value": 110.6994,
    "volume": 1356
  },
  {
    "close": 109.8078,
    "date": "2025-04-22",
    "high": 113.0093,
    "low": 108.4378,
    "open": 111.7293,
    "price": 109.8078,
    "value": 109.8078,
    "volume": 1429
  },
  {
    "close": 109.0188,
    "date": "2025-04-23",
    "high": 111.9117,
    "low": 107.9188,
    "open": 110.5517,
    "price": 109.0188,
    "value": 109.0188,
    "volume": 1500
  },
  {
    "close": 108.4273,
    "date": "2025-04-24",
    "high": 110.7532,
    "low": 107.2373,
    "open": 109.3132,
    "price": 108.4273,
    "value": 108.4273,
    "volume": 1568
  },
  {
    "close": 108.1054,
    "date": "2025-04-25",
    "high": 109.723,
    "low": 106.8254,
    "open": 108.203,
    "price": 108.1054,
    "value": 108.1054,
    "volume": 1630
  },
  {
    "close": 108.0975,
    "date": "2025-04-26",
    "high": 109.2975,
    "low": 106.036,
    "open": 107.406,
    "price": 108.0975,
    "value": 108.0975,
    "volume": 1687
  },
  {
    "close": 108.4172,
    "date": "2025-04-27",
    "high": 109.6972,
    "low": 105.9744,
    "open": 107.0744,
    "price": 108.4172,
    "value": 108.4172,
    "volume": 1738
  },
  {
    "close": 109.049,
    "date": "2025-04-28",
    "high": 110.409,
    "low": 106.1123,
    "open": 107.3023,
    "price": 109.049,
    "value": 109.049,
    "volume": 1782
  },
  {
    "close": 109.9509,
    "date": "2025-04-29",
    "high": 111.3909,
    "low": 106.8301,
    "open": 108.1101,
    "price": 109.9509,
    "value": 109.9509,
    "volume": 1208
  },
  {
    "close": 111.0606,
    "date": "2025-04-30",
    "high": 112.5806,
    "low": 108.0699,
    "open": 109.4399,
    "price": 111.0606,
    "value": 111.0606,
    "volume": 1240
  },
  {
    "close": 112.3022,
    "date": "2025-05-01",
    "high": 113.5022,
    "low": 110.0634,
    "open": 111.1634,
    "price": 112.3022,
    "value": 112.3022,
    "volume": 1268
  },
  {
    "close": 113.5933,
    "date": "2025-05-02",
    "high": 114.8733,
    "low": 111.9115,
    "open": 113.1015,
    "price": 113.5933,
    "value": 113.5933,
    "volume": 1292
  },
  {
    "close": 114.8528,
    "date": "2025-05-03",
    "high": 116.4114,
    "low": 113.5728,
    "open": 115.0514,
    "price": 114.8528,
    "value": 114.8528,
    "volume": 1313
  },
  {
    "close": 116.0068,
    "date": "2025-05-04",
    "high": 118.2567,
    "low": 114.6368,
    "open": 116.8167,
    "price": 116.0068,
    "value": 116.0068,
    "volume": 1332
  },
  {
    "close": 116.9939,
    "date": "2025-05-05",
    "high": 119.7556,
    "low": 115.8939,
    "open": 118.2356,
    "price": 116.9939,
    "value": 116.9939,
    "volume": 1352
  },
  {
    "close": 117.7688,
    "date": "2025-05-06",
    "high": 120.4018,
    "low": 116.5788,
    "open": 119.2018,
    "price": 117.7688,
    "value": 117.7688,
    "volume": 1373
  },
  {
    "close": 118.3042,
    "date": "2025-05-07",
    "high": 120.9553,
    "low": 117.0242,
    "open": 119.6753,
    "price": 118.3042,
    "value": 118.3042,
    "volume": 1397
  },
  {
    "close": 118.5916,
    "date": "2025-05-08",
    "high": 121.042,
    "low": 117.2216,
    "open": 119.682,
    "price": 118.5916,
    "value": 118.5916,
    "volume": 1425
  }
];

const options = {
  "axes": {
    "x": {
      "format": {
        "dateStyle": "long",
        "timeZone": "UTC",
        "type": "date"
      }
    }
  },
  "height": 620,
  "locale": "ko",
  "mark": {
    "fields": {
      "price": "price",
      "volume": "volume"
    }
  },
  "title": {
    "subtitle": "Volume by price 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: whole-input price-bin aggregation · volume/proportion tooltip.",
    "text": "Volume profile"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Trading day",
    "type": "temporal"
  },
  "y": {
    "field": "price",
    "title": "Price",
    "type": "quantitative"
  }
};

Graflume.volumeByPrice('#chart', data, options);

이식 가능한 스키마

ChartSpec 0.1 · options

{
  "axes": {
    "x": {
      "format": {
        "dateStyle": "long",
        "timeZone": "UTC",
        "type": "date"
      }
    }
  },
  "height": 620,
  "locale": "ko",
  "mark": {
    "fields": {
      "price": "price",
      "volume": "volume"
    }
  },
  "title": {
    "subtitle": "Volume by price 모드가 실행 가능한 데이터와 옵션으로 보여주는 핵심 기능: whole-input price-bin aggregation · volume/proportion tooltip.",
    "text": "Volume profile"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Trading day",
    "type": "temporal"
  },
  "y": {
    "field": "price",
    "title": "Price",
    "type": "quantitative"
  }
}
차트 카탈로그