Blog

How to add edge highlights to pies

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

Maybe you have a chart template such as a PieChart or MultiPieChart that is a couple years old and the pie doesn’t pop or look as stylish as you’d wish it would. Your chart may look similar to this PieChart below:

Older looking pie chart before enhancement

In version 7.0, we have introduced a new edge highlights parameter that will allow you to enhance the styling further and will make your charts really stand out and impress! This particular parameter adds a edge that highlights the border around the pie. 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).

All you need to do is to add a PieEdgeHighlights parameter which will simulate a light source coming from the left to complement the shadow. Adding the PieEdgeHighlights parameter to combine it with the PieDropShadow and PieSpotlights parameters already used in this particular example, will allow you to simulate a much more realistic depth effect to your charts.

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 only step required is to add a PieEdgeHighlights parameter into your chart template. This will produce the edge highlights that surrounds the pie. Locate and replace the default PieEdgeHighlights parameter with:

    PieEdgeHighlights = (xffffff_0, x000000_80, 0.0001, 0.09);

    If you would like darker edge highlights you can try this parameter:

    PieEdgeHighlights = (x000000_0, xffffff_102, 0, 0.1);

    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 PieHighlights parameter to add a simulated light source. Combined with the PieDropShadow, PieSpotlights and PieEdgeHighlights in this blog, adding a PieHighlights parameter will enhance the depth even further. Stay tuned for the next blog in this series that will feature the PieHighlights parameter.

See more information on the PieEdgeHighlights 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 the PieEdgeHighlights CDL parameter for you and make the styling tweaks even easier. Included in NetCharts Designer are a couple of default PieEdgeHighlights parameter options allowing for quick styling updates.

NetCharts Pro API users can use the netcharts.pro.charts.pie.NFPieEdgeHighlight and netcharts.pro.charts.pie.NFPieEdgeHighlightSeries classes and the .setPieEdgeHighlightSeries(netcharts.pro.charts.pie.NFPieEdgeHighlightSeries) API to dynamically define the pie edge highlights. For example:

NFPieEdgeHighlightSeries pieEdgeHighlightSeries = new NFPieEdgeHighlightSeries();

NFPieEdgeHighlight pieEdgeHighlight = new NFPieEdgeHighlight();
pieEdgeHighlight.setStart(NFColor.get(“xffffff_0”));
pieEdgeHighlight.setStop(NFColor.get(“xffffff_80”));
pieEdgeHighlight.setGap(0.0001);
pieEdgeHighlight.setSize(0.09);

pieEdgeHighlightSeries.addElement(pieEdgeHighlight);
chart.setPieEdgeHighlightSeries(pieEdgeHighlightSeries);

Also see related blog posts:
How to add spotlights to pies
How to add a drop shadow to pies
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.