PNG and SVG Export with chart.js – Designing With Data
Channel: Jeff Thompson
Date: 24/03/2021

Online charts are great, but what if you want to share them on social media, use them in print projects, etc? With a little tweaking, we can export and download any chart we make as a PNG and SVG! SVGs are vector graphics, meaning we can also open them in Illustrator and access all the shapes! This is great if you want to create a base chart in code, then style it in Illustrator to make it super cool.

Note! Your SVG may look cut off when viewing in the web browser. Fear not: if you open it in Illustrator you'll see everything there :)

👩‍💻 https://editor.p5js.org/jeffThompson/sketches/9UBWBj32R

ALL THE VIDEOS IN THIS UNIT
🎥 https://youtube.com/playlist?list=PLsGCUnpinsDkzLls8TCm0BtDUMfH2poqU

DATA SOURCE
💾 https://en.wikipedia.org/wiki/World_population

CHALLENGES
❓ Try opening the SVG in Illustrator: can you ungroup everything and change colors and text?

SEE ALSO
💡 Uses canvas2svg.js: http://gliffy.github.io/canvas2svg