JS MicroCharts

Chart Tutorials  

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

  • AreaLine AreaLine Options Sample
    <chart type="arealine" data="2,4,0,3">
    Similar to sparkline but draws an area under the line.
  • Bar Bar Options Sample
    <chart type="bar" data="5" min="0" max="10">
    Draws a basic horizontal bar. Usually used with a max attribute so it lines up with other bars in a grid format.
  • BarFull BarFull Options Sample
    <chart type="barFull" data="5" min="0" max="10">
    Draws stacked horizontal bars.
  • Bullet Bullet Options Sample
    <chart type="bullet" data="20,18,8,13" max="25" >
    The bullet type shows a value (bar) a target (vertical line segment) and AxisMarker bands indicate additional target or status.
  • Column Column Options Sample
    <chart type="column" data="10,7,3,2,7,4,0,0,0,-5,-6,-3,-2" >
    Draws a series of columns based on specified values.
  • Heatmap Heatmap Options Sample
    <chart type="heatmap" cells="3x3" data="10,14,15,-6,-12,-14,19,11,-5" >
    Draws a heatmap with the specified number of rows and columns or rows/column arrangement is determined automatically if not specified.
  • Pie Pie Options Sample
    <chart type="pie" data="10,14,5,6" >
    A simple pie microChart.
  • Progress Progress Options Sample
    <chart type="progress" data="5" min="0" max="10">
    This type is similar to Bar except the bar is drawn in segments.
  • Scale Scale Options Sample
    <chart type="scale" min="0" max="10">
    The scale micro chart is designed to be used in a header of a column that will show micro charts based on that scale range. By specifying the same width for the scale and subsequent charts, it will ensure the charts in that column line up with each other and the scale. Using a scale also requires that the same max parameter value is set for all the charts so the values of each chart correspond to the values indicated by the scale. In some cases, the min parameter may also be required.
  • Sparkline Sparkline Options Sample
    <chart type="sparkline" data="2,4,0,3,5,4,3,2">
    A sparkline is similar to a line chart but without the extras like grid lines.

🔗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

🔗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.

🔗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

TypeDataColor
AreaLinedata: attribute takes a comma delimited list of values data="2,3,6,2"colors attribute:
1st Color: Line
2nd Color: Line start/end points
3rd Color: Max/Min points
4th Color: AxisMarker color

The word 'none' can be used to hide an element. Colors can be omitted to use the default colors.
Bardata: attribute specifies the bar value data="5"color attribute: Sets the bar color.

colors attribute:
1st color: Bar
2nd color: Bar (negative)
3rd color: Background
4th color: Border

The word 'none' can be used to hide an element. Colors can be omitted to use the default colors.
BarFulldata: attribute specifies bar values data="5,10,2"colors attribute:
1st color: Border
2, 3, ... : defines each color applied to bars

color SimpleColor Feature: One color internally creates a palette of colors with similar hues.
Bulletdata: the sequence of values specify: Value, Target, 1st, and 2nd axis marker positions.

If the 3rd value is larger than the 4th. The axis marker colors fill in the opposite direction. data="15,10,4,8"
colors attribute:
1st Color: Bar
2nd Color: Target
3rd Color: Shade 1
4th Color: Shade 2
5th Color: Background
6th Color: Border

color SimpleColor Feature: One color internally creates a palette of colors with similar hues.
Columndata: attribute takes a comma delimited list of values. data="2,3,6,2"colors attribute:
1st Color: (+) Columns
2nd Color: (-) Columns
3rd Color: AxisMarker

Heatmapdata: attribute takes a comma delimited list of values. data="10,14,15,-6,-12,-14,19,11,-5"colors attribute defines a gradient smartPalette with 3 colors:
1st Color: (-) Min Value
2nd Color: (zero)
3rd Color: (+) Max Value

Piedata: attribute takes a comma delimited list of values. data="10,14,15,-6,-12,-14,19,11,-5"colors attribute:
1st color: Border
2, 3, ... : defines each color applied to pie slices

color SimpleColor Feature: One color internally creates a palette of colors with similar hues.
Progressdata: attribute specifies the bar value data="5"color attribute: Sets the bar color.

colors attribute:
1st color: Bar
2nd color: Bar (negative)
3rd color: Background
4th color: Border

The word 'none' can be used to hide an element. Colors can be omitted to use the default colors.
Scaledata: a comma delimited list of string labels to place on the axis. ex: data="Bad,Good,Great"colors attribute:
1st Color: Applies to line and labels
2nd Color: Line only

The word 'none' can be used to hide an element. Colors can be omitted to use the default colors.
Sparklinedata: attribute takes a comma delimited list of values data="2,3,6,2"colors attribute:
1st Color: Line
2nd Color: Line start/end points
3rd Color: Max/Min points
4th Color: AxisMarker color

The word 'none' can be used to hide an element. Colors can be omitted to use the default colors.
SimpleColor Feature By setting the color attribute for charts that support this feature, multiple colors will be created for all elements based on the specified color. This can allow the ability to quickly apply a primary color of your page to ensure the MicroCharts style fits.

🔗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.

TypeToken
Point%subvalueList - Comma delimited list of point subvalue values
Series%yValueList - A comma delimited list of y values for each point in this series.
%xValueList - A comma delimited list of x values for each point in this series.
%zValueList - A comma delimited list of z values for each point in this series.
Series Collection%ySumList - A comma delimited list of y value sums for each series on the chart.
%xSumList - A comma delimited list of x value sums for each series on the chart.
%zSumList - A comma delimited list of z value sums for each series on the chart.