Web > Charts

Colors and Style

Known issues

Some chart features have known issues in the current release. See Known issues.

This page covers a chart's colors, palette, and title, and the style settings behind them, for one chart or for every chart in a layout.

Overview

• Layer colors: each layer's "Color:" fields choose a color mode, such as one color, a formula, or a color per series. See Color modes.
• The chart's style: "Style..." on the chart's menu sets this chart's palette, title, padding, border, and tooltip.
• The layout's style: the Style Manager sets the same options for every chart in the layout, and each chart inherits them unless its own style overrides them.

The palette a layer uses in the "Series" color mode is the style's "Partition Colors", and the gradient it uses in the "Gradient" mode is the style's "Gradient Colors".

Changing one chart's style

A chart's own style overrides the layout's for that chart only.

1. In Editor mode, select the chart's edit button, then "Style...". The "Edit Style" window opens.

2. Select a section on the left and change its settings:

   Section	Sets
   "Values"	Fonts, background, selection, border, and divider colors, and the "Partition Colors" and "Gradient Colors" layers draw from
   "Visualization Title"	The title's font and alignment
   "Visualization Padding"	The padding and corner radius around the chart
   "Visualization Shadow"	The shadow around the chart
   "Visualization Border"	The border around the chart
   "Tooltip"	The background color and font of hover text
   "Settings Button"	The icon, size, and color of the chart's settings button in Editor mode

   Each setting starts at "Inherit", taking the layout's value.

3. Select "Submit".

4. Check that the chart shows the change.

The filter box at the top of the window shows only the settings whose names match, such as Gradient.

"Export/Import" in the same window fails, with "Frontend encountered unhandled condition.", so a chart's style cannot be copied from here.

Changing every chart's style

The layout's chart style is in the Style Manager.

1. In Editor mode, select Dashboard -> Style Manager.... A window titled "AMI Styler" opens.
2. In the lower tree, open Layout Default -> Styles -> Panel -> Chart.
3. Change the settings. "VALUES" holds "Partition Colors:" and "Gradient Colors:", and the other sections match the chart's own "Edit Style" window.
4. Check that every chart whose own style is left at "Inherit" shows the change at once.

The same tree has entries for the parts of a chart, under Layout Default -> Styles: "Chart Axis", "Chart Plot", "Crosshair", "Legend", "Annotation", and "Graph Layer", and, under "Panel", "Radial Rendering Layer".

The default "Gradient Colors" run from red through the plot's background color to green, so values in the middle of a gradient almost disappear. See Color modes.

Showing a chart's title

A chart has a title from the moment it is created, but the default style hides it: its "Title Font Size" is 0. To show it, give the title a font size above 0:

1. Open "Edit Style" for the chart, as in Changing one chart's style, and select "Visualization Title".
2. In "Title Font:", open the third box, the size, and choose a size such as "16px".
3. Select "Submit".
4. Check that the title shows at the top left of the chart.

The same setting in the Style Manager shows the title on every chart.

Over MCP, set the chart's style key titlePnlFontSz, such as 16, with web_execute op=setPanelStyle. The title then shows at the top left of the chart. The first setPanelStyle call for charts in a session returns the style keys and changes nothing; call it again to apply the change.

Chart settings

A chart's "Settings..." sets its title and ids.

1. In Editor mode, select the chart's edit button, then "Settings...". The "Settings" window opens.

2. Change the fields, then select "Submit":

   Field	Default	What it sets
   "Owning Layout:"	The layout the chart belongs to, such as <root>	The layout that holds the chart. Not editable here
   "Title:"	The name of the chart's datamodel or table	The chart's title
   "Panel ID:"	The same name	The id that AmiScript and MCP find the chart by
   "User Preferences ID:"	The same name	The id a user's saved preferences for the chart are stored under
   "Zoom"	"On"	"Off" stops users zooming, by dragging or with the mouse wheel
   "Transparency Options"	"Hide"	"Show" adds a button at the bottom left of the chart, which opens "Chart Options" with a "Transparency" slider, 0-100, for each layer

3. Check that the chart behaves as set, such as not zooming when dragged.