Blog

How to add highlights to pies

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: In version 7.0, we have introduced a new highlights parameter that will allow you […]

Author:
Date:
September 18, 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 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 simulated light source reflecting off the top surface of 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 PieHighlights parameter which will simulate a light source coming from the left to complement the shadow. Adding the PieHighlights parameter to combine it with the PieDropShadow, PieSpotlights and PieEdgeHighlights 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 PieHighlights parameter into your chart template. This will produce highlights that reflects off the top surface of the pie. Locate and replace the default PieHighlights parameter with:

    PieHighlights = (GRADIENTHORIZONTAL, xffffff_20, xffffff_0, 180, 0.05, 0.3), (GRADIENTHORIZONTAL, xffffff_0, x000000_40, 0, 0.001, 0.8);

    If you would like stronger highlights as pictured below, you can try this parameter:

    PieHighlights = (GRADIENTHORIZONTAL, xffffff_50, xffffff_0, 180, 0.05, 0.3), (GRADIENTHORIZONTAL, xffffff_0, x000000_60, 0, 0.001, 0.8);

    Updated pie chart after PieHighlights enhancement

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

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

NetCharts Pro API users can use the netcharts.pro.charts.pie.NFPieHighlight and netcharts.pro.charts.pie.NFPieHighlightSeries classes and the .setPieHighlightSeries(netcharts.pro.charts.pie.NFPieHighlightSeries) API to dynamically define the pie highlights. For example:

NFPieHighlightSeries pieHighlightSeries = new NFPieHighlightSeries();

NFPieHighlight pieHighlight1 = new NFPieHighlight();
pieHighlight1.setType(NFBarHighlight.GRADIENTHORIZONTAL);
pieHighlight1.setStart(NFColor.get(“xffffff_20”));
pieHighlight1.setStop(NFColor.get(“xffffff_0”));
pieHighlight1.setAngle(180);
pieHighlight1.setGap(0.05);
pieHighlight1.setExtent(0.3);
pieHighlightSeries.addElement(pieHighlight1);

NFPieHighlight pieHighlight2 = new NFPieHighlight();
pieHighlight2.setType(NFBarHighlight.GRADIENTHORIZONTAL);
pieHighlight2.setStart(NFColor.get(“xffffff_0”));
pieHighlight2.setStop(NFColor.get(“x000000_40”));
pieHighlight2.setAngle(0);
pieHighlight2.setGap(0.01);
pieHighlight2.setExtent(0.8);
pieHighlightSeries.addElement(pieHighlight2);

chart.setPieHighlightSeries(pieHighlightSeries);

See our previous blogs in this series of how to enhance the styling of your pie charts.
How to add edge highlights to pies
How to add spotlights to pies
How to add a drop shadow to pies

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.