Argon allows extensive configuration of the charts. The configurator is invoked by clicking the menu button at the top left of the chart as shown below.

Invoking the Configuration Menu

The picture shows the configuration menu. While some of the items might change, most of the charts will have something similar.

Top level items in the config menu

Apply Changes

After changing a setting, press this button to apply the changes to the chart.

Theme

The theme item shows a sub-menu with the following items.

Items in the theme sub-menu
  • load: shows a File Load dialog to select the settings JSON to be loaded.

  • save: shows a File Save dialog to save the current settings as JSON.

Chart

Settings applicable to the chart as a whole.

  • bgColor: change the background color of the chart area. Opacity must be greater than 0 for the background color to be visible.

  • bgOpacity: change the opacity of the chart area. Set opacity greater than 0 for the background color to be visible.

border

Chart border settings include:

  • borderColor

  • borderRadius

  • borderWidth: must be set to non-zero for the border to be visible.

Chart Border

Data

Controls how data is collected and processed for presentation. Some of the following may not be applicable to all chart types.

Options include:

  • presentation: (applicable to bar, column charts) specify how the data is presented:

    • drilldown: series data is presented for navigation using drilldown

    • flat: all available series data is represented on the chart.

Data presentation

DefaultColors

This option provides several color palettes named A, B, etc. You can select any palette to be used as default in the chart. Each palette includes 10 colors. You can also change any color in the palette.

Color palettes

Margins

Margin controls the space between the chart and the chart border. In the following example, the margins are set to (top, right, bottom, left) => (100, 100, 400, 400).

The chart appears as shown.

Plot

Settings for the plot area.

  • plotBackgroundImage: specify a URL of an image here to set the background as shown.

  • plotBgColor and plotBgOpacity: specify a background color and opacity. Works only if background image (above) is not specified.

  • plotBorderColor and plotBorderWidth: here is an example of setting these parameters.

  • plotShadow: And here is the effect of turning on plotShadow.

Title and Sub-Title

Set aspects of the title, including the text, as shown below.

  • text: set the title text.

  • align: horizontal alignment of the text block. Choose from auto, left, center and right.

  • verticalAlign: vertical alignment of the text block. Choose from auto, top, middle and bottom.

  • floating: whether the plot makes space for the title block or not. Check the difference below (plotShadow has been turned on to show the difference.)

    Compare with:

  • margin: distance between the title block and the plot area.

  • x and y: offset distance in the position of the text block.

X-Axis and Y-Axis

Settings for x-axis and y-axis are similar so they are described together.

Axis/Core

  • visible: whether the axis is visible. Use this option to turn off all axis elements including ticks, labels, line, etc.

  • allowDecimals: should decimals be allowed in the axis ticks. In cases where the axis represents integers (such as counts), this option may be used to prevent appearance of decimals.

  • floor and ceiling: specify the lowest and highest values of the axis, overriding what is automatically computed.

  • startOnTick and endOnTick: force the axis to start and end on a tick.

  • lineColor and lineWidth: control the appearance of the axis line.

  • min and max: minimum and maximum values of the axis.

  • offset: how many pixels to offset the plot from the axis line.

  • opposite: when this option is on, the axis appears opposite from where it normally would.

  • reversed: reverse the direction of the axis from the normal.

  • showFirstLabel and showLastLabel: used to turn off first and last labels on the axis.

  • tickAmount: number of ticks on an axis. Applies only to linear axis.

  • tickColor, tickLength and tickWidth: control the tick appearance. See image below.

  • tickPosition and tickMarkPlacement: control the tick positioning.

Axis/Title

This section deals with changing axis title settings.

  • text: change or remove axis title text here.

  • align: controls axis text alignment; choose from: low, middle or high.

  • margin: distance in pixels between the axis title and the axis line.

  • rotation: enter a number 0 - 360 to rotate the axis title.

  • x and y: pixel offsets from the normal position of the axis title.

Axis/Labels

Following settings are available for configuring axis labels.

  • enabled: whether to show axis labels or not.

  • format: specify a format string to control the labels. You can use the following directives in the format string:

    • {point.x} and {point.y} can be used to refer to the x and y-coordinates of the point.

    • you can follow the point coordinate with a colon and a format directive. For example, {point.x:.2f} shows the x-coordinate to 2 decimal places; {point.x:.0f} turns off the decimal places.

  • align: choose horizontal alignment of the label from: auto, left, center and right.

  • rotation: rotate the label by an angle 0-360.

  • autoRotation: the angle to rotate by when the label is automatically rotated to prevent overlap.

  • x and y: the offset of the label from the original position.

  • wordwrap: instead of automatic rotation, the label is word-wrapped to prevent overlap.

  • overflow: how to handle overflowing labels. Two options available.

    • justify: see this picture.

    • allow: see picture.

  • padding: space in pixels between axis labels.

  • reserveSpace: whether to reserve space for labels on the axis. For cases where the axis labels appear inside the plot area, this can be turned off.

  • staggerLines: show labels over this many lines to avoid overlap.

Axis/Gridlines

  • gridLineWidth: set to non-zero to enable gridlines for the axis.

  • gridLineColor and gridLineDashStyle: styling of the grid lines when enabled.