Back to Templates
Data Viz
Framework Usage Stats
Blog-ready comparison chart with optimized sizing and fast web loading
Claude Code Ready
Multi-step Pipeline
How It Works
4 steps in this workflow
- 1 Generate chart (QuickChart)
- 2 Resize to 800×450
- 3 Add padding/border
- 4 Convert to WEBP
Code Examples
Use this template programmatically with the FloImg SDK or CLI
const chart = await floimg
.generate('quickchart', {
chart: {
type: 'horizontalBar',
data: {
labels: ['React', 'Vue', 'Angular', 'Svelte', 'Solid'],
datasets: [{ label: 'Usage %', data: [42, 18, 15, 8, 4] }]
}
}
})
.transform('resize', { width: 800, height: 450 }) // Blog content width
.transform('extend', { top: 16, bottom: 16, left: 16, right: 16, background: '#ffffff' })
.transform('convert', { to: 'image/webp', quality: 85 })
.toBlob();# Framework Usage Stats
name: "Framework Usage Stats"
steps:
- kind: generate
generator: quickchart
out: result# Framework Usage Stats
floimg generate quickchart \
--output result.png
