Graflume · Alpha

Price blocks · Basic implementation · Common features

Focus on price movement rather than time by drawing fixed-size rising and falling blocks. Start with only the required data and family encoding. Expand the code to run the same example. Use the tabs to compare header, tooltip, theme, legend, highlight, callout, selection, view controls, and accessibility one feature at a time.

Chart family · Specialized families

Price blocks

Focus on price movement rather than time by drawing fixed-size rising and falling blocks.

Quick API
priceBlocks()
Browser snapshot
graflume/complete
mark
renko
Presets
5

Basic implementation

The smallest runnable chart

Start with only the required data and family encoding. Expand the code to run the same example.

Basic example

Focus on price movement rather than time by drawing fixed-size rising and falling blocks.

StatusLoading

  • minimal-implementation
Graflume.pointAndFigure() Canvas 2D
Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Browser API · Portable schema

Browser API

Graflume.pointAndFigure()

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 = {
  "height": 620,
  "locale": "en",
  "width": "container",
  "x": {
    "field": "date",
    "title": "Trading day",
    "type": "temporal"
  },
  "y": {
    "field": "close",
    "title": "Price",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "height": 620,
  "locale": "en",
  "width": "container",
  "x": {
    "field": "date",
    "title": "Trading day",
    "type": "temporal"
  },
  "y": {
    "field": "close",
    "title": "Price",
    "type": "quantitative"
  }
}

Common features

Features shared by every chart

Use the tabs to compare header, tooltip, theme, legend, highlight, callout, selection, view controls, and accessibility one feature at a time. Hover over a data mark. On supported charts, move the pointer along the axis to see the nearest value. All exact values are available in the table below.

Header

Add a chart title and supporting description inside the visualization.

StatusLoading

  • header
Graflume.pointAndFigure() Canvas 2D
Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Browser API · Portable schema

Browser API

Graflume.pointAndFigure()

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 = {
  "axes": {
    "x": {
      "format": {
        "dateStyle": "long",
        "timeZone": "UTC",
        "type": "date"
      }
    }
  },
  "height": 620,
  "locale": "en",
  "title": {
    "subtitle": "Point and figure chart uses runnable data and options to demonstrate 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);

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": {
      "format": {
        "dateStyle": "long",
        "timeZone": "UTC",
        "type": "date"
      }
    }
  },
  "height": 620,
  "locale": "en",
  "title": {
    "subtitle": "Point and figure chart uses runnable data and options to demonstrate Renko; three-line break.",
    "text": "Price blocks"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Trading day",
    "type": "temporal"
  },
  "y": {
    "field": "close",
    "title": "Price",
    "type": "quantitative"
  }
}
Chart catalog