Barchart Tutorials

Step by step tutorial

The user story

I’m a cinema manager, I need to know what movie genre has been the most profitable over the years. 🎥

What is the evolution of my revenues per movie genre among the years?

As I’m looking to compare the weight of individual categories over time, let’s do a barchart.


Before you start!

Make sure you added your datasource to your application. Once you’re done create a new story.

Pick some data

All we need to create a nice barchart is two columns: label and value.

  • a label column: this will define the name of each of the bars you want to display
  • a value column: this will define the bar value

You can add other options to make your viz precise :

  • add groups to display several bars for the same
  • add tickFormat to display your dates just the way you want

You can find out more about these different options here 👈.

If you don’t have any data to use, feel free to use our amazing fake data generator Design First!, which is also available in beta mode in the studio.

Chart Parameters

Once I have gathered the data I need, I can choose to configure a barchart.

I just need to fill the label and value fields, and that’s it! ✨

barchart parameters

Other configuration examples

Ex1: With Groups

Add groups to go deepeer in your analysis.

📝 For example, I want to compare movies’ budget by type for this year and last year.
barchart groups

barchart groups

Your dataset should look like this :

barchart dataset

barchart dataset

Add a group option like this  👇
barchart options

barchart options

You’re all set !

Ex2: Heatbar

Want to see the variation/evolution of your different categories? Add a heatbar that would help you vizualy understand if you’re doing better or worst.

📝 For example, I want to compare countries’ revenue and see if they are performing better than last year.
barchart sentiment

barchart sentiment

Simply add a sentiment configuration on your value column:



Here the color depends of the revenue per country : above 50 = you did great, below = 😔 The specificity of the heatbar is that it will also display a label for the sentiment (not just a color). By default the name of your sentiment will be displayed.


For groups, it will be computed for each group (not each bar).

Ex3: Heatbar with custom labels (code mode only)

You want to customize the labels ? You can switch in code mode and add a labels array to the sentiment configuration. The values of the labels array will be matched with the values of the range array. In this example, a ‘negative’ value will be labeled ‘Shame on you!’, a ‘positive’ value will be labeled ‘Congrats!’.

Config file

    domain: [
    range: [
    labels: [
      "Shame on you!"

That’s it!