Blog

How to add a drop shadow to pies

You may have a chart template such as a PieChart or MultiPieChart that uses the old 3D feature on the Pie. Or maybe your chart is a couple years old and doesn’t pop or look as stylish as you’d wish it would. If so the chart may look similar to this PieChart. No worries! In […]

Author:
Date:
September 11, 2015
Category:
Chart Polish, Design Approaches, Developer Products, NetCharts Pro

You may have a chart template such as a PieChart or MultiPieChart that uses the old 3D feature on the Pie. Or maybe your chart is a couple years old and doesn’t pop or look as stylish as you’d wish it would. If so the chart may look similar to this PieChart.

Older looking pie chart before enhancement

No worries! In version 7.0, we have introduced a new shadows feature that will allow you to simulate a much more realistic depth effect to your charts. Adding this new parameter is quite simple and best of all, you don’t need to learn or be fluent in our Chart Definition Language (CDL).

In this blog we will guide you through the simple steps of updating the pies in an older chart to look much better with just a couple changes to your chart template:

  1. The first step is to modify the Pie3DDepth parameter. Locate the Pie3DDepth parameter and set its value to zero. This will remove the 3D depth effect:

    Pie3DDepth = 0;

    blog_pie_HowToAddDropShadowsToPies_step1

  2. Finally, let’s add the PieDropShadow parameter which adds a shadow behind the pie for more depth.

    PieDropShadow = (x000000_110, 0.01, 0.0090, 0.02);

    If you prefer adding a shadow that is a little darker with a stronger contrast than shown in the image below you can use this parameter:

    PieDropShadow = (x000000_250, 0.01, 0.0090, 0.02);

    Note: The values of this parameter can also be modified further to change the shadow placement to match your preference.

    Updated pie chart after enhancement

That’s it, you are done. Your chart has now been updated with a new stylish look!

To enhance the styling even further, we recommend also using the PieSpotlights parameter to add a simulated light source. Combined with the PieDropShadow, adding a PieSpotlights param will enhance the depth even further. Stay tuned for the next blog in this series that will feature the PieSpotlights parameter and How to add spotlights to pies.

See more information on the PieDropShadow parameter in our CDL Reference Guide here:
NetCharts Pro – Visual Mining CDL Reference for v7.2 Products (PDF)
NetCharts Pro – Visual Mining Online CDL Reference Guide for v7.2 Products (HTML)

Our data visualization tool and design studio NetCharts Designer can be used to generate these CDL parameters for you and make the styling tweaks even easier. Included in NetCharts Designer are a couple of default PieDropShadow parameter options allowing for quick styling updates.

NetCharts Pro API users can use the netcharts.pro.common.NFDropShadow class and .setPieDropShadow(netcharts.pro.common.NFDropShadow) API to dynamically define the drop shadow. For example:

NFDropShadow dropShadow = new NFDropShadow();
dropShadow.setColor(new Color(0, 0, 0, 110));
dropShadow.setOffsetX(0.01);
dropShadow.setOffsetY(0.009);
dropShadow.setSize(0.02);
chart.setPieDropShadow(dropShadow);

Also see related blog posts:
How to add symbol spotlights to lines
How to add drop shadows to lines
How to add highlights to bars
How to add drop shadows to bars
Good and Not So Good Ideas of chart design – 3D Depth
How to update pre 7.0 chart templates into the new 7.0 look

If you have any questions, feel free to contact us at support@visualmining.com.

Comments are closed.