Sharing custom charts on the fly using Satori
Shoaib Ahmed
@pixeledcodeReactJS Bangalore, April 6, 2024
Hi, I’m Shoaib.
Senior Frontend Engineer @CivicDataLab
Sharing custom charts on the fly using Satori
Shoaib Ahmed
@pixeledcodeReactJS Bangalore, April 6, 2024
Hi, I’m Shoaib.
Senior Frontend Engineer @CivicDataLab
The problem
I work with dashboards on a daily basis. A common ask is having charts that need to be shareable.
some of the dashboards I’ve made in the past
The problem
The current implementation is pretty simple but not ideal.
Server
Client
Download Click
Screenshot the DOM
Download Image
The problem
Here’s how it works on different screen sizes.
The shared charts are not consistent.
the quick fix
ft. NextJS
Server
Client
Download Click
Initiate ECharts
Create chart using options
Convert to SVG string
Download Image
the quick fix
Thanks to route handlers, we are able to share consistent charts across different screen sizes.
let’s go plus ultra
We can improve it further by creating a custom template (React Component) before download.
Server
Client
Download Click
Generate Chart
Create React Template
Convert React to SVG
Download Image
let’s go plus ultra
ft. Satori
let’s go plus ultra
with Next.js and Satori
also, it isn’t slow..
| Chrome | Firefox | Safari | |
|---|---|---|---|
| Screenshot | 98ms | 128ms | 208ms |
| Route Handler | 45ms | 43ms | 173ms |
| Satori | 30ms | 23ms | 35ms |
| Satori + Route | 115ms | 112ms | 400ms |
it solves for
custom views of shareable charts
responsive shareable charts
and as a bonus, for
browser compatibility
fin.
That’s all for today.
Code & Demo
github.com/PixeledCode/echarts-satori