Formatting Charts

You can access the formatting options from the Format tab, as shown in the following image.

General options display, by default, but you can use the Quick Access menu to select a different aspect of your chart, for example, Legend, Axis, Series, or Matrix options, as shown in the following image.

Different options are available, depending on the chart type.

Once you select an area of your chart to modify (for example, Axis), you can use the intuitive options and menus to make selections, as shown in the following image.

You can also access styling options by right-clicking an area of your chart, such as a riser or axis label, and clicking Style.

Note: If you are working with a map, reference lines, or data grids, additional tabs will display, enabling you to make formatting changes to these components. These tabs do not display, by default.

By streamlining formatting options in one place, you can quickly format charts to enhance the display of your data. Whether it be color-coding a series in a chart or changing the font size of your data labels, a customized, formatted chart is just a click away.

How to: Change the Font Type in Your Chart

You can use the font formatter in WebFOCUS Designer to control how fonts are displayed in your chart. This is a quick way to apply styling, colors, or a specific font type for any text within your chart. The font formatter displays in different areas of the Format tab (for example, Legend, Axis, Series, and Matrix options). Depending on the chart type and what you want to format, you can use these options to enhance the fonts in your charts. The font formatter is shown in the following image.

You can also change the font of a header or footer in your chart. This allows you to control how a chart is labeled or highlighted, which is useful when the chart will be distributed. For headers and footers, you can:

When reviewing text that displays in your chart, you might want to increase the font size of the header text to enhance its visibility. Editing the font types and styles in your chart gives you more control over how information is displayed and presented.

How to: Add Headings and Footings to a Chart

You can use headers and footers to add key information, such as the purpose of the chart and the audience. For example, if you have gross profit for different product categories, you can add a header to highlight this information in your chart.

You can add multiple lines of information into the heading and footing areas in a chart. This accommodates thorough explanations and additional information while offering the most readable presentation.

You add a new line in the heading and footing by pressing the Enter key. The number of lines of heading and footing you can add to a chart is only limited by the available real estate on the chart. The chart body will adjust to fit within the available space with the heading/footing lines inserted. You can change the font size or other presentation aspects using the editing toolbar that displays. When you are finished editing the heading and footing and edit mode is closed, the chart canvas adjusts to ensure that all lines of the heading or footing are visible, as shown in the following image.

Headers and footers can contain the same type of information. Footers are not enabled, by default, but can be enabled from the Content area on the Settings tab, as shown in the following image.

You can make styling changes to the information in your headers and footers, which allows you to interactively style the text according to your preferences. Using a WYSIWYG canvas, it delivers formatting changes instantly, allowing you to see the results of your selections as you make them. When editing your header or footer, you can find the options at the top of the canvas, as shown in the following image.

You can change the font and font size using the drop-down lists. You can add bold, italic, and underline accents to your text. In addition, you can change the positioning of your text (left, center, and right). You can also customize the color of the text, as well as the background of the header or footer text area. When your formatting is complete, you can close the toolbar and continue working with your chart.

Note: You can double-click the heading or footing to resume modifications at any time.

To access the legend formatting options, click the Format tab. From the quick access list at the top of the tab, select Legend. The Legend formatting options display in the following image.

Use the On, Off, and Auto buttons to control how the Legend appears on your chart. You can optionally select On or Off, depending on whether you want to display the legend in your chart. The legend display setting is set to Auto, by default, which displays the legend only if there are multiple series in the chart.

Note: Occasionally, charts are large and require additional real estate. Hiding the legend, or turning it off, enables you to preserve additional room as required by the chart.

Under Labels, you can format the font used for the label text in your legend. These options include Font type, Style, Size, and Color.

Depending on the type of chart you use, adding data to a specific field automatically generates a title for the chart legend. For example, the following image displays a matrix marker chart that allows you to compare the differences between values by circle size. Since the measure Gross Profit has been added to the Size bucket, the legend title for this chart shows as Gross Profit, which is highlighted in the following image.

Under Titles on the Format tab, you can choose to show or hide the legend title with the Show Titles check box. You can also choose the font style and formatting of the legend title.

Under Other on the Format tab, you can perform tasks such as changing the position, setting the background color, and setting the border line width, size, and color. You also have options to display the legend options in reverse order and set it as collapsible.

In this section: Controlling the Display of Time-Based Axes

How to: Format Axes

Depending on the chart type (for example, bar chart), you can format the axes to customize the display of the information. This includes items such as labels, titles, and font formatting. For example, you can choose to hide the labels in your chart or format the font to add clarity to your chart. You can easily customize the X and Y axis with options that suit your needs. To access these options, select Axis from the quick access menu on the Format tab. Other options, such as dual-axis, bi-polar axis, and split axis behavior, and a continuous time axis, are available by right-clicking a field once it has been added to your chart or using the menu next to the Vertical bucket.

You can rotate the labels in your axes as well as stagger them. This allows you to shift the display of information, which is particularly useful when your chart is very dense. You can modify the lines for individual axes, enhancing the frame of the axis on the chart. You can also show ticks, which allows you to view milestones in your data. You can also change the position of an axis, enabling you to dictate where your axis information will display (for example, right). The options on the Format tab for formatting an axis are shown in the following image.

In bar, line, and area charts, you can control x axis scrolling behavior from the Scroll menu. By default, the Scroll option is set to On and the scrollbar is enabled. When a large number of values are displayed on the x axis, a scrollbar generates so that they all have enough space to fit comfortably in the visible area of the chart. To disable the scrollbar, set the Scroll option to Off. When the scrollbar is not enabled, points and labels are compressed to fill the area occupied by the chart. As an alternative to the basic scrollbar, set the Scroll option to MiniChart. Instead of using a basic, default scrollbar setting, the minichart option provides a simplified image of the chart, with a transparent scrollbar, as shown in the following image.

You can point to the edge of the minichart scrollbar and use the double-headed arrow cursor to change the visible area of the chart by expanding or contracting the scrollbar. To set the default minichart scrollbar size, use the Count property that appears on the Format tab when you select the MiniChart option. The count represents the number of values initially visible on the x axis. For example, the default Count value of 10 means that a maximum of 10 values display in the chart at all times, regardless of the physical width of the chart area.

In bar, line, and area charts, you can also choose whether the y axis, or vertical axis, should be shared between all measures, or split so that each measure is separated and generates separate bars, lines, or areas. By default, the axis is blended, so all measures share the same y axis. To split the y axis, on the Settings tab, click the menu next to the Vertical bucket (or Horizontal bucket if the axes have been swapped), and click Split axis, as shown in the following image.

This option is especially useful if there are large disparities between the values of different measure fields. For example, the revenue values in a data source may be many times greater than the quantity sold values. To merge the axes back together, click the same menu, and then click Blended axis.

Alternatively, if you want to split the measure fields in a bar, line, or area chart into groups on separate axes, you can use the bi-polar axis option. The bi-polar axis option creates a second set of axes to which you can add some of your measure fields, instead of splitting each measure onto a separate axis. To enable this option, click the menu next to the Vertical bucket and then click Bi-Polar axis. To switch the y-axis that a measure field uses in bi-polar axis mode, click the axis icon next to the field in the measure bucket, or right-click a measure field and click Top Axis (Y1) or Bottom Axis (Y2).

When creating a bi-polar axis chart, it may be useful to change the chart type of the risers for one of the measures on an axis to differentiate it. Right-click the measure field in the Vertical bucket (or the Horizontal bucket if the axes have been swapped), point to Shape, and choose whether the chart type for that measure should be bar, line, or area. The following image shows a bi-polar axis chart in which the Cost of Goods field is represented by a line chart.

Another way to show multiple measure fields on separate axes is to use dual axes. Instead of splitting the chart into horizontal sections, one or more measure field is plotted against the y1 axis on the left, and the other uses the y2 axis on the right. To specify which axis a measure field should use, when the Blended axis option is selected, click the axis icon next to the field in the measure bucket, or right-click the field and click Left Axis (Y1) or Right Axis (Y2). Each of these axes can be styled separately from the Axis options on the Format tab. When using dual axes, take note of which axis is used for each measure, as the values displayed in the chart may visually appear to be closer than they are in reality.

The same options are available for horizontal bar, area, and line charts, but affect the x axis, or horizontal axis, instead.

How to: Format a Series

A series represents a set of related values in a chart. These could be different measure fields in a chart, or different dimension field values in a chart. You can format all series together, or format each separately, including color, shape, display options for labels, and other options, including the ability to hide overlapping labels. You can select a specific series in a chart to which to apply changes, or you can select All Series, which applies changes to all series in the chart.

Having the ability to format by series gives you control over your content and allows you to customize display options at the series level. For example, you might want to color code a chart based on a range of values. You can also specify options for the data labels of the series. By default, these are enabled or hidden automatically depending on the chart type, but can be turned on or off. You also have the standard suite of font options, as shown in the following image.

Different kinds of charts allow you to make different series-level style changes. For example, in a bar, area, or line chart you can set the width of all bars, or change a series to display as a line or area instead of a bar or bar segment. In a ring pie chart, you can change the size of the hole in the middle when viewing the options for all series, and on a scatter plot or bar, area, or line chart, you can add and style a trend line with different formulas for all series or an individual series. Other chart types allow different styling changes.

Additionally, some series styling options are only available when modifying all series in a chart, or only available when editing a single series. For example, when creating a bar chart, you can set the bar width for all series, but not for a single series. On the other hand, you can change the fill color for a single series, but not for all series in the chart.

When working with series in a chart, you can also set an option to control the display of data labels in your chart. The default is Auto. This gives you the ability to specify how your data will be presented (for example, by Value or Percentage), which is particularly useful in cases where you want to save real estate when using data labels in your chart, or show additional information. You can click the drop down to access a full list of content options, as shown in the following image.

You can use the following terms to decide the best way to display the content of your data labels.

• Auto. The chart engine decides what data label information to show. This is usually the value.
• Label. Shows the series label of the riser, marker, or slice (same as legend label)
• Value. Shows the value of the riser, marker, or slice, using the numeric format of the field. For example, if the field defined in the master file is US Currency with two decimal places of precision, then that is what the dataLabel will be ($123.45).
• Percentage. Shows the percentage of the riser/slice based on the group to which it belongs.
• Value,Percentage. Shows the value of the riser, marker, or slice, with numeric formatting and the percentage of the riser/slice based on the group to which it belongs.
• Label,Value. Shows the series label of the riser, marker, or slice (same as legend label) and the value of the riser, marker, or slice, with numeric formatting.
• Label,Percentage. Shows the series label of the riser, marker, or slice (same as legend label) and the percentage of the riser/slice based on the group to which it belongs.
• Label,Value,Percentage. Shows the series label of the riser, marker, or slice (same as legend label), as well as the value of the riser, marker, or slice, with numeric formatting. It also shows the percentage of the riser/slice based on the group to which it belongs.

When creating a stacked bar, stacked area, or stacked line chart, you can also select the Show stacked totals option to show the summed total of all series at the top of each bar or sort-value point.

You can also Wrap Data labels, which allows you to truncate available chart space or show your data on multiple lines. The following examples show how the wrapping option works.

Example of WrapDataLabel=True:

"France

$123.4

23.4%"

Example of WrapDataLabel=False:

"France, $123.4, 23.4%"

Specifically, the data label options allow you to determine what is shown when Show label is ON. For example, Label,Value,Percentage. If the option is set to Auto, the chart engine decides what it thinks is the best content to show. Typically, this is the value of the riser or slice. For example, on a basic pie chart, the Auto setting produces the following result.

You have additional content choices. For example, you can choose Label, which corresponds to the series label that is shown in the legend. When you select the Label option, you also have the option of turning the legend off, so as not to duplicate the information that is displaying in your chart. The Label option is shown in the following image.

You can also choose Percent, which shows the percentage of the whole for each riser or slice. This is very useful for a pie or stacked bar chart, as these are the charts that are best used to visualize the concept of percentage-related content, as shown in the following image.

You can also display the Value, which is the riser/slice value. This is often the same thing you will get if you choose Auto.

There are also options for you to combine three choices, such as Value, Label, and Percent. This allows you to display all three items, as shown in the following image.

Click Wrap Data labels to display the content on three separate, unique lines, or clear the Wrap Data labels check box to display all label information on a single line.

How to: Format a Matrix Chart

If you are working with a chart type that supports a matrix format (for example, Matrix Marker, or another chart type utilizing matrix rows and columns), WebFOCUS Designer provides a selection of formatting options that you can use to customize and enhance the styling of your chart. A matrix format is a grid that contains values based on the intersecting data points, which is useful for reviewing changes and trends over time. Available formatting options for matrix charts include Headers and labels, and Lines, as shown in the following image.

You can customize the row and column headers and their corresponding values in a matrix chart. Specifically, you can change the font type, font size, and color. You can also change the emphasis of the font using bold or italic styling. You can also change the alignment of row values text.

When working with lines in your matrix chart, you can change the line style (for example, solid or dotted) and the thickness. These formatting options allow you to make visible enhancements that will improve the appearance and presentation of your matrix charts.

How to: Format a Data Grid

A data grid is a type of chart that displays a tabular representation of your data, similar in structure to a tabular report. A data grid allows you to review data in a row and column format, similar to a printed report. Data grids are easy to create, and provide features such as a tooltip for each cell of the grid. WebFOCUS Designer provides numerous options to style and format a data grid.

Values in a data grid can be sorted, and data grids can be shared or saved for use on a page. A data grid is shown in the following image.

You can format a data grid using the options on the Format tab. The Format tab contains two sets of options, General and Datagrid options, which you can access using the quick access menu, as shown in the following image.

The General section provides a set of options that are common to all chart types. These options are divided into three sections: Theme, Frame and background, and Other.

The Theme section provides a menu that allows you to select a StyleSheet to automatically format the data grid. You can select from a list of themes available with WebFOCUS, or click Custom to select a StyleSheet from the legacy templates or your repository.

The Frame and background section includes the following options:

• Background. Allows you to select a color for the background area behind the data grid.
• Frame. Allows you to select a color for the chart frame. This option allows you to change the data cell fill color in the data grid.
• Frame Border. The Frame Border settings are not applied to data grids. To style the borders in the data grid, use the Border style settings under Headers and values in Datagrid options.

The Other section includes the following options:

• Fit to container. This option does not apply to data grids. It is used for bar, line, area, and scatter plot chart types.
• Hide null groups. When selected, if any rows or columns in the grid do not contain any data, they are hidden at run time.
• Show null as zeroes. When selected, cells for which no data is returned show a value of zero (0). When not selected, cells with no data appear blank, which is the default.

You can also select styling options that are specific to data grids. These are listed when Datagrid options is selected from the quick access menu on the Format tab. You can also access these options by right-clicking an area of the data grid and clicking Style.

The Datagrid options are divided into three sections: Headers and values, Background and padding, and Other.

The Headers and values section allows you to define the styling properties of the item selected from the Headers and values menu. You can set these properties for the row headers, column headers, cell values, and column totals. The Headers and values section contains the following options for each area of the data grid.

• Format. Allows you to select the font, text formatting, font size and units, and text color.
• Alignment. Allows you to set the text alignment to the left, center, or right side of the cells.
• Border style. Allows you select the line style (for example, solid, dashed, or dotted), thickness, and color of the cell borders.

The Background and padding section allows you to style the cells in the data grid by adding bands and increasing the cell padding. Options in this section include the following:

• Row color. Allows you to add bands to the data grid to make the rows easier to distinguish. Select the Alternate row color check box to add alternating bands to the data grid and select a color from the Color picker to style them.
• Vertical padding. Allows you to set the vertical padding, in pixels, between the text and borders of each cell.
• Horizontal padding. Allows you to set the horizontal padding, in pixels, between the text and borders of each cell.

The Other section allows you to add column totals to the data grid and freeze column and row headers. The options in this section are as follows:

• Show column total. When selected, adds a column total row to the data grid. This row can be styled by selecting Totals in the Headers and values section. Show column total is not selected, by default.
• Freeze column headers. When the data grid uses a vertical scrollbar, selecting Freeze column headers keeps the column headers in place while scrolling so that you can see which column each cell belongs to. When not selected, the column headers are not frozen when scrolling. Column headers are frozen, by default.
• Freeze row headers. When the data grid uses a horizontal scrollbar, selecting Freeze row headers keeps the row headers in place while scrolling so that you can see which row each cell belongs to. When deselected, the row headers are not frozen when scrolling. Row headers are frozen by default.
• Fit to container width. When this check box is selected, the grid spans the entire width of its container. When this check box is not selected, the grid width is only as wide as is needed to show each column header fully.

How to: Add a Theme to a Chart

A theme is used to determine the coloring and hues that display in the charts you configure using WebFOCUS Designer. For example, the default border color and chart colors are determined by the theme.

When creating stand-alone content, the default theme is Designer 2018. When you turn the visualization into a page by adding a second new content item, the theme used for the chart is applied to the page. When you add items to the page, either by creating them or adding them as external content, the page theme is used as the default for all content items. You can then change the theme for each individual item.

You can use one of the themes included with WebFOCUS, or you can create your own theme. For example, you may want to apply a corporate standard theme to your chart. You can add and change themes to suit your requirements (for example, branding).

Available themes that are called by WebFOCUS Designer are located in the Themes folder in the Global Resources area, accessible from the Workspaces tab of the WebFOCUS Hub or Home Page, as shown in the following image. Custom themes can be added to folders within the Custom folder.

Supported formats for themes include .css and .sty. A .css theme file is used to style a page, while .sty file is used to style content such as charts and reports. When files called theme.css and theme.sty are placed into the same folder in the custom themes folder of the Global Resources area, they are available for selection in WebFOCUS when editing page components and content items. The two files are associated, so when the .css theme file is applied to a page, the associated .sty theme file is applied to new content in that page, by default. Similarly, if you select a theme for a chart, which uses the .sty file, then when you convert to a page, the associated .css file is used as the default page theme.

You can develop your own theme using the WebFOCUS text editor and then access it in WebFOCUS Designer. You can customize the .sty theme file used for charts and reports by specifying a set of default property values in it. For information on the properties that you can use in the theme to style a chart, see the Creating HTML5 Charts With WebFOCUS Language PDF.

Tip: You can use the code from an existing theme as a model when creating a new theme.

Note: Charts and reports created for use on pages can use a transparent background to allow the defined background color of the page containers to show through. Since the themes used for charts and reports (.sty files) can be associated with themes for pages (.css files), you can coordinate the background, text, and element colors used in both themes to create content with unified styling. At design time, the page theme associated with the chart or report theme is used for the canvas background. This is for visibility purposes only, and shows how the chart or report will appear when added to a page with the associated theme. The stand-alone chart or report does not include this background.

If a chart or report is run stand-alone instead of being added to a page, the run-time view displays a white background only. This means that if, in order to display on a dark colored page, the font color in the selected theme is defined as white and uses a transparent chart background, then the text will not be visible on the white preview background. An example of such a theme is the Midnight theme, provided as one of the default themes in the Global Resources. To view the white text, build your chart or report on the canvas, add it to a page container with a dark background, or change the chart background color from the Format tab. Note that a non-transparent chart background is layered in front of the panel background when the chart is part of a page.

How to: Add Color to Your Chart Change the Color Scale in a Chart

By adding color to your chart components, you can change the way information is perceived and plays a large role in the effectiveness of your chart.

Color adds contrast to your charts, giving you an advantage in presenting unique, well-balanced content. You can use color to highlight a specific aspect or outcome on your chart. WebFOCUS Designer provides a color picker to add color and style your chart.

You can access the color picker in two primary ways: on the Format tab and at the top of the canvas when formatting headers and footers. Using these options, you can change the color of different components to style your chart. You can indicate color values and ranges to highlight data. You can color a chart component (for example, a header or axis), text, or even add colored lines to accentuate the background grid of your data. You can also change the theme, which changes the color palette and background of your chart.

The following image shows an example of color options that display on the Format tab (with the palette exposed), which you will also see in other areas where color formatting is supported:

The following image shows the options that display at the top of the canvas (with the palette exposed) when working with headers and footers.

Note: When specifying a theme, you can use the default or specify another one. The colors stored for the theme are part of the underlying .css or .sty file, which contains the color schemes.

In WebFOCUS Designer, the color picker supports a colorspace and a palette-based approach, as shown in the following image.

You can access the color picker from any of the sections on the Format tab. You can also access the color picker when working with headers and footers. When you access the color picker, the color picker displays the Palette tab, by default. From this tab, you can select from up to 20 pre-defined color options. You can also select the No Fill option, which displays the selected content as transparent. This is particularly useful in cases where you might want to prevent (or hide) the display of information.

The More tab allows you to choose a custom color by interacting with a hue wheel and the color value field, as shown in the following image.

You can specify an exact color code (hexadecimal or HTML) by entering it in the color value field located at the top of this tab, and also specify transparency by using the transparency slider.

Note: When a custom color is selected and you click OK, the color is automatically added to the Custom Colors section in the Palette tab.

You can also set a color range for a measure in your chart. This allows you to specify hues or ranges of color for use in your chart. In cases where Theme is not selected, the color specification overrides what is available in the theme. The color that you select dictates the legend, which in turn displays the various chart components, based on the colors and measurements specified.

To change the color scale options, right-click a measure in the Color bucket and select Set color ranges, as shown in the following image.

This invokes a new dialog box, Set Color Ranges, where you can select a color range for your chart, as shown in the following image.

When you make a selection, you can override the color schemes that are available from the theme of your chart. Theme is selected, by default. You can select a different color range, such as Green or Red/Orange, from the list of options, which gives you more control over how color is used in your chart to create contrasts between various aspects. For example, if your chart displays different temperature values using a measure in the Color bucket, you may wish to use the Red/White/Blue option to intuitively show higher temperature values in red and lower ones in blue

If you change the color range to something other than Theme, it is written as inline styling in the .fex file. Inline styling always overrides what is in the StyleSheet because it is listed after it in the .fex file. In this case, the last setting indicates which styling takes precedence. When the color range is set back to Theme, the inline styling is removed so the behavior returns to the theme's settings.

This behavior does not affect your ability to change themes on the Format tab. However, if you change the theme with an inline setting in place, the settings of the Theme will still be overridden by the inline settings and the color scale in the legend will not be affected. The current procedure only respects the current theme's settings if the color range setting is set to Theme.

In the Set Color Ranges dialog box, you can also select Continuous or Discrete to determine how the color scale is generated. When Continuous is selected, the color scale is a gradient, and each color in the color scale represents a different value. When Discrete is selected, the color scale is divided into segments. Each color in the color scale represents a range of values.

The following image shows a matrix marker chart that uses the Red/Yellow/Green color scale with the Continuous option selected.

The Continuous option creates a more granular color scale, allowing you to see slight differences between similarly colored chart components.

The following image shows the same chart, with the Discrete option selected.

The Discrete option creates identifiable groups based on sections of the color scale.

When using the Theme color scale option, the default color scale type and number of segments in discrete mode are dependent on the values of the colorScale property in the theme that you are using. For example, if 5 colors are listed for the colorScale property in StyleSheet being used as your theme, then 5 colors display in the color scale when the discrete option is used.