DataViz Tip #14: Differentiate Between Actual Values and Estimates

Your viewers should be able to distinguish between factual data and projections or estimates in your visualizations. The most common way to do this is to use a lighter fill for projection/estimate values. This signals to the viewer that these values are less certain than the others.

The easiest way to do this with amCharts column chart is to set a lower opacity on the projection bars. To do that we can supply opacity values in our dataset (say in a field called “Opacity”). Then we set alphaField: "Opacity" on our graph and we are done:

See the Pen DataVizTip14 – Revenue projection by amCharts (@amcharts) on CodePen.

Getting the opacity straight in our dataset would be nice, but it’s not something we can expect to get and a bad separation of concerns in any case. After all your data should represent the information, not the way it looks in a chart. So, a much more elegant solution would be to process the data we have and set the opacity based on data field denoting certain values as projections. We can do it in the init event handler for our chart:

See the Pen DataVizTip14 – Revenue projection – modify data by amCharts (@amcharts) on CodePen.

This way we achieve the same result without messing with our source data.

---

We are giving away a great data visualization book each month! Subscribe to our newsletter to get monthly tips like the one above and you’ll be automatically entered in the sweepstakes to win an awesome book.