Skip to content
Klutch.sh Docs

Deploying a QuickChart App

Introduction

QuickChart is an open-source chart image API compatible with Chart.js, enabling server-side chart rendering. Deploying QuickChart with a Dockerfile on Klutch.sh provides reproducible builds and managed secrets—all configured from klutch.sh/app. This guide covers installation, Dockerfile setup, environment variables, optional storage, Nixpacks overrides, and sample requests.

Prerequisites

  • A Klutch.sh account (sign up)
  • A GitHub repository containing your QuickChart Dockerfile (GitHub is the only supported git source)
  • Domain and TLS for secure access (recommended)

For onboarding, see the Quick Start.

Architecture and ports

  • QuickChart serves HTTP on internal port 3400 by default. Choose HTTP traffic and set the internal port to 3400.
  • Persistent storage is optional; charts are rendered on demand.

Repository layout

quickchart/
├── Dockerfile              # Must be at repo root for auto-detection
└── README.md

Keep secrets out of Git; store them in Klutch.sh environment variables.

Installation (local) and starter commands

Build and run locally:

Terminal window
docker build -t quickchart-local .
docker run -p 3400:3400 quickchart-local

Dockerfile for QuickChart (production-ready)

Place this at the repo root; Klutch.sh auto-detects Dockerfiles.

FROM ghcr.io/typpo/quickchart:latest


ENV PORT=3400
EXPOSE 3400


CMD ["npm", "start"]

Notes:

  • Pin to a specific tag (e.g., ghcr.io/typpo/quickchart:v4.5.0) for stability.
  • npm start launches the API server on the configured port.

Environment variables (Klutch.sh)

Set as needed:

  • PORT=3400
  • MAX_IMAGE_WIDTH / MAX_IMAGE_HEIGHT — limit output dimensions
  • HTTP_COMPRESSION=true — enable gzip responses
  • CACHE_CONTROL_HEADER — customize cache headers

If deploying without the Dockerfile and relying on Nixpacks:

  • NIXPACKS_START_CMD=npm start
  • NIXPACKS_NODE_VERSION=18

Attach persistent volumes

Storage is typically not required. If you add local caching, configure a volume path (e.g., /app/cache) and size it in Klutch.sh.

Deploy QuickChart on Klutch.sh (Dockerfile workflow)

  1. Push your repository—with the Dockerfile at the root—to GitHub.
  2. Open klutch.sh/app, create a project, and add an app.
  3. Select HTTP traffic and set the internal port to 3400.
  4. Add environment variables (port, size limits, compression) as desired.
  5. Attach a volume only if you implement local caching (e.g., /app/cache).
  6. Deploy. Your API will be reachable at https://example-app.klutch.sh.

Sample requests

Render a simple bar chart:

Terminal window
curl -X POST https://example-app.klutch.sh/chart \
  -H "Content-Type: application/json" \
  -d '{"chart":{"type":"bar","data":{"labels":["Red","Blue","Yellow"],"datasets":[{"label":"Votes","data":[12,19,3]}]}}}'

Get a chart via GET query:

Terminal window
curl "https://example-app.klutch.sh/chart?c={type:'line',data:{labels:['Jan','Feb'],datasets:[{label:'Sales',data:[3,7]}]}}"

Health checks and production tips

  • Add an HTTP readiness probe to / or /health if enabled.
  • Enforce reasonable MAX_IMAGE_WIDTH and MAX_IMAGE_HEIGHT to prevent excessive payloads.
  • Pin image tags and test upgrades in staging before production rollout.
  • If caching locally, monitor volume usage and resize as needed.

QuickChart on Klutch.sh delivers a fast, reproducible chart API with managed environment configuration—no extra YAML or CI steps. Configure ports, optional limits, and caching, then start rendering charts for your apps.