Back to Templates
Data Viz
Traffic by Device
Analytics breakdown optimized for Slack sharing and weekly reports
Claude Code Ready
Multi-step Pipeline
How It Works
4 steps in this workflow
- 1 Generate chart (QuickChart)
- 2 Resize to 500×500
- 3 Add caption "Week of Jan 1, 2026"
- 4 Convert to PNG
Code Examples
Use this template programmatically with the FloImg SDK or CLI
const chart = await floimg
.generate('quickchart', {
chart: {
type: 'doughnut',
data: {
labels: ['Desktop', 'Mobile', 'Tablet'],
datasets: [{ data: [55, 35, 10] }]
}
}
})
.transform('resize', { width: 500, height: 500 }) // Square for Slack preview
.transform('addCaption', {
text: 'Week of Jan 1, 2026',
position: 'bottom-center',
fontSize: 14,
color: '#6B7280'
})
.transform('convert', { to: 'image/png' })
.toBlob();# Traffic by Device
name: "Traffic by Device"
steps:
- kind: generate
generator: quickchart
out: result# Traffic by Device
floimg generate quickchart \
--output result.png
