bullet horizontal

Edit the JavaScript. Run it. See your drawing take shape.

interval

JAVASCRIPT

import { layoutChart, toSvgChart } from '@borrowdale/charts';
import { excalifontFiles } from '@borrowdale/text/excalifont-files';

const spec = {
  "width": 640,
  "height": 400,
  "title": "Bullet Horizontal",
  "axes": {
    "x": {
      "type": "linear"
    },
    "y": {
      "type": "band",
      "categories": [
        "North",
        "South"
      ]
    }
  },
  "series": [
    {
      "type": "interval",
      "name": "Acceptable",
      "data": [
        [
          0,
          100
        ],
        [
          0,
          100
        ]
      ],
      "overlay": true,
      "slotWidth": 1,
      "color": "#ddd",
      "style": {
        "fillStyle": "solid"
      }
    },
    {
      "type": "interval",
      "name": "Good",
      "data": [
        [
          0,
          80
        ],
        [
          0,
          80
        ]
      ],
      "overlay": true,
      "slotWidth": 1,
      "color": "#bbb",
      "style": {
        "fillStyle": "solid"
      }
    },
    {
      "type": "interval",
      "name": "Excellent",
      "data": [
        [
          0,
          60
        ],
        [
          0,
          60
        ]
      ],
      "overlay": true,
      "slotWidth": 1,
      "color": "#999",
      "style": {
        "fillStyle": "solid"
      }
    },
    {
      "type": "interval",
      "name": "Measure",
      "data": [
        [
          0,
          75
        ],
        [
          0,
          85
        ]
      ],
      "overlay": true,
      "slotWidth": 0.35,
      "color": "#0072b2",
      "style": {
        "fillStyle": "solid"
      }
    },
    {
      "type": "interval",
      "name": "Target",
      "data": [
        [
          80,
          80
        ],
        [
          90,
          90
        ]
      ],
      "overlay": true,
      "slotWidth": 0.7,
      "display": "error",
      "color": "#000"
    }
  ],
  "seed": 7
};

const svg = toSvgChart(layoutChart(spec), { fontFiles: excalifontFiles });
render(svg);

LIVE PREVIEWPreparing…

Named imports from the four BorrowdaleJS packages are available. Call render(svg) to show the result. The preview loads Excalifont. In your app, put the SVG in a container. Drafts stay in memory while you browse; Reset restores the example. Execution stops after 3 seconds.