Charticulator in Power BI

Sometimes getting the right insights in your data is more complex than any already existing Power BI visual can offer. Maybe you want to display your own branding inside visuals? Or you just like to play around to create the most beautiful and unique visuals. Here, Charticulator enters the field. This open-source project by Microsoft Research is already for some years on the (free) market, but since a few months it’s available as a Certified (!) visual in the Power BI AppSource. In this blog we’ll guide you in creating your own charts directly inside Power BI desktop.

What is Charticulator?

Charticulator is an open-source project created by the Microsoft Research team. You can create custom charts directly in your browser (charticulator.com), then export them as an image, html, or a Power BI visual.

Before Charticulator was available as a AppSource visual in Power BI you had to create the visuals online and export them for use in Power BI Desktop. Times have changed and we can now create custom charts directly in Power BI. The interface in Power BI is almost identical to the online version. Within this article, we’ll be focusing on using the Charticulator inside Power BI Desktop.

Let’s get started!

Open Power BI desktop, in the Visualizations pane, select the 3 dots. Choose “Get More Visuals” & search for “Charticulator”. You see that this visual is created by Microsoft and it’s Power BI Certified. Click ‘Add’ to import the visual.

Now you’ll see that the visual is available at the bottom of the ‘Visualizations’ pane:

Before we can start using Charticulator, we need to get some data.

TIP: I’ll use the sample dataset that’s coming with Power BI Desktop:

Now place the Charticulator visualization on your page and select the data you want to work with.

For example, I’ll use the Product & Sales columns from the Power BI sample dataset. You’ll see the ‘Getting Started’ documentation for Charticulator inside the visual.

Click the 3 dots at the top right of the visual and select ‘Edit’.

Then, you have the choice to either create a chart or import an already existing Charticulator template. Because we’ll be starting from zero, we choose ‘Create Chart’.

Charticulator interface

At first glance you can divide the interface in a couple different parts.

1. At the top you’ll see a toolbar, here you can select different shapes for your chart, create a custom legend, or add guidelines to your chart.
2. The chart canvas: this page will show the chart you’ve created with the actual data you’ve selected.
3. The glyph editor: This is where you create a single point of data for your chart. For example, when you are creating a bar chart, where every bar will be a different product, we’ll create just one bar in the glyph editor that will then be displayed as one bar per product in the “chart canvas”.
4. Layers: You can see & select the different items or layers you’ve created in the “chart canvas” or “glyph editor”.
5. In the Attributes pane you can set the size, color, fonts… of the different items you’ve created.
6. The Fields pane shows all the columns you’ve added to the visual. You can always add or delete columns while creating your chart.
7. Scale pane: Here you’ll see all the items that will have a specific behavior based on your data, for example setting the height of a bar chart based on the sum of the sales column.

Creating a chart

Let’s create our first chart in Charticulator, we’ll create a relatively simple bar by adding a rectangle to our Glyph editor. Notice that I pinned the four green dots (shown in the red rectangles) to the corners of the gridline. By doing this, we’re making sure the bars will take the full potential size. In the chart canvas you’ll see a visual representation for the glyph you’ve created. There are already 6 bars in the chart canvas because Charticulator understands that there are 6 product categories in your dataset.

Of course, we want to make the height of each bar depending on the total sales of that product. This can be done by dragging the ‘Sales’ measure from your fields pane (inside Charticulator) to the height attribute of the rectangle you’ve created in the glyph. Make sure that you’ve selected the right shape in the layers pane before doing this:

By clicking on the height property, we can change the summarization from ‘average’ to ‘sum’.

You’ll notice that the bars in the chart canvas have changed height according to the sales measure.

But we’re still missing some labels for the product category. This can be done the same way as we’ve added the bars to the glyph, now we’ll select the ‘Text’ item & pin it to the bottom center gridline for the product category labels

Now we can change the value of the ‘Text’ attribute to the Product column. If you just want a static X-axis, you can also drag and drop the ‘Text’ field to the X-axis on your chart canvas.

Because the possibilities with Charticulator are almost endless, and we don’t want just a boring bar chart, we’ll spice up the label a little bit to make our bar chart stand out more. Let’s resize the label based on our sales measure, reposition & change some colors. Notice that I moved the label in the Glyph editor to be placed above the green anchor point instead of below. Consequently, the label will never exceed the bottom of bar chart.

Now we have a quite unique bar chart, but we are missing a Y-axis. The easiest way to do this, is by adding a legend. You can select it by clicking on the 2^nd item in the top left corner. Choose ‘Column values’ & select our ‘Sales’ measure, then click ‘Create legend’.

Click ‘Save’ and your chart is ready to be used in your Power BI report! The chart will behave like other (default) Power BI visuals, you can use interactive filtering, highlighting, …

As you’ve seen, the possibilities are almost endless. So the next time you need to create a graph that doesn’t exist as a built in visual in Power BI, you maybe can create it yourself in Charticulator?

At first, working with Charticulator can be a bit challenging, but after playing around, you’ll get the hang of it for sure! Are you still struggling creating the perfect graph? You can always contact us with any questions regarding custom visuals in Charticulator.