Postgraphs Declarative HTML Chart Components

<!-- Include postgraphs.js -->
<script src="https://postgraphs.com/postgraphs.js" defer></script>

<!-- Make a chart -->
<div
  pg-chart="bar"
  pg-data-path="/endpoint/or/file.json"
  pg-x="month"
  pg-y="signups">
</div>

<!-- That's it. Go watch a movie or do yoga or something. -->

<!-- You could also include data inline. -->
<div
  pg-chart="scatter"
  pg-data='[{"month": "0", "Asia": 100, "Europe": 100, "N America": 100}, {"month": "1", "Asia": 108, "Europe": 102, "N America": 107}, {"month": "2", "Asia": 104, "Europe": 110, "N America": 116}, {"month": "3", "Asia": 115, "Europe": 115, "N America": 109}, {"month": "4", "Asia": 116, "Europe": 132, "N America": 136}, {"month": "5", "Asia": 120, "Europe": 115, "N America": 120}, {"month": "6", "Asia": 118, "Europe": 136, "N America": 124}, {"month": "7", "Asia": 114, "Europe": 149, "N America": 135}, {"month": "8", "Asia": 132, "Europe": 148, "N America": 132}, {"month": "9", "Asia": 172, "Europe": 172, "N America": 163}, {"month": "10", "Asia": 150, "Europe": 120, "N America": 180}, {"month": "11", "Asia": 166, "Europe": 199, "N America": 177}, {"month": "12", "Asia": 208, "Europe": 136, "N America": 184}, {"month": "13", "Asia": 165, "Europe": 152, "N America": 126}, {"month": "14", "Asia": 198, "Europe": 142, "N America": 226}, {"month": "15", "Asia": 235, "Europe": 175, "N America": 235}, {"month": "16", "Asia": 148, "Europe": 244, "N America": 180}, {"month": "17", "Asia": 185, "Europe": 151, "N America": 134}, {"month": "18", "Asia": 136, "Europe": 172, "N America": 136}, {"month": "19", "Asia": 176, "Europe": 233, "N America": 214}, {"month": "20", "Asia": 240, "Europe": 280, "N America": 140}, {"month": "21", "Asia": 184, "Europe": 247, "N America": 142}, {"month": "22", "Asia": 210, "Europe": 188, "N America": 276}, {"month": "23", "Asia": 238, "Europe": 238, "N America": 261}]'
  pg-x="month"
  pg-y="N America,S America,Europe"
  pg-title="Global Sign Ups by Continent">
</div>

Getting Started

To create a chart, you'll need a JSON endpoint or JSON file. Then, include postgraphs.js and create a div with the pg- attributes to make a chart.

See the quick start, docs or examples. Some of the most common attributes are below.

Attribute	Description	Examples
pg-chart	The type of chart bar line scatter bubble pie (coming soon) doughnut (coming soon)	<div pg-chart="bar" pg-x="month" <div pg-chart="scatter" pg-x="month" <div pg-chart="bubble" pg-r="population"
Charts get data from either pg-data-path (url) or pg-data (json object)
pg-data-path	The URL path to a file or an endpoint with JSON. The JSON should be an array of objects.	<div pg-data-path="/data/user_signups.json" <div pg-data-path="/data/user_signups"
pg-data	A JSON object with the data to be charted. (Note that JSON requires double quotes.) `[ {"month":"2021-08-01", "signups":29}, {"month":"2021-09-01", "signups":59} ]`	<div pg-data='[{"month":"2021-08-01", "signups":29}, {"month":"2021-09-01", "signups":59} ... ]' <div pg-data='{results:[{"month":"2021-08-01", "signups":29}, {"month":"2021-09-01", "signups":59} ... ]}'
Use pg-x, pg-y, pg-series, and pg-r to specify which JSON keys to use for the axes.
pg-x	The key of the objects to use for the x axis.	<div pg-chart="bar" pg-x="month" <div pg-chart="scatter" pg-x="country"
pg-y	Comma separated keys to use for the y axis. `[ {"month":"2019-07-01", "signups":191, "cancellations":54}, {"month":"2019-08-01", "signups":224, "cancellations":66}, ]`	<div pg-chart="line" pg-y="logins" <div pg-chart="bar" pg-y="signups,cancellations"
pg-series	In addition to providing a value for pg-y, you can provide a pg-series. `[ {"month":"2019-07-01", "continent":"Asia", "signups":54}, {"month":"2019-07-01", "continent":"Europe", "signups":66}, {"month":"2019-08-01", "continent":"Asia", "signups":71}, {"month":"2019-08-01", "continent":"Europe", "signups":89}, ]`	<div pg-chart="line" pg-y="signups" pg-series="continent" <div pg-chart="bar" pg-y="signups" pg-series="continent"
pg-r	The key of the objects to use for the bubble radius.	<div pg-chart="bubble" pg-r="GDP"
Use built-in color palettes or bring your own
pg-colors	Postgraphs comes with built-in color palettes or you can provide an array of hex colors. pg-blue pg-green (coming soon) pg-pink (coming soon) pg-orange (coming soon) pg-mocha (coming soon) pg-doughnut (coming soon)	<div pg-colors="pg-blue" <div pg-colors="['#264653', '#2a9d8f', '#e9c46a', ...]"
pg-title	Provide a title for your chart	<div pg-title="Weekly Signups by Continent" <div pg-title="UFO Sightings by Quarter"
pg-stacked	Set to true if bar charts should be stacked instead of grouped.	<div pg-stacked="true"

Line Chart

//signups_cancellations.json
[
  {"month":"2019-07-01", "signups":191, "cancellations":54},
  {"month":"2019-08-01", "signups":224, "cancellations":66},
  {"month":"2019-09-01", "signups":225, "cancellations":48},
]

<div
  pg-chart="line"
  pg-data-path="/data/signups_cancellations.json"
  pg-x="month"
  pg-y="signups,cancellations"
  pg-title="Monthly User Sign Ups & Cancellations"
></div>

Bar Chart - Grouped

//signups_cancellations.json
[
  {"month":"2019-07-01", "signups":191, "cancellations":54},
  {"month":"2019-08-01", "signups":224, "cancellations":66},
  {"month":"2019-09-01", "signups":225, "cancellations":48},
]

<div
  pg-chart="bar"
  pg-data-path="/data/signups_cancellations.json"
  pg-x="month"
  pg-y="signups,cancellations"
  pg-title="Monthly User Sign Ups & Cancellations"
></div>

Bar Chart - Stacked

// popsicle_sales.json
[
  {"month":"2019-07-01", "strawberry":191, "blueberry":54, "lemon":111},
  {"month":"2019-08-01", "strawberry":224, "blueberry":66, "lemon":130},
  {"month":"2019-09-01", "strawberry":225, "blueberry":48, "lemon":96 },
]

<div
  pg-chart="bar"
  pg-stacked="true"
  pg-data="/data/popsicle_sales.json"
  pg-x="month"
  pg-y="strawberry,lemon,blueberry"
  pg-title="Popsicle Flavor Sales"
  pg-colors="#FF6384,#FFC863,#5499C7"
></div>