Blog

How to add drop shadows to lines

Maybe you have a chart template such as a LineChart, ComboChart, or XYChart that uses the old 3D feature on the lines. 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 LineChart. No worries! […]

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

Maybe you have a chart template such as a LineChart, ComboChart, or XYChart that uses the old 3D feature on the lines. 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 LineChart.

Older looking line 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 lines in an old chart to look much better with just a couple changes to your chart template:

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

    Line3DDepth = 0;

    Older looking line chart before enhancement

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

    LineDropShadow = (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:

    LineDropShadow = (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 line 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 LineSymbolSpotlights parameter to add a simulated light source. Combined with the LineDropShadow described in this blog, adding a LineSymbolSpotlights parameter will enhance the depth even further. Stay tuned for the next blog in this series that will feature the LineSymbolSpotlights parameter.

See more information on the LineDropShadow 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 LineDropShadow parameter options allowing for quick styling updates.

NetCharts Pro API users can use the netcharts.pro.common.NFDropShadow class and .setLineDropShadow(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.setLineDropShadow(dropShadow);

Also see related blog posts:
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.