logoImejis.io

Step line chart

Chart styletype: "chart"

Generate step (staircase) line chart images for interest rates, pricing tiers and any value that changes in discrete steps. Fresh data per API call, free to start.

Edit it — this is the actual editor panel
Design JSON — “Step line” variant
{
  "title": "Chart sample",
  "description": "A dynamic bar chart",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-chart",
      "key": "sales",
      "type": "chart",
      "position": {
        "x": 140,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 520,
        "height": 300
      },
      "dynamic": true,
      "properties": {
        "chartType": "step",
        "data": [
          2.5,
          2.5,
          3,
          3,
          4.25,
          4.25,
          5
        ],
        "labels": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul"
        ],
        "colors": [
          "#DC2626"
        ],
        "orientation": "vertical",
        "showAxis": true,
        "showGrid": true,
        "showValues": false,
        "valueFormat": "number",
        "opacity": 1,
        "lineWidth": 3
      }
    }
  ]
}

Chart examples

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

Central-bank rate history

Policy rate held flat then stepped up — percent-formatted staircase.

API overrides for this example
{
  "sales.chartType": "step",
  "sales.data": [
    4.5,
    4.5,
    4.75,
    4.75,
    5,
    5.25,
    5.25
  ],
  "sales.labels": [
    "Q1",
    "Q2",
    "Q3",
    "Q4",
    "Q5",
    "Q6",
    "Q7"
  ],
  "sales.colors": [
    "#B91C1C"
  ],
  "sales.lineWidth": 3,
  "sales.valueFormat": "percent"
}

Plan price changes

Monthly subscription price stepping through pricing updates.

API overrides for this example
{
  "sales.chartType": "step",
  "sales.data": [
    19,
    19,
    19,
    29,
    29,
    39
  ],
  "sales.labels": [
    "'21",
    "'22",
    "'23",
    "'24",
    "'25",
    "'26"
  ],
  "sales.colors": [
    "#4F46E5"
  ],
  "sales.lineWidth": 3,
  "sales.valueFormat": "currency",
  "sales.showValues": true
}

When to use the step line style

  • Interest-rate or pricing-tier change history
  • Plan/limit changes over time
  • Inventory or headcount step changes

Use it dynamically via the API

Feed fresh numbers via '<key>.data' (or '<key>.series' for multi-series), and swap '<key>.labels' or '<key>.chartType' per render.

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 '{
    "sales.chartType": "step",
    "sales.data": [
        2.5,
        2.5,
        3,
        3,
        4.25,
        4.25,
        5
    ],
    "sales.labels": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul"
    ],
    "sales.colors": [
        "#DC2626"
    ],
    "sales.orientation": "vertical",
    "sales.showAxis": true,
    "sales.showGrid": true,
    "sales.showValues": false,
    "sales.valueFormat": "number",
    "sales.opacity": 1,
    "sales.lineWidth": 3
}'

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

Other chart styles

DefaultLineAreaHorizontal barsStacked series100% stackedSparklineMulti-lineWaterfallLollipopStep lineSlopeCombo (dual-axis)

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