DEV Community

Rishichandra Wawhal for Hasura

Posted on • Updated on • Originally published at

graphql2chartjs: Realtime charts made easy with GraphQL and ChartJS

realtime chart with live data

We started using ChartJS with GraphQL so that we could leverage GraphQL's realtime subscriptions to build realtime charts. Soon enough we realised that we can automate this process of restructuring the GraphQL data to a form that ChartJS expects.

graphql2chartjs is an open source tool that reshapes your GraphQL data as per the ChartJS API. This makes building charts as easy as simply making a GraphQL query.

The idea behind this tool is to generate ChartJS compliant data object from your GraphQL response by simply adding a few aliases in your GraphQL query.

Check out a live demo here

Usage with Hasura

Hasura gives you an instant realtime GraphQL API on an existing Postgres database. You can create views to capture analytics and aggregations on your database and instantly turn them into charts.
If you're using Postgres and Hasura, this is what using graphql2chartjs looks like:


Watch this video below to see a demo/tutorial of using Hasura with an existing Postgres database, creating views and building charts.

youtube video demo

Continue reading:

Top comments (0)