Is it possible to make a Thermometer Chart?

September 16, 2013
Design Approaches

Yup, it sure is! It’s actually quite easy to do. Here’s what you’ll need to do:

  1. A basic BarChart with a single Data Set with the chart width set to a smaller value which will be the width of the thermometer.

  3. Add tics on the right axis to match the left side.
  4. Set the bar width value to be 100 percent of the available space. This will fill the bar out so that there will not be any gaps on either sides of the axis.
  5. Finally, add a NoteArrow param set to display as an Ellipse. Here you will likely need to experiment with placement until the ellipse is exactly where you want it.


Now you have a Thermometer chart and that’s basically all there is to it.

At this point I wanted to take it a step further in the styling department as the thermometer was too flat for my liking. Here’s what the same Thermometer chart looks like after I did some additional styling tweaks.


I wanted more depth to the bar so I added a BarFillPattern param. This param controls a color gradient to simulate a cylindrical look for a fancier effect. In order to get a realistic shine to the rounded lower part, a different approach was required. So I replaced the flat Ellipse’s NoteArrow param with an image I made that uses the same colors as the bar. This image was then referenced through a NoteBox param. Finally, as the last touch, I made the thermometer a little smaller.

If you have any questions about this or any other examples, feel free to contact us at

Comments are closed.