Blog

How to add highlights to bars

Maybe you have a chart template such as a BarChart or ComboChart that is a couple years old and the bars doesn’t pop or look as stylish as you’d wish it would. Your chart may look similar to this BarChart below: In version 7.0, we have introduced a new highlights parameter that will allow you […]

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

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

Older looking bar 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! 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 BarHighlights parameter which will simulate a light source coming from the left to complement the shadow. Adding the BarHighlights parameter to combine it with the BarDropShadow 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 bars in an old chart to look much better with just a couple changes to your chart template:

  1. The only step required is to add a BarHighlights parameter into your chart template.

    BarHighlights = (GRADIENTHORIZONTAL, xffffff_80, xffffff_0, 0.0010, 0.0010, 0.0010, 0.0010, -1, -1, “SQUARE_0.0”, “SQUARE_0.0”, “SQUARE_0.0”, “SQUARE_0.0”), (GRADIENTHORIZONTAL, xffffff_0, x000000_80, 0.0010, -0.09, 0.0010, -0.09, -0.09, -1, “SQUARE_0.0”, “SQUARE_0.0”, “SQUARE_0.0”, “SQUARE_0.0”);

    Updated bar chart after enhancement

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

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

NetCharts Pro API users can use the netcharts.pro.common.barset.NFBarHighlight, netcharts.pro.common.NFCorners and netcharts.pro.common.barset.NFBarHighlightSeries classes and the .setBarHighlightSeries(netcharts.pro.common.barset.NFBarHighlightSeries) API to dynamically define the bar highlights. For example:

NFBarHighlightSeries barHighlightSeries = new NFBarHighlightSeries();
NFBarHighlight barHighlight = new NFBarHighlight();
barHighlight.setType(NFBarHighlight.GRADIENTHORIZONTAL);
barHighlight.setStart(NFColor.get(“xffffff_80”));
barHighlight.setStop(NFColor.get(“xffffff_0”));
barHighlight.setTopGap(0.001);
barHighlight.setBottomGap(0.001);
barHighlight.setLeftGap(0.001);
barHighlight.setRightGap(0.001);
barHighlight.setWidth(-1);
barHighlight.setHeight(-1);

NFCorners barHighlightCorners = new NFCorners();
barHighlightCorners.setTopLeftCornerType(NFCorners.CORNER_SQUARE);
// Same as NFCorners.DEFAULT_CORNER_TYPE
barHighlightCorners.setTopLeftCornerSize(0);
// Same as NFCorners.DEFAULT_CORNER_SIZE
barHighlightCorners.setBottomLeftCornerType(NFCorners.CORNER_SQUARE);
barHighlightCorners.setBottomLeftCornerSize(0);
barHighlightCorners.setTopRightCornerType(NFCorners.CORNER_SQUARE);
barHighlightCorners.setTopRightCornerSize(0);
barHighlightCorners.setBottomRightCornerType(NFCorners.CORNER_SQUARE);
barHighlightCorners.setBottomRightCornerSize(0);
barHighlight.setCorners(barHighlightCorners);

barHighlightSeries.addElement(barHighlight);
chart.setBarHighlightSeries(barHighlightSeries);

Also see our previous blog in this series of how to add a BarDropShadow to enhance the depth even further. Stay tuned for the next blog in this series that will feature the LineDropShadow parameter and show How to add drop shadows to lines.

See related blog posts:
Add some shine to your charts
How to update pre 7.0 chart templates into the new 7.0 look

Comments are closed.