Produce Report Charts

Generate chart images with labeled bars, values, and axis labels for reports and dashboards.

Who this is for

Business intelligence teams and reporting platforms use this recipe to generate static chart images for PDF reports and email dashboards. Define a canvas with colored bars and value labels — ready for embedding in documents where interactive charts aren't available.

curl -X POST https://api.iterationlayer.com/image-generation/v1/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "dimensions": {
      "width": 800,
      "height": 500
    },
    "output_format": "png",
    "layers": [
      {
        "index": 0,
        "type": "solid-color-background",
        "hex_color": "#FFFFFF"
      },
      {
        "index": 1,
        "type": "rectangle",
        "hex_color": "#6366F1",
        "position": { "x": 100.0, "y": 200.0 },
        "dimensions": { "width": 80, "height": 200 }
      },
      {
        "index": 2,
        "type": "rectangle",
        "hex_color": "#6366F1",
        "position": { "x": 250.0, "y": 120.0 },
        "dimensions": { "width": 80, "height": 280 }
      },
      {
        "index": 3,
        "type": "rectangle",
        "hex_color": "#6366F1",
        "position": { "x": 400.0, "y": 160.0 },
        "dimensions": { "width": 80, "height": 240 }
      },
      {
        "index": 4,
        "type": "rectangle",
        "hex_color": "#6366F1",
        "position": { "x": 550.0, "y": 80.0 },
        "dimensions": { "width": 80, "height": 320 }
      },
      {
        "index": 5,
        "type": "text",
        "text": "Q1",
        "font_name": "Inter",
        "font_size_in_px": 16,
        "text_color": "#64748B",
        "text_align": "center",
        "position": { "x": 100.0, "y": 420.0 },
        "dimensions": { "width": 80, "height": 30 }
      },
      {
        "index": 6,
        "type": "text",
        "text": "Q2",
        "font_name": "Inter",
        "font_size_in_px": 16,
        "text_color": "#64748B",
        "text_align": "center",
        "position": { "x": 250.0, "y": 420.0 },
        "dimensions": { "width": 80, "height": 30 }
      },
      {
        "index": 7,
        "type": "text",
        "text": "Q3",
        "font_name": "Inter",
        "font_size_in_px": 16,
        "text_color": "#64748B",
        "text_align": "center",
        "position": { "x": 400.0, "y": 420.0 },
        "dimensions": { "width": 80, "height": 30 }
      },
      {
        "index": 8,
        "type": "text",
        "text": "Q4",
        "font_name": "Inter",
        "font_size_in_px": 16,
        "text_color": "#64748B",
        "text_align": "center",
        "position": { "x": 550.0, "y": 420.0 },
        "dimensions": { "width": 80, "height": 30 }
      },
      {
        "index": 9,
        "type": "text",
        "text": "Quarterly Revenue",
        "font_name": "Inter",
        "font_size_in_px": 24,
        "text_color": "#1E293B",
        "font_weight": "Bold",
        "text_align": "center",
        "position": { "x": 100.0, "y": 30.0 },
        "dimensions": { "width": 600, "height": 40 }
      }
    ]
  }'
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const result = await client.generateImage({
  dimensions: { width_in_px: 800, height_in_px: 500 },
  output_format: "png",
  layers: [
    {
      index: 0,
      type: "solid-color-background",
      hex_color: "#FFFFFF",
    },
    {
      index: 1,
      type: "rectangle",
      hex_color: "#6366F1",
      position: { x_in_px: 100, y_in_px: 200 },
      dimensions: { width_in_px: 80, height_in_px: 200 },
    },
    {
      index: 2,
      type: "rectangle",
      hex_color: "#6366F1",
      position: { x_in_px: 250, y_in_px: 120 },
      dimensions: { width_in_px: 80, height_in_px: 280 },
    },
    {
      index: 3,
      type: "rectangle",
      hex_color: "#6366F1",
      position: { x_in_px: 400, y_in_px: 160 },
      dimensions: { width_in_px: 80, height_in_px: 240 },
    },
    {
      index: 4,
      type: "rectangle",
      hex_color: "#6366F1",
      position: { x_in_px: 550, y_in_px: 80 },
      dimensions: { width_in_px: 80, height_in_px: 320 },
    },
    {
      index: 5,
      type: "text",
      text: "Q1",
      font_name: "Inter",
      font_size_in_px: 16,
      text_color: "#64748B",
      text_align: "center",
      position: { x_in_px: 100, y_in_px: 420 },
      dimensions: { width_in_px: 80, height_in_px: 30 },
    },
    {
      index: 6,
      type: "text",
      text: "Q2",
      font_name: "Inter",
      font_size_in_px: 16,
      text_color: "#64748B",
      text_align: "center",
      position: { x_in_px: 250, y_in_px: 420 },
      dimensions: { width_in_px: 80, height_in_px: 30 },
    },
    {
      index: 7,
      type: "text",
      text: "Q3",
      font_name: "Inter",
      font_size_in_px: 16,
      text_color: "#64748B",
      text_align: "center",
      position: { x_in_px: 400, y_in_px: 420 },
      dimensions: { width_in_px: 80, height_in_px: 30 },
    },
    {
      index: 8,
      type: "text",
      text: "Q4",
      font_name: "Inter",
      font_size_in_px: 16,
      text_color: "#64748B",
      text_align: "center",
      position: { x_in_px: 550, y_in_px: 420 },
      dimensions: { width_in_px: 80, height_in_px: 30 },
    },
    {
      index: 9,
      type: "text",
      text: "Quarterly Revenue",
      font_name: "Inter",
      font_size_in_px: 24,
      text_color: "#1E293B",
      font_weight: "Bold",
      text_align: "center",
      position: { x_in_px: 100, y_in_px: 30 },
      dimensions: { width_in_px: 600, height_in_px: 40 },
    },
  ],
});

const imageBuffer = Buffer.from(result.data.buffer, "base64");
import base64

from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")

result = client.generate_image(
    dimensions={"width_in_px": 800, "height_in_px": 500},
    output_format="png",
    layers=[
        {
            "index": 0,
            "type": "solid-color-background",
            "hex_color": "#FFFFFF",
        },
        {
            "index": 1,
            "type": "rectangle",
            "hex_color": "#6366F1",
            "position": {"x_in_px": 100, "y_in_px": 200},
            "dimensions": {"width_in_px": 80, "height_in_px": 200},
        },
        {
            "index": 2,
            "type": "rectangle",
            "hex_color": "#6366F1",
            "position": {"x_in_px": 250, "y_in_px": 120},
            "dimensions": {"width_in_px": 80, "height_in_px": 280},
        },
        {
            "index": 3,
            "type": "rectangle",
            "hex_color": "#6366F1",
            "position": {"x_in_px": 400, "y_in_px": 160},
            "dimensions": {"width_in_px": 80, "height_in_px": 240},
        },
        {
            "index": 4,
            "type": "rectangle",
            "hex_color": "#6366F1",
            "position": {"x_in_px": 550, "y_in_px": 80},
            "dimensions": {"width_in_px": 80, "height_in_px": 320},
        },
        {
            "index": 5,
            "type": "text",
            "text": "Q1",
            "font_name": "Inter",
            "font_size_in_px": 16,
            "text_color": "#64748B",
            "text_align": "center",
            "position": {"x_in_px": 100, "y_in_px": 420},
            "dimensions": {"width_in_px": 80, "height_in_px": 30},
        },
        {
            "index": 6,
            "type": "text",
            "text": "Q2",
            "font_name": "Inter",
            "font_size_in_px": 16,
            "text_color": "#64748B",
            "text_align": "center",
            "position": {"x_in_px": 250, "y_in_px": 420},
            "dimensions": {"width_in_px": 80, "height_in_px": 30},
        },
        {
            "index": 7,
            "type": "text",
            "text": "Q3",
            "font_name": "Inter",
            "font_size_in_px": 16,
            "text_color": "#64748B",
            "text_align": "center",
            "position": {"x_in_px": 400, "y_in_px": 420},
            "dimensions": {"width_in_px": 80, "height_in_px": 30},
        },
        {
            "index": 8,
            "type": "text",
            "text": "Q4",
            "font_name": "Inter",
            "font_size_in_px": 16,
            "text_color": "#64748B",
            "text_align": "center",
            "position": {"x_in_px": 550, "y_in_px": 420},
            "dimensions": {"width_in_px": 80, "height_in_px": 30},
        },
        {
            "index": 9,
            "type": "text",
            "text": "Quarterly Revenue",
            "font_name": "Inter",
            "font_size_in_px": 24,
            "text_color": "#1E293B",
            "font_weight": "Bold",
            "text_align": "center",
            "position": {"x_in_px": 100, "y_in_px": 30},
            "dimensions": {"width_in_px": 600, "height_in_px": 40},
        },
    ],
)

with open("result.png", "wb") as f:
    f.write(base64.b64decode(result["data"]["buffer"]))
package main

import il "github.com/iterationlayer/sdk-go"

client := il.NewClient("YOUR_API_KEY")

result, err := client.GenerateImage(il.GenerateImageRequest{
    Dimensions:   il.Dimensions{WidthInPx: 800, HeightInPx: 500},
    OutputFormat: "png",
    Layers: []il.Layer{
        il.NewSolidColorBackgroundLayer(0, "#FFFFFF"),
        il.NewRectangleLayer(1, "#6366F1",
            il.Position{XInPx: 100, YInPx: 200},
            il.Dimensions{WidthInPx: 80, HeightInPx: 200}),
        il.NewRectangleLayer(2, "#6366F1",
            il.Position{XInPx: 250, YInPx: 120},
            il.Dimensions{WidthInPx: 80, HeightInPx: 280}),
        il.NewRectangleLayer(3, "#6366F1",
            il.Position{XInPx: 400, YInPx: 160},
            il.Dimensions{WidthInPx: 80, HeightInPx: 240}),
        il.NewRectangleLayer(4, "#6366F1",
            il.Position{XInPx: 550, YInPx: 80},
            il.Dimensions{WidthInPx: 80, HeightInPx: 320}),
        il.NewTextLayer(5, "Q1", "Inter", 16, "#64748B",
            il.Position{XInPx: 100, YInPx: 420},
            il.Dimensions{WidthInPx: 80, HeightInPx: 30}),
        il.NewTextLayer(6, "Q2", "Inter", 16, "#64748B",
            il.Position{XInPx: 250, YInPx: 420},
            il.Dimensions{WidthInPx: 80, HeightInPx: 30}),
        il.NewTextLayer(7, "Q3", "Inter", 16, "#64748B",
            il.Position{XInPx: 400, YInPx: 420},
            il.Dimensions{WidthInPx: 80, HeightInPx: 30}),
        il.NewTextLayer(8, "Q4", "Inter", 16, "#64748B",
            il.Position{XInPx: 550, YInPx: 420},
            il.Dimensions{WidthInPx: 80, HeightInPx: 30}),
        il.NewTextLayer(9, "Quarterly Revenue", "Inter", 24, "#1E293B",
            il.Position{XInPx: 100, YInPx: 30},
            il.Dimensions{WidthInPx: 600, HeightInPx: 40}),
    },
})

Related Recipes

Start building in minutes

Free trial credits included. No credit card required.