Slope chart

Chart styletype: "chart"

Generate slope chart images comparing two points in time — before vs after, this year vs last — one labeled line per series. Fresh data per API call, free.

Edit it — this is the actual editor panel

Design JSON — “Slope” 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": "slope",
        "data": [],
        "labels": [
          "2024",
          "2025"
        ],
        "colors": [],
        "orientation": "vertical",
        "showAxis": true,
        "showGrid": true,
        "showValues": false,
        "valueFormat": "number",
        "opacity": 1,
        "series": [
          {
            "name": "North",
            "data": [
              42,
              61
            ],
            "color": "#4F46E5"
          },
          {
            "name": "South",
            "data": [
              58,
              49
            ],
            "color": "#0EA5E9"
          },
          {
            "name": "West",
            "data": [
              33,
              52
            ],
            "color": "#10B981"
          }
        ],
        "showLegend": false
      }
    }
  ]
}

Chart examples

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

Regional revenue YoY

Revenue by region from last year to this year, each region a labeled line.

API overrides for this example

{
  "sales.chartType": "slope",
  "sales.data": [],
  "sales.series": [
    {
      "name": "EMEA",
      "data": [
        120,
        168
      ],
      "color": "#6366F1"
    },
    {
      "name": "APAC",
      "data": [
        90,
        142
      ],
      "color": "#F59E0B"
    },
    {
      "name": "AMER",
      "data": [
        210,
        198
      ],
      "color": "#EF4444"
    }
  ],
  "sales.labels": [
    "FY24",
    "FY25"
  ],
  "sales.showLegend": false,
  "sales.valueFormat": "compact"
}

Satisfaction before vs after

CSAT per team across a redesign — up-and-to-the-right at a glance.

API overrides for this example

{
  "sales.chartType": "slope",
  "sales.data": [],
  "sales.series": [
    {
      "name": "Support",
      "data": [
        71,
        88
      ],
      "color": "#10B981"
    },
    {
      "name": "Sales",
      "data": [
        64,
        69
      ],
      "color": "#3B82F6"
    }
  ],
  "sales.labels": [
    "Before",
    "After"
  ],
  "sales.showLegend": false
}

When to use the slope style

Before/after metric comparisons for social
Year-over-year change across segments
Survey shift between two waves

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": "slope",
    "sales.data": [],
    "sales.labels": [
        "2024",
        "2025"
    ],
    "sales.colors": [],
    "sales.orientation": "vertical",
    "sales.showAxis": true,
    "sales.showGrid": true,
    "sales.showValues": false,
    "sales.valueFormat": "number",
    "sales.opacity": 1,
    "sales.series": [
        {
            "name": "North",
            "data": [
                42,
                61
            ],
            "color": "#4F46E5"
        },
        {
            "name": "South",
            "data": [
                58,
                49
            ],
            "color": "#0EA5E9"
        },
        {
            "name": "West",
            "data": [
                33,
                52
            ],
            "color": "#10B981"
        }
    ],
    "sales.showLegend": false
}'

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

Other chart styles

Default Line Area Horizontal bars Stacked series 100% stacked Sparkline Multi-line Waterfall Lollipop Step lineSlopeCombo (dual-axis)

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