chartshot
Sign inMake a chart
Docs menu

Charts in Slack

Post a chart to a Slack channel with a Block Kit image block.

Slack shows an image from a URL in a message's image block. A Chartshot URL is that image, so a bot can post a chart without uploading a file.

Use the slack preset

"preset": "slack" draws the chart at 800 × 400. This deploys chart from the gallery uses it:

JSON
{
  "type": "bar",
  "preset": "slack",
  "data": {
    "labels": ["Mon", "Tue", "Wed", "Thu", "Fri"],
    "series": [
      {
        "name": "Production",
        "values": [14, 22, 18, 25, 11]
      },
      {
        "name": "Preview",
        "values": [61, 84, 72, 90, 47]
      }
    ]
  },
  "options": {
    "title": "Deploys this week",
    "stacked": true,
    "legend": "top"
  }
}
Deploys this week
Drawn by the API from the URL above, 800 × 400 at scale 2.

Post an image block

Put the chart's URL in a Block Kit image block. Slack requires alt_text, which screen readers read out:

JSON
{
  "blocks": [
    {
      "type": "image",
      "image_url": "https://api.chartshot.dev/v1/chart?c=eyJ0eXBlIjoiYmFyIiwicHJlc2V0Ijoic2xhY2siLCJkYXRhIjp7ImxhYmVscyI6WyJNb24iLCJUdWUiLCJXZWQiLCJUaHUiLCJGcmkiXSwic2VyaWVzIjpbeyJuYW1lIjoiUHJvZHVjdGlvbiIsInZhbHVlcyI6WzE0LDIyLDE4LDI1LDExXX0seyJuYW1lIjoiUHJldmlldyIsInZhbHVlcyI6WzYxLDg0LDcyLDkwLDQ3XX1dfSwib3B0aW9ucyI6eyJ0aXRsZSI6IkRlcGxveXMgdGhpcyB3ZWVrIiwic3RhY2tlZCI6dHJ1ZSwibGVnZW5kIjoidG9wIn19",
      "alt_text": "Deploys this week"
    }
  ]
}

Keep the format png. Slack's image block shows PNG, JPEG and GIF only.

Post it from code

This posts the chart through an incoming webhook, with the webhook's URL in SLACK_WEBHOOK_URL:

JavaScript
const spec = {
  "type": "bar",
  "preset": "slack",
  "data": {
    "labels": ["Mon", "Tue", "Wed", "Thu", "Fri"],
    "series": [
      {
        "name": "Production",
        "values": [14, 22, 18, 25, 11]
      },
      {
        "name": "Preview",
        "values": [61, 84, 72, 90, 47]
      }
    ]
  },
  "options": {
    "title": "Deploys this week",
    "stacked": true,
    "legend": "top"
  }
};

const c = Buffer.from(JSON.stringify(spec)).toString("base64url");
const url = `https://api.chartshot.dev/v1/chart?c=${c}`;

await fetch(process.env.SLACK_WEBHOOK_URL, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    blocks: [{ type: "image", image_url: url, alt_text: "Deploys this week" }],
  }),
});

Keep the URL short

Slack refuses an image_url over 3,000 characters, well under the API's own limit. That leaves room for about 2,222 bytes of spec JSON. The chart above makes a URL of 377 characters. See URL length for ways to keep a spec small.

PreviousCharts in emailNextNext.js OG images