Dark bullet

Bullet styletype: "bullet"

Generate dark-mode bullet chart images — bright measure bars and target ticks over muted bands on a dark canvas. Fresh KPI data per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Bullet sample",
  "description": "A KPI actual-vs-target scorecard",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#0f172a"
  },
  "components": [
    {
      "id": "sample-bullet",
      "key": "bullet",
      "type": "bullet",
      "position": {
        "x": 170,
        "y": 110
      },
      "rotation": 0,
      "size": {
        "width": 460,
        "height": 200
      },
      "dynamic": true,
      "properties": {
        "data": [
          {
            "label": "Revenue",
            "value": 268,
            "target": 250,
            "ranges": [
              150,
              225,
              300
            ]
          },
          {
            "label": "Profit",
            "value": 21,
            "target": 26,
            "ranges": [
              12,
              20,
              30
            ]
          },
          {
            "label": "Orders",
            "value": 1320,
            "target": 1500,
            "ranges": [
              800,
              1200,
              1600
            ]
          }
        ],
        "measureColor": "#38bdf8",
        "targetColor": "#e2e8f0",
        "showValues": true,
        "showTarget": true,
        "valueFormat": "number",
        "opacity": 1,
        "rangeColor": "#94a3b8",
        "labelColor": "#e2e8f0",
        "valueColor": "#f8fafc"
      }
    }
  ]
}

Bullet examples

Real renders of the dark bullet — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Dark KPI scorecard

Revenue, profit and orders vs target on a slate card.

API overrides for this example

{
  "bullet.measureColor": "#38bdf8",
  "bullet.targetColor": "#e2e8f0",
  "bullet.rangeColor": "#94a3b8",
  "bullet.labelColor": "#e2e8f0",
  "bullet.valueColor": "#f8fafc",
  "bullet.data": [
    {
      "label": "Revenue",
      "value": 268,
      "target": 250,
      "ranges": [
        150,
        225,
        300
      ]
    },
    {
      "label": "Profit",
      "value": 21,
      "target": 26,
      "ranges": [
        12,
        20,
        30
      ]
    },
    {
      "label": "Orders",
      "value": 1320,
      "target": 1500,
      "ranges": [
        800,
        1200,
        1600
      ]
    }
  ]
}

Dark budget vs actual

Spend against budget in compact dollars on a near-black card.

API overrides for this example

{
  "bullet.measureColor": "#34d399",
  "bullet.targetColor": "#e2e8f0",
  "bullet.rangeColor": "#94a3b8",
  "bullet.labelColor": "#e2e8f0",
  "bullet.valueColor": "#f8fafc",
  "bullet.data": [
    {
      "label": "Eng",
      "value": 82000,
      "target": 90000,
      "ranges": [
        50000,
        80000,
        100000
      ]
    },
    {
      "label": "Sales",
      "value": 61000,
      "target": 55000,
      "ranges": [
        30000,
        50000,
        70000
      ]
    },
    {
      "label": "Ops",
      "value": 24000,
      "target": 30000,
      "ranges": [
        15000,
        25000,
        35000
      ]
    }
  ],
  "bullet.valueFormat": "compact"
}

When to use the dark style

Dark-theme KPI scorecards
Night-mode budget-vs-actual cards
Dashboard exports on dark backgrounds

Use it dynamically via the API

Push fresh rows per render with '<key>.data' (or just '<key>') as [{ label, value, target, ranges }]; the target marker and bands update with them.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "bullet.data": [
        {
            "label": "Revenue",
            "value": 268,
            "target": 250,
            "ranges": [
                150,
                225,
                300
            ]
        },
        {
            "label": "Profit",
            "value": 21,
            "target": 26,
            "ranges": [
                12,
                20,
                30
            ]
        },
        {
            "label": "Orders",
            "value": 1320,
            "target": 1500,
            "ranges": [
                800,
                1200,
                1600
            ]
        }
    ],
    "bullet.measureColor": "#38bdf8",
    "bullet.targetColor": "#e2e8f0",
    "bullet.showValues": true,
    "bullet.showTarget": true,
    "bullet.valueFormat": "number",
    "bullet.opacity": 1,
    "bullet.rangeColor": "#94a3b8",
    "bullet.labelColor": "#e2e8f0",
    "bullet.valueColor": "#f8fafc"
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other bullet styles

Default Quota attainmentDark

See the bullet component page for the full property reference and FAQs.