MicroCharts

An indepth look at microchart features and usage.

Introduction

MicroCharts are miniature versions of actual charts, designed to help viewers understand complex relationships between data in repetitive scenarios such as data grids. MicroCharts are defined using a markup syntax inside chart label text. This means that anywhere a label is used, a microChart can easily be embedded. With the use of tokens, microCharts can be setup using default properties and will automatically represent the label's parent objects token values.

Basic Usage

To use a microChart in a label, the syntax starts with '<chart' then other options ending with a closing '>' character. Attributes must be specified using a format like param='value' however quotes are optional if the value doesn't have spaces.

{ title_label_text: '<chart type="bar" value="5" max="10">' }

MicroChart Types

MicroChart Common Attributes

• type
  The microchart type.
• data
  The value or comma delimited list of values to chart.
• color
  Specifies a color for micro charts that display a single value. For some cases it is used for a simpleColor feature described in more detail below.
• colors
  Used to specify the colors used on the chart.
• min / max
  Specifies the minimum and maximum scale values.
• width / height
  Specifies the width or height of the micro chart in pixels.
• size
  A simpler way to specify the size with size=80x20 or for cases like pie: size=50
• margin
  Specifies the margin around the microchart.
• shading
  Takes a number between 1 and 5 and specifies the shading effect mode to use on the micro chart.
• axisMarker
  Takes a single value to draw a reference line or two values that specify a range to highlight similar to range axis markers on regular charts. Sparkline, AreaLine, and Column support this feature.
• tooltip
  A simple html tooltip for the microchart visual.
• rotate
  Rotates the microchart by the specified angle in degrees.

MicroChart Type Specific Attributes

heatmap

• cellSize
  When set, each cell with take this size and the resulting size will depend on the number of data values. Example: cellSize=25
• cells
  Specifies the number of rows and columns the cells will fill. Example: cells=10x5
• antialias
  Disables pixel snapping. Can be set with a 'true' value or just the attribute name by itself. Example: antialias

scale

• orientation
  The default orientation of the scale is 'top'. When set to 'bottom' the scale render the axis line on top of labels.
• value
  Use to modify the axis tick labels with additional characters. Usage: '$%value' can result in '$500'
• interval
  Used to define a tick interval.

column

• antialias
  Disables pixel snapping. Can be set with a 'true' value or just the attribute name by itself. Example: antialias

Sizing

All microCharts have predefined default sizes. Types like Pie use 30x30. Heatmap depends on cell sizes and value count but allows different sizing options. Others use 80x20. The size can be specified with the width and height settings but a size setting can also be used, and it applied that value to both width and height.

Shading

A number of micro charts support shading effect modes. These can be specified with the 'shading' parameter which takes a number from 1 to 5 indicating the shading effect mode to use. The micro charts that support shading are:

• bar
• bullet
• pie
• progress

Setting Axis Range

The scale micro chart provides a means to describe other horizontal based micro charts. When other micro charts are stacked vertically with a scale in the header row they must sync the scales in order to visualize the information correctly. The scale range can be specified through the min and max attributes. The following micro chart types support the min/max axis range attributes:

• bar
• areaLine
• column
• bullet
• pie
• progress
• scale
• sparkline
• heatmap
  With heatmaps, the min/max scale describes the smartPalette range.

Data and Colors usage

Useful Microchart Tokens

A number of tokens that list values associated with a point, series or series collections are available and can be used to populate microchart data values.