Create PNGs from SVGs
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Baremetrics BarePNG Deploy

Baremetrics provides one-click subscription analytics & insights. Get started today!

Built by Tyler van der Hoeven

BarePNG is a little app we built to turn our charts into slick PNGs for our Slack Bot and emails. Download, serve and enjoy or just use our little free standing demo to snag a few quick graph PNGs every now and again.

How it works

The app itself is actually very simple. We have one page at /chart that hosts the svg, drawn from a small JavaScript file using the url queries.

With that page in place all we have to do is call the /api url with the appropriate queries and PhantomJS will take care of the rest.

Just look![0,10,20,50,20]&symbol=^%25 BarePNG Image

Base keys


8 digit number to start the graph on, will be added unto just like data with the step value

// new Date().setHours(0,0,0,0) / 100000


Number to add onto the iteration from the start value. Default is 864, one day

// day = 864
// week = 6048
// 30 day = 25920


Array of values starting with an initial value and proceeding with additional values which will be added on to the previous summarized value (i.e data=100,50,-10 // 100, 150, 140)



Number width of the generated graph and image. Default is 800



Number height of the generated graph and image. Default is 400



Select the graph style. Default is.. well.. default

// default, email

Default keys


String. Symbol and placement for the x axis labels. Pretend the ^ is your number, cause that's where it will show up. Default is ''

symbol=^% // 45%
symbol=$^ // $1,000

Email keys


Array for creating a goal line for your email graph by sending the start date, start value, end date and end value.

*note this is a little different then the data key as all four values are their actual final values and not values which will be added onto inside a loop


Example URLs

Base "Slack" graph


Base "Email" w/goal


Nice large % based graph with 7 day (week) steps


It's worth noting that once you're hosting the app yourself there's no reason for you to not completely change it. Try adding your own keys and CSS for the stuff that shows up at /chart. It's your app so make it yours! It's easy!


  1. clone this repo or your own fork
  2. Install meteor if you haven't already
  3. cd into this directory and run meteor. Your app will be up and running locally

Deploying to Heroku yourself for hacking

Replace <app-name> with the name of your app

  1. Fork this repo
  2. Clone your fork and cd into it locally
  3. Create an empty heroku app called
    • heroku create <app-name>
  4. Add heroku as a remote to your fork
    • git remote add heroku<app-name>.git
  5. Set ENV vars for
    • heroku config: set ROOT_URL=https://<app-name> DISABLE_WEBSOCKETS=true
  6. Create the MONGO addon:
    • heroku addons:create mongolab:sandbox
  7. Create a Procfile in the root directory of this repo and define the web process
    • touch Procfile && echo "web: .meteor/heroku_build/bin/node .meteor/heroku_build/app/main.js" >> Procfile
  8. Push the public branch to heroku
    • git push heroku public:master