Gallery › Candlestick chart

Candlestick chart: Halcyon County 2031 bond price

Date, Open, High, Low and Close columns.

Halcyon County 2031 bond priceWeekly open, high, low and close, dollars per $100 of face value

Candlestick chart of 8 periods from Aug 4 to Sep 22. Blue candles closed at or above their open (5); red candles closed below it (3). It opened at 101.2 and closed at 101.9, a change of +0.7 (+0.7%). The highest high was 102.4 (Sep 8); the lowest low 100.1 (Aug 25).

Closed up
Closed down

Data for “Halcyon County 2031 bond price”
Week	Open	High	Low	Close
Aug 4	101.2	101.9	100.8	101.6
Aug 11	101.6	102.1	101.1	101.3
Aug 18	101.3	101.5	100.2	100.4
Aug 25	100.4	101	100.1	100.9
Sep 1	100.9	101.8	100.7	101.7
Sep 8	101.7	102.4	101.5	102.2
Sep 15	102.2	102.3	101.4	101.6
Sep 22	101.6	102	101.2	101.9

Source: Halcyon County sample data (fictional, for the demo)

The spec

This is everything OSCharts needed to draw the chart above. The data is a table: named columns and rows, the way it sits in a spreadsheet.

{
  "id": "bond-price",
  "type": "candlestick",
  "title": "Halcyon County 2031 bond price",
  "subtitle": "Weekly open, high, low and close, dollars per $100 of face value",
  "source": "Halcyon County sample data (fictional, for the demo)",
  "format": {
    "maximumFractionDigits": 2
  },
  "data": {
    "columns": [
      "Week",
      "Open",
      "High",
      "Low",
      "Close"
    ],
    "rows": [
      [
        "Aug 4",
        101.2,
        101.9,
        100.8,
        101.6
      ],
      [
        "Aug 11",
        101.6,
        102.1,
        101.1,
        101.3
      ],
      [
        "Aug 18",
        101.3,
        101.5,
        100.2,
        100.4
      ],
      [
        "Aug 25",
        100.4,
        101,
        100.1,
        100.9
      ],
      [
        "Sep 1",
        100.9,
        101.8,
        100.7,
        101.7
      ],
      [
        "Sep 8",
        101.7,
        102.4,
        101.5,
        102.2
      ],
      [
        "Sep 15",
        102.2,
        102.3,
        101.4,
        101.6
      ],
      [
        "Sep 22",
        101.6,
        102,
        101.2,
        101.9
      ]
    ]
  }
}

Put it on a page

In a browser, load the two files and mount the chart:

<link rel="stylesheet" href="oscharts.css">
<script src="oscharts.js" defer></script>
<div id="chart"></div>
<script type="module">
  OSCharts.mount(document.getElementById("chart"), spec);
</script>

Or render it on a server or in a build step, so the chart is in the page before any JavaScript runs:

import { render } from "oscharts";
const html = render(spec);   // a complete, accessible <figure>

Command line: npx oscharts render spec.json > chart.html