Skip to main content
Version: 5.8

Commons charts options

To change the global options, Charba is providing the method getGlobal in the Defaults class. These options will be applied to all charts, whatever type of chart.

With above method you can get all global configurations of Chart.JS and you have got all set and get methods to change or retrieve the global configuration items.

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().setResponsive(false);
Defaults.get().getGlobal().setMaintainAspectRatio(true);

double circumference = Defaults.get().getGlobal().getCircumference();
CLocale locale = Defaults.get().getGlobal().getLocale();

The following are the attributes that you can set:

NameTypeDefaultDescription
aspectRatiodouble2Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas).
backgroundColorString - IsColorrgba(0,0,0,0.1) -         The default background color to use in the chart.
borderColorString - IsColorrgba(0,0,0,0.1) -         The default border color to use in the chart.
circumferencedouble360The sweep to allow arcs to cover.
colorString - IsColor#666 -         The default font color to use in the chart.
cutoutPercentageStringnullThe percentage of the chart that is cut out of the middle. It's a string, ending with '%', as percentage of the chart radius.
See pie and doughnut chart configuration for defaults.
cutoutdoubleUndefined.DOUBLEThe portion of the chart that is cut out of the middle, in pixels.
See pie and doughnut chart configuration for defaults.
destroyOnDetachbooleantruetrue if the chart is configured to be destroyed on the detach from element.
devicePixelRatiodoubleWindow.getDevicePixelRatio()Default device pixel ratio. By default the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio.
drawOnAttachbooleantruetrue if the chart is configured to be draw on the attach of element
eventsIsEvent[] - Set<IsEvent>DefaultEvent.MOUSEMOVE,
DefaultEvent.MOUSEOUT,
DefaultEvent.CLICK,
DefaultEvent.TOUCHSTART,
DefaultEvent.TOUCHMOVE
The events option defines the browser events that the chart should listen to.
indexAxisIndexAxisIndexAxis.XThe base axis for the BAR dataset. Use 'y' for horizontal bar.
localeCLocaleCLocale.getDefaults()A string with a BCP 47 language tag.
See INTL locale.
maintainAspectRatiobooleantrueMaintain the original canvas aspect ratio (width / height) when resizing.
radiusPercentageString100%the outer radius of the chart. It's a string, ending with '%', as percentage of the maximum radius.
radiusdoubleUndefined.DOUBLEThe outer radius of the chart, in pixels.
resizeDelayint0Delay the resize update by give amount of milliseconds. This can ease the resize process by debouncing update of the elements.
responsivebooleantrueResizes the chart canvas when its container does.
responsiveAnimationDurationint0Duration in milliseconds it takes to animate to new size after a resize event.
rotationdouble0The starting angle to draw arcs from.
showLinebooleantrueIf false, the lines between points are not drawn.
skipNullbooleantrueIf true, null or undefined values will not be drawn
spanGapsboolean - doublefalseIf true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.

The options element is the root node of several other elements you can set to configure the charts as you need.

Font

There are special global settings that can change all fonts on all charts. The global font settings only apply when more specific options are not included in the configuration.

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getFont().setSize(16);

int size = Defaults.get().getGlobal().getFont().getSize();
NameTypeDefaultDescription
familyString"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"Font family for all text.
sizeint12Font size (in px) for text.
styleFontStyleFontStyle.NORMALFont style for text.
weightWeightWeight.NORMALFont weight (boldness) for text.
See MDN.
lineHeightdouble - String1.2Height of an individual line of text.
See MDN.

Interaction

The interaction options are managing the ways how to act on the charts.

The interaction configuration is passed using the Hover object in the defaults one:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getInteraction().setIntersect(true);

boolean intersect = Defaults.get().getGlobal().getInteraction().isIntersect();

The following are the attributes that you can set:

NameTypeDefaultDescription
axisInteractionAxisInteractionAxis.XDefine which directions are used in calculating distances.
intersectbooleantrueif true, the hover mode only applies when the mouse position intersects an item on the chart.
includeInvisiblebooleanfalseif true, the invisible points that are outside of the chart area will also be included when evaluating interactions.
modeInteractionModeInteractionMode.NEARESTSets which elements managed by event or tooltip.

Hover

The hover options are managing the ways how the datasets of the chart can change when hovered.

The hover configuration is passed using the Hover object in the defaults one:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getHover().setIntersect(true);

boolean intersect = Defaults.get().getGlobal().getHover().isIntersect();

The following are the attributes that you can set:

NameTypeDefaultDescription
axisInteractionAxisInteractionAxis.XDefine which directions are used in calculating distances.
intersectbooleantrueif true, the hover mode only applies when the mouse position intersects an item on the chart.
modeInteractionModeInteractionMode.NEARESTSets which elements will be hovered.

Animation

Animation is used to configure the base options to animate the chart.

The hover configuration is passed using the animation object in the defaults one:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getAnimation().setDuration(2000);

int duration = Defaults.get().getGlobal().getAnimation().getDuration();

The following animation options are available.

NameTypeDefaultsDescription
animateRotatebooleantrueIf true, the chart will animate in with a rotation animation.
animateScalebooleanfalseIf true, will animate scaling the chart from the center outwards.
delayintUndefined.INTEGERDelay in milliseconds before starting the animations.
durationint1000The number of milliseconds an animation takes.
easingEasingEasing.EASE_OUT_QUARTEasing function to use.
See Robert Penner's easing equations for more details.
loopbooleanfalseIf set to true, the animations loop endlessly.

Animations

Animations options configures which element properties are animated and how.

The animations element is a container of configurations which can be stored and retrieved by a key.

To get, change and apply own properties, you can invoke the set and get methods, as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
AnimationCollectionKey key = AnimationCollectionKey.create("myKey", AnimationType.NUMBER);
// creates and gets an animation configuration item by my key
AnimationCollection configuration = Defaults.get().getGlobal().getAnimations().create(key);
// sets and gets duration option to the animation configuration
configuration.setDuration(2000);

int duration = configuration.getDuration();

The following options are available in AnimationCollection.

NameTypeDefaultsDescription
delayintUndefined.INTEGERDelay in milliseconds before starting the animations.
durationint1000The number of milliseconds an animation takes.
easingEasingEasing.EASE_OUT_QUARTEasing function to use.
See Robert Penner's easing equations for more details.
loopbooleanfalseIf set to true, the animations loop endlessly.
propertiesAnimationPropertyKey[][]The properties of elements to use to animate.
typeAnimationTypeAnimationType.NUMBERType of property, determines the interpolator used.
fromboolean - double - String - IsColorUndefined.BOOLEAN
Undefined.DOUBLE
null
Start value for the animation.
toboolean - double - String - IsColorUndefined.BOOLEAN
Undefined.DOUBLE
null
End value for the animation.

Transitions

The transitions are a set of animation configuration related to a specific update mode.

Every transition animation configuration contains an instance of Animation and one of Animations to configure the animation for a specific mode.

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
// creates a custom mode
TransitionKey mode = TransitionKey.create("myMode");
// creates an animation transitions configuration for my mode
AnimationTransition mode = Defaults.get().getGlobal().getTransitions().create(mode);

// gets animation and animations elements
Animation animation = mode.getAnimation();

Animations animations = mode.getAnimations();

Legend

The chart legend displays data about the datasets that area appearing on the chart.

The legend configuration is passed using the Legend object in the defaults one:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getLegend().setReverse(true);

boolean reverse = Defaults.get().getGlobal().getLegend().isReverse();

The following are the attributes that you can set:

NameTypeDefaultDescription
alignLegendAlignLegendAlign.CENTERAlignment of the legend.
displaybooleantrueIf true, the legend is shown.
eventsIsEvent[] - Set<IsEvent>Defaults.get().getGlobal()
.getEvents()
The events option defines the browser events that the legend should listen to. This overrides the options at chart level.
fullSizebooleantrueMarks that this box should take the full width/height of the canvas (moving other boxes).
maxHeightintUndefined.INTEGERMaximum height of the legend, in pixels.
maxWidthintUndefined.INTEGERMaximum width of the legend, in pixels.
positionPositionPosition.TOPPosition of the legend.
reversebooleanfalseLegend will show datasets in reverse order.
rtlbooleanfalsetrue for rendering the legends from right to left.
textDirectionTextDirectionTextDirection.LEFT_TO_RIGHTThis will force the text direction on the canvas for rendering the legend, regardless of the CSS specified on the canvas.

Legend labels

The Legend Labels configuration is nested below the legend configuration using

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getLegend().getLegendLabels().setPadding(6);

int padding = Defaults.get().getGlobal().getLegend().getLegendLabels().getPadding();

The following are the attributes that you can set:

NameTypeDefaultDescription
boxHeightintgetFont().getSize()Height of the colored box.
boxWidthint40Width of colored box.
colorString - IsColorDefaults.get().getGlobal()
.getColorAsString()
Color of label.
See default colors.
fontFontDefaults.get().getGlobal()
.getFont()
Font of label.
See Font.
paddingint10Padding between rows of colored boxes.
pointStylePointStyle - Img - CanvasPointStyle.CIRCLEThis style of point is used for the legend. Only used if usePointStyle is true.
pointStyleWidthdoubleUndefined.DOUBLEIf usePointStyle is true, the width of the point style used for the legend (only for PointStyle.CIRCLE, PointStyle.RECT and PointStyle.LINE).
textAlignTextAlignTextAlign.CENTERHorizontal alignment of the label text.
usePointStylebooleanfalseLabel style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).

Legend title

The legend title configuration is nested below the legend configuration using

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getLegend().getTitle().getPadding().set(6);

Padding padding = Defaults.get().getGlobal().getLegend().getTitle().getPadding();

The following are the attributes that you can set:

NameTypeDefaultDescription
colorString - IsColorDefaults.get().getGlobal()
.getColorAsString()
Color of text of title.
See default colors.
displaybooleanfalseIf true, the legend title is shown.
fontFontDefaults.get().getGlobal()
.getFont()
Font of text of title.
See Font.
paddingPadding0 to all dimensionsPadding around the title.
See padding documentation for more details.

Tooltips

The tooltips configuration is passed using the tooltips object in the defaults one:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getTooltips().setCornerRadius(8);

int cornerRadius = Defaults.get().getGlobal().getTooltips().getCornerRadius();

The following are the attributes that you can set:

NameTypeDefaultDescription
backgroundColorString - IsColorrgba(0,0,0,0.8) -         Background color of the tooltips.
bodyColorString - IsColor#fff -         Color of body text.
bodyFontFontSee descriptionFont of body text. The default value is the global font with the style set to FontStyle.NORMAL.
See Font.
bodyAlignTextAlignTextAlign.LEFTAlignment of body element of the tooltips.
bodySpacingint2Spacing to add to top and bottom of each tooltip item.
borderColorString - IsColorrgba(0,0,0,0) -         Color of the border.
borderWidthint0Size of the border.
boxWidthintgetBodyFont().getSize()Width of the color box if displayColors is true.
boxHeightintgetBodyFont().getSize()Height of the color box if displayColors is true.
caretPaddingint2Extra distance to move the end of the tooltip arrow away from the tooltip point.
caretSizeint5Size, in px, of the tooltip arrow.
cornerRadiusint - BarBorderRadius6Radius of tooltip corner curves.
displayColorsbooleantrueIf true, color boxes are shown in the tooltip.
enabledbooleantrueIf true, the tooltips are enabled.
eventsIsEvent[] - Set<IsEvent>Defaults.get().getGlobal()
.getEvents()
The events option defines the browser events that the tooltip should listen to. This overrides the options at chart level.
footerColorString - IsColor#fff -         Color of the footer.
footerFontFontSee descriptionFont of footer text. The default value is the global font with the style set to Weight.BOLD.
See Font.
footerAlignTextAlignTextAlign.LEFTAlignment of footer element of the tooltips.
footerMarginTopint6Margin to add before drawing the footer.
footerSpacingint2Spacing to add to top and bottom of each footer line.
intersectbooleanDefaults.get().getGlobal()
.getInteraction().isIntersect()
if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
modeInteractionModeDefaults.get().getGlobal()
.getInteraction().getMode()
Sets which elements appear in the tooltip.
multiKeyBackgroundString - IsColor#fff -         Color to draw behind the colored boxes when multiple items are in the tooltip.
paddingPadding6 to all dimensionsThe padding to add inside the tooltip.
See padding documentation for more details.
positionTooltipPositionTooltipPosition.AVERAGEThe mode for positioning the tooltip.
rtlbooleanfalsetrue for rendering the tooltips from right to left.
textDirectionTextDirectionTextDirection.LEFT_TO_RIGHTThis will force the text direction on the canvas for rendering the tooltips, regardless of the CSS specified on the canvas
titleColorString - IsColor#fff -         Color of the footer.
titleFontFontSee descriptionFont of title text. The default value is the global font with the style set to Weight.BOLD.
See Font.
titleAlignTextAlignTextAlign.LEFTAlignment of title element of the tooltips.
titleMarginBottomint6Margin to add on bottom of title section.
titleSpacingint2Spacing to add to top and bottom of each title line.
usePointStylebooleanfalseUse the corresponding point style (from dataset options) instead of color boxes (size is based on the minimum value between box width and box height).
xAlignTooltipAlignTooltipAlign.AUTOPosition of the tooltip caret in the X direction.
Can accept only TooltipAlign.LEFT, TooltipAlign.CENTER and TooltipAlign.RIGHT.
yAlignTooltipAlignTooltipAlign.AUTOPosition of the tooltip caret in the Y direction.
Can accept only TooltipAlign.TOP, TooltipAlign.CENTER and TooltipAlign.BOTTOM.

Title

The chart title defines text to draw at the top of the chart.

The title configuration is passed using the Title object in the defaults one:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getTitle().getPadding().set(12);

Padding padding = Defaults.get().getGlobal().getTitle().getPadding();

The following are the attributes that you can set:

NameTypeDefaultDescription
alignElementAlignElementAlign.CENTERAlignment of the title.
colorString - IsColorDefaults.get().getGlobal()
.getColorAsString()
Color of text of the title.
See default colors.
displaybooleanfalseIf true, the title is shown.
fontFontSee descriptionFont of title text. The default value is the global font with the style set to Weight.BOLD.
See Font.
fullSizebooleantrueMarks that this box should take the full width/height of the canvas (moving other boxes).
paddingPadding10 to all dimensionsNumber of pixels to add above and below the title text.
See padding documentation for more details.
positionPositionPosition.TOPPosition of title.

Subtitle

The chart subtitle defines text to draw at the bottom of the chart title.

The subtitle configuration is passed using the Title object in the defaults one:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getSubtitle().getPadding().set(12);

Padding padding = Defaults.get().getGlobal().getSubtitle().getPadding();

The following are the attributes that you can set:

NameTypeDefaultDescription
alignElementAlignElementAlign.CENTERAlignment of the subtitle.
colorString - IsColorDefaults.get().getGlobal()
.getColorAsString()
Color of text of the subtitle.
See default colors.
displaybooleanfalseIf true, the title is shown.
fontFontSee descriptionFont of subtitle text. The default value is the global font with the style set to Weight.NORMAL.
See Font.
fullSizebooleantrueMarks that this box should take the full width/height of the canvas (moving other boxes).
paddingPadding0 to all dimensionsNumber of pixels to add above and below the subtitle text.
See padding documentation for more details.
positionPositionPosition.TOPPosition of subtitle.

Elements

Options can be configured for four different types of elements: arc, lines, points, and bar.

The elements configuration is nested in the global configuration as following:

Defaults.get().getGlobal().getElements();

Point

Point element is used to represent the points, like in a line or bubble charts.

The point configuration is nested in the elements configuration as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getElements().getPoint().setRadius(6);

int radius = Defaults.get().getGlobal().getElements().getPoint().getRadius();

The following are the attributes that you can set:

NameTypeDefaultDescription
backgroundColorString - IsColorDefaults.get().getGlobal()
.getBackgroundColorAsString()
Point fill color.
See default colors.
borderColorString - IsColorDefaults.get().getGlobal()
.getBorderColorAsString()
Point stroke color.
See default colors.
borderWidthint1Point stroke width.
hitRadiusint1Extra radius added to point radius for hit detection.
hoverBackgroundColorString - IsColorSee backgroundColorPoint fill color when hovered.
hoverBorderColorString - IsColorSee borderColorPoint stroke color when hovered.
hoverBorderWidthintSee borderWidthStroke width when hovered.
hoverRadiusint4Point radius when hovered.
pointStylePointStyle - Img - CanvasPointStyle.CIRCLEPoint style.
radiusint3Point radius.
rotationdouble0The point rotation (in degrees).

Line

Line element is used to represent the line, like in a line or radar charts.

The line configuration is nested in the elements configuration as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getElements().getLine().setTesion(0.4D);

double tension = Defaults.get().getGlobal().getElements().getLine().getTesion();

The following are the attributes that you can set:

NameTypeDefaultDescription
backgroundColorString - IsColorDefaults.get().getGlobal()
.getBackgroundColorAsString()
Line fill color.
See default colors.
borderCapStyleCapStyleCapStyle.BUTTDetermines the shape used to draw the end points of lines.
See MDN.
borderColorString - IsColorDefaults.get().getGlobal()
.getBorderColorAsString()
Line stroke color.
See default colors.
borderDashint[][]The line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.
See MDN.
borderDashOffsetdouble0DLine dash offset.
See MDN.
borderJoinStyleJoinStyleJoinStyle.MITERThe shape used to join two line segments where they meet.
See MDN.
borderWidthint3Line stroke width.
capBezierPointsbooleantrueSet trueto keep Bezier control inside the chart,false` for no restriction.
cubicInterpolationModeCubicInterpolationModeCubicInterpolationMode.DEFAULTInterpolation mode to apply.
fillString - int - boolean - IsFillFill.FALSEHow to fill the area under the line.
See Filling modes
hoverBackgroundColorString - IsColorSee backgroundColorLine fill color when hovered.
hoverBorderColorString - IsColorSee borderColorLine stroke color when hovered.
hoverBorderWidthintSee borderWidthStroke width when hovered.
steppedboolean - SteppedStepped.FALSEIf the line is shown as a stepped line.
tensiondouble0Bezier curve tension (0 for no Bezier curves).

Arc

Arc element is used in the polar area, doughnut and pie charts.

The Arc configuration is nested in the elements configuration as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getElements().getArc().setBorderWidth(4);

int borderWidth = Defaults.get().getGlobal().getElements().getArc().getBorderWidth();

The following are the attributes that you can set:

NameTypeDefaultDescription
angledoubleDouble.NaNArc angle to cover, for polar chart only.
backgroundColorString - IsColorDefaults.get().getGlobal()
.getBackgroundColorAsString()
Arc fill color.
See default colors.
borderAlignBorderAlignBorderAlign.CENTERArc stroke alignment.
borderColorString - IsColor#fff -         Arc stroke color.
borderJoinStyleJoinStyleJoinStyle.BEVELArc line join style. The default is JoinStyle.ROUND when borderAlign is BorderAlign.INNER.
See MDN.
borderRadiusint0The arc border radius (in pixels).
borderWidthint2Arc stroke width.
circularbooleantrueIf the arc is curved. If false the arc will be flat.
hoverBackgroundColorString - IsColorSee backgroundColorArc fill color when hovered.
hoverBorderColorString - IsColorSee borderColorArc stroke color when hovered.
hoverBorderJoinStyleJoinStyleJoinStyle.BEVELArc line join style when hovered.
See MDN.
hoverBorderWidthintSee borderWidthStroke width when hovered.
hoverOffsetintSee offsetThe offset of the arc (in pixels) when hovered.
offsetint0The offset of the arc (in pixels).
spacingint0Fixed arc offset (in pixels). Similar to offset but applies to all arcs.

Bar

Bar element is used to represent the bars in a bar chart.

The bar configuration is nested in the elements configuration as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getElements().getBar().setBorderWidth(4);

int borderWidth = Defaults.get().getGlobal().getElements().getBar().getBorderWidth();

The following are the attributes that you can set:

NameTypeDefaultDescription
autoInflateAmountbooleantrueIf true, the amount of pixels to inflate the bar rectangles, when drawing, is automatically calculating.
backgroundColorString - IsColorDefaults.get().getGlobal()
.getBackgroundColorAsString()
Bar fill color.
See default colors.
basedoubleUndefined.DOUBLEBase value for the bar in data units along the value axis.
borderColorString - IsColorDefaults.get().getGlobal()
.getBorderColorAsString())
Bar stroke color.
See default colors.
borderRadiusint0The bar border radius (in pixels).
borderSkippedboolean - BorderSkippedBorderSkipped.STARTThe edge to skip when drawing bar.
borderWidthint0The bar border width (in pixels).
enableBorderRadiusbooleantrueIf true, it only shows the border radius of a bar when the bar is at the end of the stack.
hoverBackgroundColorString - IsColorSee backgroundColorBar fill color when hovered.
hoverBorderColorString - IsColorSee borderColorBar stroke color when hovered.
hoverBorderWidthintSee borderWidthStroke width when hovered.
hoverBorderRadiusintSee borderRadiusThe bar border radius (in pixels) when hovered.
inflateAmountintUndefined.INTEGERThe amount of pixels to inflate the bar rectangles, when drawing.
pointStylePointStyle - Img - CanvasPointStyle.CIRCLEPoint style for legend.

Datasets

The datasets options are managing the set options which will affect the datasets management.

The datasets configuration is nested in the global configuration using:

// --------------------------------------
// GLOBAL, for all charts of the same type
// --------------------------------------
Defaults.get().getOptions(ChartType.LINE).getDatasets().get(ChartType.LINE).setShowLine(true);

boolean globalShowLine = Defaults.get().getOptions(ChartType.LINE).getDatasets().get(ChartType.LINE).isShowLine();

The datasets configuration is passed using the Datasets object in the chart options and mapped to TypedDataset.

The following are the attributes that you can set:

NameTypeDefaultDescription
animationAnimation-See animation options section for more details.
animationsAnimations-See animation options section for more details.
barPercentagedouble0.9Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other.
categoryPercentagedouble0.8Percent (0-1) of the available width each category should be within the sample width.
barThicknessint0Manually set width of each bar in pixels.
If set to DefaultDatasets.FLEX_BAR_THICKNESS, it computes "optimal" sample widths that globally arrange bars side by side.
If not set (default), bars are equally sized based on the smallest interval.
groupedbooleantrueShould the bars be grouped on index axis.
When true, all the datasets at same index value will be placed next to each other centering on that index value.
When false, each bar is placed on its actual index-axis value.
maxBarThicknessint0Set this to ensure that bars are not sized thicker than this.
minBarLengthint0Set this to ensure that bars have a minimum length in pixels.
showLinebooleantrueIf true, the line is drawn for dataset.
transitionsTransitions-See animation options section for more details.

Layout

Options can be configured for the the padding to add inside the chart.

The layout configuration is nested in the global configuration using:

// gets layout instance
Layout layout = Defaults.get().getGlobal().getLayout();

The padding configuration is nested in the layout configuration as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getLayout().getPadding().setTop(10);
// to set same padding value to all sides of the chart
Defaults.get().getGlobal().getLayout().getPadding().set(10);

int paddingTop = Defaults.get().getGlobal().getLayout().getPadding().getTop();

The following are the attributes that you can set:

NameTypeDefaultDescription
autoPaddingbooleantrueIf true, apply automatic padding so visible elements are completely drawn.
paddingPadding0 on all sidesTo set specific padding for specific sides.

See padding documentation for more details.

Decimation

The decimation element can be used with line charts to automatically decimate data at the start of the chart life cycle.

Before enabling it, review the requirements to ensure that it will work with the chart you want to create.

The decimation configuration is nested in the global configuration as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getDecimation().setSamples(1000);

double samples = Defaults.get().getGlobal().getDecimation().getSamples();

The following are the attributes that you can set:

NameTypeDefaultDescription
enabledbooleanfalseIf true, the data decimation is enabled.
algorithmDecimationAlgorithmDecimationAlgorithm.MIN_MAXDecimation algorithm to use.
samplesdoubleUndefined.DOUBLEIf the DecimationAlgorithm.LTTB is used, this is the number of samples in the output dataset. Defaults to the canvas width to pick 1 sample per pixel.
thresholddoubleUndefined.DOUBLEIf the number of samples in the current axis range is above this value, the decimation will be triggered.
Defaults to 4 times the canvas width.
The number of point after decimation can be higher than the threshold value.

Algorithms

The available decimation algorithms to use for data are the following:

  • DecimationAlgorithm.MIN_MAX: it will preserve peaks in your data but could require up to 4 points for each pixel. This type of decimation would work well for a very noisy signal where you need to see data peaks.
  • DecimationAlgorithm.LTTB (Largest Triangle Three Bucket): it reduces the number of data points significantly. This is most useful for showing trends in data using only a few data points.

Requirements

To use the decimation, the following requirements must be met:

  1. The dataset must have an IndexAxis of IndexAxis.X.
  2. The dataset must be a line.
  3. The X axis for the dataset must be either a linear or time axis.

Filler

Filler element configures the engine which is in charge to manage the filling of the datasets, by the property fill. See here how filling a dataset.

The filler configuration is nested in the global configuration as following:

// --------------------------------------
// GLOBAL, for all charts (whatever type)
// --------------------------------------
Defaults.get().getGlobal().getFiller().setPropagate(false);

boolean propagate = Defaults.get().getGlobal().getFiller().isPropagate();

The following are the attributes that you can set:

NameTypeDefaultDescription
propagatebooleantrueIf true, the fill area will be recursively extended to the visible target defined by the fill value of hidden data set targets.
drawTimeDrawTimeDrawTime.BEFORE_DATASET_DRAWFiller draw time.