CHARTS

The Charts extension allows users to render excel-esque charts in Roam!

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If instead you prefer to manually install, first create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, copy and paste this code block as a child of the block.

var existing = document.getElementById("roamjs-charts");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/charts.js";
  extension.id = "roamjs-charts";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Usage

The script is not configurable.

There are two types of charts supported:

  • Create a {{line}} or {{line chart}} button to render a line graph.
  • Create a {{bar}} or {{bar chart}} button to render a bar graph.

You will need to nest labels and data as children of the rendered chart. You should have one label per line, and data should be nested under the label. The data should be two numbers separated by a comma. Here's an example:

You could specify multiple y values for each x value. Simply delimit with a comma the additional y values on each block.

You could use the dropdowns on the right to define what type of axis the charts use. The supported types are:

  • linear - numerical values
  • ordinal - text values
  • time - date values (default MM/dd/yyyy format)

You could save the types that the axis use by setting the follwing attributes as children of the chart:

  • X-Axis:: - Define the type of the x axis
  • Y-Axis:: - Define the type of the y axis
  • Date Format:: - Define the date format to use, based on these specification.

Here's an example:

Playground

In the playground below, the chart will update dynamically based on the inputs. Each text input will be the data label, and each text area will be the data values. Deliminate each value with a new line to resemble new blocks in Roam.

0.00.51.01.52.02.53.03.54.01.01.52.02.53.03.54.04.55.05.56.06.57.0
Legend

First layout-linear

Demo

Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right. If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

ROAMJS DIGEST

Add your email below to stay up to date on all RoamJS features, fixes, and news!

Other Extensions