Skip to main content

Render Function

The most flexible way to visualize data is to create a Render Function.

A render function is written in a superset of Javascript named JSX, which is kind of like a mix of HTML and Javascript. You can read Javascript and JSX tutorials online for a thorough explanation of syntax.

A render function looks like this:

Import data

Data will come from a compute context, which may be a Pipeline. Your syntax will look something like this:

const data = result?.data; // pulls data from context (more on this later)

But instead, for this demo, we'll use this sample result:

Touchpoint 10.9464130.999127
Touchpoint 20.9105420.575348
Touchpoint 30.9835540.140352
Touchpoint 40.4111840.091235
Touchpoint 50.5712170.468007
Touchpoint 60.4239190.612313
Touchpoint 70.6981750.070229

We are going to hard-code the above data as JSON:

// in real life, we would pull this from aggregation pipeline insead of hard-coding
let data = [
{ label: "Touchpoint 1", seg1: 0.946413, seg2: 0.999127 },
{ label: "Touchpoint 2", seg1: 0.910542, seg2: 0.575348 },
{ label: "Touchpoint 3", seg1: 0.983554, seg2: 0.140352 },
{ label: "Touchpoint 4", seg1: 0.411184, seg2: 0.091235 },
{ label: "Touchpoint 5", seg1: 0.571217, seg2: 0.468007 },
{ label: "Touchpoint 6", seg1: 0.423919, seg2: 0.612313 },
{ label: "Touchpoint 7", seg1: 0.698175, seg2: 0.070229 },

Tweak (post-process) the data if you really need to.

Ideally the result output is already perfect. But if you really want to hack it, you can, in Javascript.

// nullify a data point
data.find(row => row.label === "Touchpoint 4").seg1 = null;

// relabel Touchpoint 7
data.find(row => row.label === "Touchpoint 7").label = "Hi Mom!";

Click here to learn more about post-processing.

Import a visualization library

In this example we'll use ReCharts (

// import the components we want from ReCharts
const {
} = lib.ReCharts;

Render the visualization

Here we will return a ReCharts BarChart:

// note: see ReCharts documentation for an in-depth explanation of this visualizer
return (
margin={{ top: 5, right: 30, left: 20, bottom: 50 }}
<Legend verticalAlign="top" height={30} />
<YAxis />
<Tooltip />
<Bar name="Segment 1" dataKey="seg1" fill={"#81afb8"} />
<Bar name="Segment 2" dataKey="seg2" fill={"#1c6d7d"} />

Here's the result! Try hovering to see the toolip. A crapload of formatting options are available on the ReCharts website.

Touchpoint 1Touchpoint 2Touchpoint 3Touchpoint 4Touchpoint 5Touchpoint 6Hi Mom!
  • Segment 1
  • Segment 2


Render Functions are a great way to create totally custom visualizations. An author can pull from third-party javascript libraries, or just write in HTML (including SVG) from scratch. Happy coding.

Next steps!

  • Build one yerself
  • Learn how Export works