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


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 the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block and type three backticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-charts");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = ""; = "roamjs-charts";
  extension.async = true;
  extension.type = "text/javascript";

Finally, click "Yes, I Know What I'm Doing".


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:



This extension is brought to you by RoamJS! If you are facing any issues reach out to 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!

Other Extensions