{"id":13929051,"url":"https://github.com/hasura/graphql2chartjs","last_synced_at":"2026-03-10T05:02:37.556Z","repository":{"id":37932864,"uuid":"215501161","full_name":"hasura/graphql2chartjs","owner":"hasura","description":"graphql2chartjs reshapes your GraphQL data as per the ChartJS API.","archived":false,"fork":false,"pushed_at":"2023-07-11T21:56:02.000Z","size":1122,"stargazers_count":227,"open_issues_count":41,"forks_count":24,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-07-19T16:07:39.296Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hasura.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-10-16T08:50:18.000Z","updated_at":"2025-06-25T10:59:18.000Z","dependencies_parsed_at":"2023-02-02T12:15:36.284Z","dependency_job_id":"6894550e-bc3a-4251-9eaf-b80f90a9de42","html_url":"https://github.com/hasura/graphql2chartjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hasura/graphql2chartjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fgraphql2chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fgraphql2chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fgraphql2chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fgraphql2chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hasura","download_url":"https://codeload.github.com/hasura/graphql2chartjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hasura%2Fgraphql2chartjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30325598,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T01:36:58.598Z","status":"online","status_checked_at":"2026-03-10T02:00:06.579Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-07T18:02:04.606Z","updated_at":"2026-03-10T05:02:37.492Z","avatar_url":"https://github.com/hasura.png","language":"JavaScript","funding_links":[],"categories":["others","JavaScript"],"sub_categories":[],"readme":"# graphql2chartjs - Instant realtime charts using GraphQL\n\n`graphql2chartjs` reshapes your GraphQL data as per the [ChartJS](https://chartjs.org) API. This makes it easy to query a GraphQL API and render the output as a ChartJS chart.\n\nFor example, if you're using Postgres and [Hasura](https://hasura.io), this is what using `graphql2chartjs` looks like:\n\n![graphql2chartjs](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/img/graphql2chartjs-explained.png)\n\n\n\n## Demos \u0026 sandbox\nWe've set up a GraphQL server with continuously changing data, so that you can try graphql2chartjs out easily.\n\n\n|[View live charts](https://graphql2chartjs-examples.herokuapp.com) | [Edit in sandbox](https://codesandbox.io/s/p2wpj1o8pj) | [Open GraphiQL](https://g2c-examples-graphiql.herokuapp.com/) |\n|---|---|---|\n\n![realtime chart with live data](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/assets/graphql2chartjs/live-chart.gif)\n\nThe demo above cover the following types of charts: [basic](https://graphql2chartjs-examples.herokuapp.com/#bar), [multiple datasets](https://graphql2chartjs-examples.herokuapp.com/#multi-bar), [mixed chart-types](https://graphql2chartjs-examples.herokuapp.com/#mixed), [realtime chart with live data](https://graphql2chartjs-examples.herokuapp.com/#live-chart), [realtime time-series](https://graphql2chartjs-examples.herokuapp.com/#timeseries-chart)\n\n## Usage with Hasura\nHasura 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.\n\nWatch this video below to see a demo/tutorial of using Hasura with an existing Postgres database, creating views and building charts.\n\n\u003cdiv style=\"text-align:center\"\u003e\n  \u003ca href=\"https://www.youtube.com/watch?v=153iv1-qFuc\u0026feature=youtu.be\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://storage.googleapis.com/graphql-engine-cdn.hasura.io/assets/graphql2chartjs/g2c-youtube-embed.png\" width=\"1000px\" alt=\"youtube video demo\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n## Example usage with react, apollo and react-chartjs-2\n\n```javascript\nimport {Query} from 'react-apollo';\nimport gql from 'graphql-tag';\nimport graphql2chartjs from 'graphql2chartjs';\nimport {Bar} from 'react-chartjs-2';\n\nconst Chart = () =\u003e (\n  \u003cQuery\n    query={gql`\n      query {\n        Articles: articleStats {\n          label: title\n          data: num_likes\n        }\n      }`}\n    }\u003e\n    {({data} =\u003e {\n      if (data) {\n        const g2c = new graphql2chartjs(data, 'bar');\n        return (\u003cBar data={g2c.data} /\u003e);\n      }\n      return null;\n    }\n  \u003c/Query\u003e\n);\n```\n\n## Mapping GraphQL queries to ChartJS charts\n\nDifferent types of charts need different structures in their datasets.\n\nFor example a bar chart dataset needs labels and data associated for each label; the ChartJS API refers to this as `label` and `data`. Once you alias fields in your graphql query to `label` and `data`, and pass the response through `graphql2chartjs`, your dataset is ready to be used by bar chart in chartjs.\n\n### Bar / Line / Doughnut / Pie / Radar / Polar Area / Area\n\nCharts of this type need 2 data inputs, `label` and `data`.\n```graphql\nquery {\n  ArticleLikes : articles {\n    label: title\n    data: likes\n  }\n}\n```\n\n### Scatter / Bubble\n\nCharts of this type need 2 data inputs: `data_x`, `data_y` (and `data_r` for bubble).\n```graphql\nquery {\n  ArticleLikesVsComments : articles {\n    data_x: num_likes\n    data_y: num_comments\n  }\n}\n```\n\n### Time series (line / bar)\n\nCharts of this type need 2 data inputs, `data_x` or `data_t` and `data_y`. Note that there is no `label`.\n\n```graphql\nquery {\n  StockPrices : stockprice {\n    data_t: created\n    data_y: price\n  }\n}\n```\n\n## graphql2chartjs usage\n\ngraphql2chartjs works in 3 steps:\n\n1. Initialise graphql2chartjs: `const g2c = new graphql2chartjs()`\n2. Add data from your graphql response: `g2c.add(graphqlResponse.data, 'line')`\n3. Set your chart data to the data properly of the graphql2chartjs instance: `g2c.data`\n\n### Step 1: Initialiase with data: `new graphql2chartjs()`\n\n#### Option 1: Initialise with data and chart type\n\n**`graphql2chartjs(data, chartType)`**\n\n```javascript\nconst g2c = new graphql2chartjs(data, 'bar');\n```\n\n- `data`: This is your GraphQL response. This data should have fields `label`, `data` etc. as per the GraphQL querying described above.\n- `chartType`: This is a string that represents valid values of what your chart type is. Valid values include `'line'`, `'bar'`, `'radar'`, `'doughnut'`, `'pie'`, `'polarArea'`, `'bubble'`, `'scatter'`.\n\n**Notes:**\n- This is the simplest way of using `graphql2chartjs`\n- If you have multiple datasets, all of the datasets will be rendered automatically as the same type of chart\n- To customise the UI options of the rendered chart like colors or to create a mixed type chart (one dataset is rendered as a line chart, another as a bar chart) use the next initialisation method instead of this one.\n\n\n#### Option 2: Initialise with data and a transform function\n\n**`graphql2chartjs(data, transform)`**\n\nThe transformation function can add chartjs dataset props or even modify the record data:\n\n```javascript\nconst g2c = new graphql2chartjs(data, (datasetName, dataPoint) =\u003e {\n  return {\n    chartType: 'bar',\n    backgroundColor: 'yellow'\n  };\n});\n```\n\n- `transform(datasetName, dataPoint)`: This function defined by you can take the name of the dataset and the data record that comes from the GraphQL response and returns an object that can should have the `chartType` key and optionally other keys that specify other dataset properties.\n  - The object returned by this function should look like the following:\n  ```javascript\n  {\n    chartType: 'line', // Or 'line', 'bar', 'radar', 'doughnut', 'pie', 'polarArea', 'bubble', 'scatter'\n    \u003cother keys as per the dataset properties per chart. Refer to the link below\u003e\n  }\n  ```\n  - `chartType`: This should be a string value, one of: `'line'`, `'bar'`, `'radar'`, `'doughnut'`, `'pie'`, `'polarArea'`, `'bubble'`, `'scatter'`\n  - Other keys in this object should be dataset properties. These properties are slightly different for different chart types. \n    - Line chart: https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties\n    - Bar chart: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties\n    - Radar chart: https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties\n    - Doughnut \u0026 Pie: https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties\n    - Polar: https://www.chartjs.org/docs/latest/charts/polar.html#dataset-properties\n    - Bubble: https://www.chartjs.org/docs/latest/charts/bubble.html#dataset-properties\n    - Scatter: https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties\n\n\n### Step 2: Now create your chart with data - `g2c.data`\n\n`g2c.data` gives you access to the latest ChartJS data that can be passed to your chart.\n\n1. Javascript\n  ```javascript\n  var myChart = new Chart(ctx, { data: g2c.data });\n  ```\n\n2. react-chartjs-2\n  ```javascript\n  \u003cBar data={g2c.data} /\u003e\n  ```\n\n### Step 3: (optional) Incrementally add data for your chart\n\n**`g2c.add()`**\n\nOnce you've initialised a `graphql2chartjs` object, you can use the `add` function to add data for the first time or incrementally:\n\n```javascript\nawait data = runQuery(..);\n\n// Add for a chart type\ng2c.add(data, 'line');\n\n// Add with a transformation function to change UI props for the new data added or udpated\ng2c.add(data, (datasetName, dataPoint) =\u003e {\n  chartType: 'line',\n  pointBackgroundColor: 'yellow'\n});\n```\n\n\n## Installation\n\n### Via npm\n\n```\nnpm install --save graphql2chartjs\n```\n\n### Use in a script tag\n\n```html\n\u003cscript src=\"https://storage.googleapis.com/graphql-engine-cdn.hasura.io/tools/graphql2chartjs/index.js\" type=\"application/javascript\"\u003e\u003c/script\u003e\n```\n\n## Reforming the data\n\n### `reform()`\n\nYou can reform the existing data in your `graphql2chartjs` instance using the reform function that takes a reformer function as an argument. This reformer function is run over every datapoint in every dataset. For instance, to scale the x and y coordinates, you would do something like:\n\n```\ng2c.reform((datasetName, dataPoint) =\u003e {\n  // scale the x, y coordinates\n  return {\n    data_x: scalingFactor(dataPoint.data_x),\n    data_y: scalingFactor(dataPoint.data_y)\n  }\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasura%2Fgraphql2chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhasura%2Fgraphql2chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhasura%2Fgraphql2chartjs/lists"}