{
  "format": "piksio-image",
  "version": 2,
  "name": "Monthly spend chart",
  "category": "recap",
  "tags": [
    "chart",
    "finance",
    "monthly"
  ],
  "width": 1200,
  "height": 600,
  "description": "Their monthly spend as a bar chart, with the total.",
  "fields": [
    {
      "key": "first_name",
      "label": "First name",
      "kind": "text",
      "fallback": "there",
      "sample": "Zoe"
    },
    {
      "key": "total_spend",
      "label": "Total this month",
      "kind": "text",
      "fallback": "",
      "sample": "$1,240"
    },
    {
      "key": "month",
      "label": "Month",
      "kind": "text",
      "fallback": "",
      "sample": "October"
    },
    {
      "key": "spend_jul",
      "label": "July",
      "kind": "number",
      "fallback": "",
      "sample": "820"
    },
    {
      "key": "spend_aug",
      "label": "August",
      "kind": "number",
      "fallback": "",
      "sample": "960"
    },
    {
      "key": "spend_sep",
      "label": "September",
      "kind": "number",
      "fallback": "",
      "sample": "1110"
    },
    {
      "key": "spend_oct",
      "label": "October",
      "kind": "number",
      "fallback": "",
      "sample": "1240"
    }
  ],
  "scene": {
    "version": "5.3.0",
    "objects": [
      {
        "type": "textbox",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 48,
        "top": 186,
        "width": 504,
        "height": 36,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "opacity": 1,
        "text": "Hi {{first_name}},",
        "fontSize": 29,
        "lineHeight": 1.1,
        "fontWeight": 500,
        "fontFamily": "Inter",
        "textAlign": "left",
        "fill": "#1A1610",
        "styles": {},
        "layerName": "AI text — Hi {{first_name}},"
      },
      {
        "type": "textbox",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 48,
        "top": 235,
        "width": 504,
        "height": 53,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "opacity": 1,
        "text": "Your {{month}} Summary",
        "fontSize": 43,
        "lineHeight": 1.1,
        "fontWeight": 700,
        "fontFamily": "Inter",
        "textAlign": "left",
        "fill": "#1A1610",
        "styles": {},
        "layerName": "AI text — Your {{month}} Summary"
      },
      {
        "type": "textbox",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 48,
        "top": 307,
        "width": 504,
        "height": 30,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "opacity": 1,
        "text": "Total Spend",
        "fontSize": 24,
        "lineHeight": 1.1,
        "fontWeight": 500,
        "fontFamily": "Inter",
        "textAlign": "left",
        "fill": "#1A1610",
        "styles": {},
        "layerName": "AI text — Total Spend"
      },
      {
        "type": "textbox",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 48,
        "top": 348,
        "width": 504,
        "height": 67,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "opacity": 1,
        "text": "{{total_spend}}",
        "fontSize": 54,
        "lineHeight": 1.1,
        "fontWeight": 700,
        "fontFamily": "Inter",
        "textAlign": "left",
        "fill": "#1A1610",
        "styles": {},
        "layerName": "AI text — {{total_spend}}"
      },
      {
        "type": "image",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 648,
        "top": 114,
        "width": 504,
        "height": 372,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "opacity": 1,
        "crossOrigin": "anonymous",
        "elementKind": "chart",
        "chartSettings": {
          "kind": "bar",
          "color": "#FFD400",
          "trackColor": "#E6E8EB",
          "textColor": "#1A1610",
          "width": 504,
          "height": 372,
          "title": "Monthly spend",
          "titlePosition": "top",
          "titleColor": "#1A1610",
          "titleFontSize": 30,
          "points": [
            {
              "label": "Jul",
              "value": 820,
              "variableKey": "spend_jul"
            },
            {
              "label": "Aug",
              "value": 960,
              "variableKey": "spend_aug"
            },
            {
              "label": "Sep",
              "value": 1110,
              "variableKey": "spend_sep"
            },
            {
              "label": "Oct",
              "value": 1240,
              "variableKey": "spend_oct"
            }
          ]
        },
        "layerName": "Bar chart",
        "src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22504%22%20height%3D%22372%22%20viewBox%3D%220%200%20504%20372%22%3E%3Crect%20x%3D%22146%22%20y%3D%22146.2%22%20width%3D%22284%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23E6E8EB%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22146.2%22%20width%3D%22187.8064516129032%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23FFD400%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22182.2%22%20width%3D%22284%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23E6E8EB%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22182.2%22%20width%3D%22219.8709677419355%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23FFD400%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22218.2%22%20width%3D%22284%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23E6E8EB%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22218.2%22%20width%3D%22254.2258064516129%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23FFD400%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22254.2%22%20width%3D%22284%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23E6E8EB%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22254.2%22%20width%3D%22284%22%20height%3D%2221.599999999999998%22%20rx%3D%2210.799999999999999%22%20fill%3D%22%23FFD400%22%2F%3E%3C%2Fsvg%3E"
      }
    ],
    "background": "#ffffff",
    "backgroundMode": "image",
    "backgroundImageUrl": "https://pub-4d556478232842378e5c512894985e29.r2.dev/v2-canvas/draft/afb9e8dd-17b2-4bb7-883f-94eb7458d181.png",
    "backgrounds": [
      {
        "name": "default",
        "url": "https://pub-4d556478232842378e5c512894985e29.r2.dev/v2-canvas/draft/afb9e8dd-17b2-4bb7-883f-94eb7458d181.png",
        "prompt": "A calm, modern finance visual with a soft blue-to-teal gradient background flowing from left to right. Gentle abstract light shapes and subtle bokeh effects scattered across the left half, creating depth and premium feel. The right half is completely empty, clean, and unobstructed with smooth gradient continuation, reserved for text overlay. Minimal composition with professional banking aesthetic, soft lighting, and serene atmosphere. The entire surface is pristine with no printed elements. Strictly text-free image. No text, no letters, no words, no numbers, no barcodes, no logos, no charts, no watermarks anywhere. Leave clean blank flat surfaces for overlay layers."
      }
    ],
    "fieldFallbacks": {
      "first_name": "there"
    },
    "renderSettings": {
      "format": "png"
    }
  }
}