Sunburst chart

Sunburst charts are a novel way of illustrating the flow of users through a complex system. The inner-most circle represents a user's first action in a session. The second circle represents their second action; the third circle represents their third; and so on. The size of each section represents the percentage of users who followed exactly that path of actions to during their session. Hover over a section of the circle that highlights that particular user path, and you'll see the percentage of users who followed it.

The example below is taken from our playbook on understanding how users flow through your product or website.

Click Powered by Mode to duplicate this example and create your own sunburst chart. Learn more about using HTML to customize your reports.

Create a sunburst chart

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.sunburstChart(
  { 
	query_name: "Query 1",
	title: "How people move through your product",
	event_columns: ["e1","e2","e3","e4","e5"], 
	event_counts: "occurrances",
	color_range: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"]
  }
)

</script>

You can customize the sunburst by editing the parameters in the snippet. Note that your query should return one row for each possible event sequence that occurred, and a count for how many times that sequence occurred.

• html_element: If not provided, the funnel will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
• query_name: The name of the query that returns the table's dataset. If you update the name of the query, you’ll need to update it here as well.
• title: The chart's title.
• column_events: An array of dataset columns that define each circle of the sunburst. If you want to view three steps, add three event columns; if you want to view five steps, add five event columns; and so on.
• event_counts: The dataset column that defines how many times each event sequence occurred.
• color_range: Hex codes for the colors for each event.