Create Beautiful Charts with Svelte and Chart js

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Chart.js

    Simple HTML5 Charts using the <canvas> tag

    For this tutorial, we shall be using the Chart js library for creating basic charts.

  • degit

    Straightforward project scaffolding

    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:

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • Svelte

    Cybernetically enhanced web apps

    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.

  • Sapper

    Discontinued The next small thing in web development, powered by Svelte

    pancake which has very scarce documentation and is in thorough experimentation(at the time of writing). Since it has been created by Rich Harris, you can rest assured that it might probably never get documentation or a stable release just like our fallen soldier sapper (a moment of silence in remembrance)

  • chartist-js

    Legacy Chartist Repo for old gh-pages

    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 😉?

  • d3

    Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

    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)

  • codesandbox-client

    An online IDE for rapid web development

    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:

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts