Customizing Charts in the Chart Plus Web Part

If there's one thing that Starbucks has taught us, it's that we can take something that's already good and make it better through customization.

The same concept applies to our Chart Plus Web Part: It creates attractive charts with just a few steps, but maybe you're drinking a venti soy white mocha, extra shot of espresso, half caf, half decaf, with whip and sprinkles, and you're thinking, What more can I do? A lot more, actually–the Chart Plus Web Part allows you to customize your charts using the configuration tool pane or the Custom Style Sheet.

Here's how: 

Adding a Title to Your Chart
1. To add a title to your chart, navigate to the chart you want to customize.

original chart

2. Open the configuration tool pane by clicking the arrrow on the right side of the Web Part and selecting Modify Shared Web Part.

modify shared web part

3. In the configuration tool pane, type in the title you want in the Chart Title field. Choose whether you want your title to be displayed inside or outside of the plot area.

enter chart title

Click Apply, then OK. Your title is now displayed.

customized title

Changing the Chart Type and Colors
1. Open the configuration tool pane by following steps 1-2 above. In the configuration tool pane, scroll down to Columns Setting.

columns setting

In this section under Chart Type, you can choose the chart type to be displayed. Click Apply, then OK.

choose chart type

You can also customize the colors displayed in the chart, either by using the preconfigured Chart Templates

choose preconfigured chart template 

or by using the Custom Color option, which lets you assign a specific color for each column.

choose custom colors

choose custom colors

2. After you make your selections, click Apply and then OK. Your chart is now customized.

customized chart

Customizing the Style Sheet
For more specific customization, you can edit the Style Sheet, located at the bottom of the configuration tool pane.

Open the configuration tool pane by following steps 1-2 above. Select Custom Settings from the Style Sheet drop-down menu and click Edit.

edit custom style sheet

The Custom Style Sheet is displayed.

Custom Style Sheet

You can modify portions of the Style Sheet to customize the chart:

Customizing the Chart Title
In the Style Sheet, locate the Title tag.

title tag

In the Title tag, you can customize the font, the text size, the text color and more. Make your changes and select Save, Apply and OK. In the example below, the font was changed to Verdana, 10pt, black, with a left horizontal alignment (HAlignment).

customized title

Customizing the Plot Area
In the Style Sheet, locate the Plot Area tag.

plot area tag

You can customize the color and shape of the Plot Area, add borders and more. Make your changes and select Save, Apply and OK. In the example below, the Main Color was changed to Blue.

customized plot area

Customizing the Chart Legend
Locate the Legend tag in the Style Sheet.

legend tag

You can customize the font, text size, text color and more in the Chart Legend. Make your changes and select Save, Apply and OK. In the example below, the font was changed to Couric, 14pt, and the Main Color was changed to light gray.customized chart legend

Additional Customizations
You can use the Style Sheet to make additional customizations to your chart, including customizing the font, text size and text color for both the X and Y axes. Locate the tag you want to customize, make your changes, and select Save, Apply and OK.

 

…Oh, and in case you were wondering, my preferred drink of choice is a grande caramel latte, skim, extra pump of caramel, hold the whip. What's yours?