top of page

Welcome
to NumpyNinja Blogs

NumpyNinja: Blogs. Demystifying Tech,

One Blog at a Time.
Millions of views. 

How to create a 3D Cylinder Progress Chart in Tableau

Introduction

A 3D cylinder progress chart is a visible fascinating way to show percentage attainment or development toward the goal. The 3D cylinder appears moderately filled with color, making it excellent for dashboards.


In this blog, you will learn how to build a cylinder style progress chart in Tableau like the one which is shown below, where each merchandise displays its attainment percentage inside a vertical cylinder.


When to use cylinder chart

Use a 3D cylinder progress chart when you want to:

  1. Display percentage achievement 

  2. Add a modern, information style visual to executive dashboard.

  3. Clearly display percentage achievement toward a target

  4. Compare progress across multiple categories such as Products, Departments, or Regions

  5. Add a modern, visually rich element to dashboards

  6. Highlight KPI performance in executive or management reports


Common use cases

  • Sales target achievement

  • Project or milestone completion

  • Budget utilization

  • KPI or performance score tracking

Typical use cases include sales target achievement or project completion. Here we are going to see the 3D cylinder progress chart creation in detail.



created own Data set with two fields,

  • Product – represents different product categories

  • Product Ratio – represents the percentage achievement for each product (values between 0 and 100)

This simple structure makes it easy to focus on the visualization logic without conditional on complex data sources. The Product Ratio field is used to control how much of each cylinder is filled, visually representing progress or target attainment for every product.


Step-by-Step: Create a Cylinder Progress Chart in Tableau

Step 1: Connect to Your Data

  1. Open Tableau and go to Data connection Menu.

  2. Click on Add and select your respective data source types ( Excel, CSV, database)) and import your data.

 

 

 


Step 2: Connect to Your Data for path

  1. Create an excel sheet and name it as path.

  2. Copy the values 0 to 100 as below and paste it.

0
100
  1. Import the data source path into the workbook.


Now, You should be able to see two data sources imported into your workbook as show in the following screenshot.




Step 3: Create join conditions

After creating the clipboard, we need to do a left outer join with the product table.

  • Drag and drop the sheet1 to the join board

  • A join pop up will appear, here select the 'Create Join Calculation' option from drop down menu.

  • Go to create join calculation and enter "1 " and click OK.

  • Now click on the outer join condition and select the 'Create Join Calculation' option from drop down menu.

  • Go to create join calculation and enter "1 " and click OK.


After this step you can see the merged data as shown below.

 


In Tableau public join 1 on both joining condition then automatically clipboard will be created. Two rows for each product, one with path value of 0 and other with path value of 100

 


 Step 4: Create new chart

  1. Drag Product to the Columns shelf.

  2. Right click on path new and select create bin.

  3. Set the path bin size to one and click apply.

  4. Drag path bin to the row shelf and make sure show missing values are enabled in the properties.

  5. Then drag path bin and add to detail.


 

 

 Step 5: Create Index and Row Calculated fields


Create the following calculated fields with the rules given below:

 

Calculation field name: Index 

100-INDEX()

Calculation field name: Value

WINDOW_MAX(MAX([Profit Ratio]))
Calculation field name: Row 

IF [index] <= [value]THEN [index] ELSE NULL

END

Step 6: Build the Filled Cylinder


  1. Drag the row to Row shelf .once i bring it here everything will be disappear. Because we have to compute using path bin.

  2. Change the Marks type to Shape.

  3. Drag product into the shapes.

  4. All the bars are changed different shapes.

 

 

 5.     All the bars created with different shapes, we need cylindrical shapes so click the shapes under marks..



We have now created our 3D cylinder Chart, you have to download the cylinder shapes from the internet and save it in the Shape Repository. Shape Repository can be found inside My tableau Repository similar to the directory “~\My Tableau Repository\Shapes", save your downloaded shapes to this directory.

In this case I used different color cylinders for each product. Once all the products assigned with shapes then click 'OK'. Now, all the cylinders appear in different colors and looks pretty. You need to adjust the size of cylinder as required.

After these updates, the chart looks like the below image.


 

 

Bring the value column into the Label under marks. This will make the value appear at the bottom of the cylinder. Now to adjust the Alignment, select the label and edit the size of the font and click 'OK'. Then select the alignment 'top'.


Step 7: Create the Cylinder Background


  1. Drag index to Rows Shelf

  2. Use Dual Axis and synchronize axis.

  3. Set the background color to light grey.

  4. Select shapes under marks , i have downloaded grey cylindrical shape from internet.

  5. Give light grey for all shapes.

  6. Increase the size slightly so it acts as a containers for the existing cylinders.


This creates the illusion of a filled cylinder inside a tube.



 

       

Step 8: Add Top Cap and Labels

  1. Add a circle or rounded shape at the top to represent the liquid surface.

  2. Drag Value to Label.

  3. Format the label as a percentage.

  4. Place the label just above the filled portion.


Conclusion

Tableau does not make cylinder charts by itself, it is a combination of shapes, path, and dual axis which allows you to create great custom visuals. Cylinder charts are especially useful when you want to upgrade your dashboard design while keeping the cylinder chart directions easy to understand.



+1 (302) 200-8320

NumPy_Ninja_Logo (1).png

Numpy Ninja Inc. 8 The Grn Ste A Dover, DE 19901

© Copyright 2025 by Numpy Ninja Inc.

  • Twitter
  • LinkedIn
bottom of page