Blog

Creating depth with Drop Shadows

Author:
Date:
December 2, 2013
Category:
Chart Polish, Design Approaches

A new and really cool chart feature that we introduced in 7.0 is the capability to add drop shadows. You can now enhance the look of the chart to simulate 3D depth for some really eye catching charts. I find myself using this new param all the time in order to give my charts a little more depth.

Here’s a simple LineChart example without the drop shadow. The look of this chart is simple and flat.

lineSet2_no Drop Shadow

Using the same LineChart example, the LineDropShadow param has now been added. The subtle shadow adds 3D like depth for a nice visual touch.

lineSet2_with Drop Shadow

The param itself also allows you to change the direction of the shadow.

LineDropShadow = (color,offsetx,offsety,size);

Example: LineDropShadow = (x000000_250, 0.01, 0.0090, 0.02);

So with some tweaking, you have the option to place the shadow either on the left side, above or under to simulate light source direction. You will also be able to control the strength of the shadow through a combination of its color and blur area. This will allow you to simulate the strength of the light source and the distance of the bars, lines or pie from its background by blurring the shadow.

Using the latest version of our chart editing tool NetCharts Designer 7.0, you can quickly and easily update older chart templates into the look of version 7.0 that includes the drop shadow feature.

  1. Open NetCharts Designer 7.0, then import your old project and load your pre 7.0 Line chart template.

  2. Line

    It may look something similar to the Line chart shown above.

  3. Click the bottom Presentation tab, then click Lines.

  4. NCD_1_Presentation_tab

  5. In the Lines box locate the Drop Shadow dropdown and set to black.

  6. NCD_2_DropShadow

    You now have a Line chart that has been updated to use the 7.0 drop shadow styling.

    Line_with_DropShadow

    Note: If you would like to modify the drop shadow further as mentioned above it can also be done through NetCharts Designer.

    Simply click on the pencil icon next to the Drop Shadow: drop down.

    NCD_3_PencilIcon

    A new window opens that will allow you to customize the Drop Shadow further.

    NCD_4_CustomizeDropShadow

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

    Comments are closed.