Create Beautiful Charts with Svelte and Chart js

1

Svelte

Svelte is a JavaScript compiler that compiles its code to HTML, CSS and vanilla JavaScript hence creating a very performant website. On the official website, there is a tutorial that explains Svelte step-by-step. If you just want to see the completed code and figure it out by yourself, go to the code for this article.

#Javascript UI Libraries #JavaScript Framework #JS Library 352 social mentions

2

Chartist.js

Chartist - Really impressive charting library that is only 10KB (Gzip) with no dependencies. Round of applause for this awesome library that should play nice with svelte since it does not have any dependencies. I honestly can't remember why I didn't go with this for this tutorial but there's always time for another tutorial, am I right 😉?

#Charting Libraries #Data Visualization #Javascript UI Libraries 12 social mentions

3

D3.js

d3.js - Great library, but it would take me to long to explain whereas I'm trying to write a super simple tutorial. I would also recommend this library, though those examples they present are thoroughly intimidating, like this example where you create a chart of Obama's face using Voronoi Stippling(not a clue what that is and my furniture just started floating around once I spoke those words out loud).

#Javascript UI Libraries #Charting Libraries #Data Visualization 159 social mentions

4

CodeSandbox

You could use codesandbox for your initial setup or create a local svelte application using the degit tool. Open a new terminal and run the following command:.

#Text Editors #Programming #Programming Tools 300 social mentions