logoImejis.io

Chart component

Datatype: "chart"

Bar, line and area charts with single- or multi-series data, labels, legends, axes and value formatting — dashboard-quality charts rendered straight into your image.

Edit it — this is the actual editor panel
Design JSON
{
  "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": "bar",
        "data": [
          12,
          28,
          20,
          34,
          26
        ],
        "labels": [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri"
        ],
        "colors": [],
        "orientation": "vertical",
        "showAxis": true,
        "showGrid": true,
        "showValues": false,
        "valueFormat": "number",
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Chart examples

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

Weekly signups report

A Slack-ready bar chart of new signups per weekday, values printed on the bars.

API overrides for this example
{
  "sales.data": [
    142,
    189,
    173,
    236,
    208
  ],
  "sales.labels": [
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri"
  ],
  "sales.colors": [
    "#6366F1"
  ],
  "sales.showValues": true,
  "sales.yAxisLabel": "Signups"
}

Monthly revenue in dollars

Revenue per month formatted as currency, compact enough for an email header.

API overrides for this example
{
  "sales.data": [
    12400,
    15800,
    14200,
    19600,
    22300
  ],
  "sales.labels": [
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun"
  ],
  "sales.colors": [
    "#10B981"
  ],
  "sales.valueFormat": "currency",
  "sales.currencySymbol": "$",
  "sales.showValues": true
}

All chart styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

LineA line chart for trends over time.
AreaA filled area chart — trends with volume emphasis.
Horizontal barsBars running left-to-right — rankings and long category names.
Stacked seriesTwo series stacked per category with a legend.
SparklineAxis-free mini line — inline trend indicators and stat tiles.
Multi-lineSeveral lines compared on one chart with a legend.

Use cases

What developers typically build with the chart component.

  • Weekly KPI report images posted to Slack or email
  • OG images with live stats for blog posts and dashboards
  • Automated investor and client report graphics
  • E-commerce sales trend snapshots
  • Social cards visualizing survey results

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 the sample design'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": "bar",
    "sales.data": [
        12,
        28,
        20,
        34,
        26
    ],
    "sales.labels": [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri"
    ],
    "sales.colors": [],
    "sales.orientation": "vertical",
    "sales.showAxis": true,
    "sales.showGrid": true,
    "sales.showValues": false,
    "sales.valueFormat": "number",
    "sales.opacity": 1
}'

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

Property reference

Every property the chart component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
chartType'bar' | 'line' | 'area'barlinearea"bar"Chart style.
datanumber[]text[]Single-series data values (ignored when series is set).
seriesobject[]text[]Multi-series data: array of { name?, data: number[], color? }.
labelsstring[]text[]Category labels along the x-axis.
colorscolor[]text[]Color palette. Multi-series: one color per series. Single-series bar charts: colors[i] colors bar i individually (empty string = inherit).
orientation'vertical' | 'horizontal'verticalhorizontal"vertical"Bar direction for bar charts.
stackedbooleanfalsefalseStack multiple series on top of each other.
sparklinebooleanfalsefalseMinimal mode: hides axes, grid and labels.
showAxisbooleantruetrueShow the x/y axes.
showGridbooleantruetrueShow background grid lines.
showValuesbooleanfalsefalsePrint each data value on the chart.
showLegendbooleantrue / false—Show the series legend.
legendPosition'top' | 'right' | 'bottom'toprightbottom"bottom"Where the legend is placed.
valueFormat'number' | 'compact' | 'percent' | 'currency'numbercompactpercentcurrency"number"How values are formatted (1200, 1.2K, 12%, $1,200).
currencySymbolstringtext"$"Currency symbol used with the 'currency' format.
textColorcolor#52514e"#52514e"Color of axis labels and values.
gridColorcolor#e6e6e3"#e6e6e3"Color of the grid lines.
xAxisLabelstringtext—Caption below the x-axis.
yAxisLabelstringtext—Caption beside the y-axis.
lineWidthnumber22Stroke width for line/area charts in pixels.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Yes — send '<key>.data' for a single series or '<key>.series' for multi-series, plus '<key>.labels'; even chartType can switch per render.

Bar (vertical or horizontal), line and area — with stacking for multiple series and a sparkline mode that hides axes, grid and labels.

Yes. Pass series as an array of { name, data, color } objects, enable stacked to pile them up, and show a legend positioned top, right or bottom.

valueFormat supports number (1,200), compact (1.2K), percent and currency, with a configurable currencySymbol for the currency format.