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:
Name | Type | Default | Description |
---|---|---|---|
aspectRatio | double | 2 | Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). |
backgroundColor | String - IsColor | rgba(0,0,0,0.1) - | The default background color to use in the chart. |
borderColor | String - IsColor | rgba(0,0,0,0.1) - | The default border color to use in the chart. |
circumference | double | 360 | The sweep to allow arcs to cover. |
color | String - IsColor | #666 - | The default font color to use in the chart. |
cutoutPercentage | String | null | The 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. |
cutout | double | Undefined.DOUBLE | The portion of the chart that is cut out of the middle, in pixels. See pie and doughnut chart configuration for defaults. |
destroyOnDetach | boolean | true | true if the chart is configured to be destroyed on the detach from element. |
devicePixelRatio | double | Window.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. |
drawOnAttach | boolean | true | true if the chart is configured to be draw on the attach of element |
events | IsEvent[] - 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. |
indexAxis | IndexAxis | IndexAxis.X | The base axis for the BAR dataset. Use 'y' for horizontal bar. |
locale | CLocale | CLocale.getDefaults() | A string with a BCP 47 language tag. See INTL locale. |
maintainAspectRatio | boolean | true | Maintain the original canvas aspect ratio (width / height) when resizing. |
radiusPercentage | String | 100% | the outer radius of the chart. It's a string, ending with '%', as percentage of the maximum radius. |
radius | double | Undefined.DOUBLE | The outer radius of the chart, in pixels. |
resizeDelay | int | 0 | Delay the resize update by give amount of milliseconds. This can ease the resize process by debouncing update of the elements. |
responsive | boolean | true | Resizes the chart canvas when its container does. |
responsiveAnimationDuration | int | 0 | Duration in milliseconds it takes to animate to new size after a resize event. |
rotation | double | 0 | The starting angle to draw arcs from. |
showLine | boolean | true | If false , the lines between points are not drawn. |
skipNull | boolean | true | If true , null or undefined values will not be drawn |
spanGaps | boolean - double | false | If 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();
Name | Type | Default | Description |
---|---|---|---|
family | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family for all text. |
size | int | 12 | Font size (in px) for text. |
style | FontStyle | FontStyle.NORMAL | Font style for text. |
weight | Weight | Weight.NORMAL | Font weight (boldness) for text. See MDN. |
lineHeight | double - String | 1.2 | Height 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:
Name | Type | Default | Description |
---|---|---|---|
axis | InteractionAxis | InteractionAxis.X | Define which directions are used in calculating distances. |
intersect | boolean | true | if true , the hover mode only applies when the mouse position intersects an item on the chart. |
includeInvisible | boolean | false | if true , the invisible points that are outside of the chart area will also be included when evaluating interactions. |
mode | InteractionMode | InteractionMode.NEAREST | Sets 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:
Name | Type | Default | Description |
---|---|---|---|
axis | InteractionAxis | InteractionAxis.X | Define which directions are used in calculating distances. |
intersect | boolean | true | if true , the hover mode only applies when the mouse position intersects an item on the chart. |
mode | InteractionMode | InteractionMode.NEAREST | Sets 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.
Name | Type | Defaults | Description |
---|---|---|---|
animateRotate | boolean | true | If true , the chart will animate in with a rotation animation. |
animateScale | boolean | false | If true , will animate scaling the chart from the center outwards. |
delay | int | Undefined.INTEGER | Delay in milliseconds before starting the animations. |
duration | int | 1000 | The number of milliseconds an animation takes. |
easing | Easing | Easing.EASE_OUT_QUART | Easing function to use. See Robert Penner's easing equations for more details. |
loop | boolean | false | If 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.
Name | Type | Defaults | Description |
---|---|---|---|
delay | int | Undefined.INTEGER | Delay in milliseconds before starting the animations. |
duration | int | 1000 | The number of milliseconds an animation takes. |
easing | Easing | Easing.EASE_OUT_QUART | Easing function to use. See Robert Penner's easing equations for more details. |
loop | boolean | false | If set to true , the animations loop endlessly. |
properties | AnimationPropertyKey[] | [] | The properties of elements to use to animate. |
type | AnimationType | AnimationType.NUMBER | Type of property, determines the interpolator used. |
from | boolean - double - String - IsColor | Undefined.BOOLEAN Undefined.DOUBLE null | Start value for the animation. |
to | boolean - double - String - IsColor | Undefined.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:
Name | Type | Default | Description |
---|---|---|---|
align | LegendAlign | LegendAlign.CENTER | Alignment of the legend. |
display | boolean | true | If true , the legend is shown. |
events | IsEvent[] - 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. |
fullSize | boolean | true | Marks that this box should take the full width/height of the canvas (moving other boxes). |
maxHeight | int | Undefined.INTEGER | Maximum height of the legend, in pixels. |
maxWidth | int | Undefined.INTEGER | Maximum width of the legend, in pixels. |
position | Position | Position.TOP | Position of the legend. |
reverse | boolean | false | Legend will show datasets in reverse order. |
rtl | boolean | false | true for rendering the legends from right to left. |
textDirection | TextDirection | TextDirection.LEFT_TO_RIGHT | This 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:
Name | Type | Default | Description |
---|---|---|---|
boxHeight | int | getFont().getSize() | Height of the colored box. |
boxWidth | int | 40 | Width of colored box. |
color | String - IsColor | Defaults.get().getGlobal() .getColorAsString() | Color of label. See default colors. |
font | Font | Defaults.get().getGlobal() .getFont() | Font of label. See Font. |
padding | int | 10 | Padding between rows of colored boxes. |
pointStyle | PointStyle - Img - Canvas | PointStyle.CIRCLE | This style of point is used for the legend. Only used if usePointStyle is true . |
pointStyleWidth | double | Undefined.DOUBLE | If usePointStyle is true , the width of the point style used for the legend (only for PointStyle.CIRCLE, PointStyle.RECT and PointStyle.LINE). |
textAlign | TextAlign | TextAlign.CENTER | Horizontal alignment of the label text. |
usePointStyle | boolean | false | Label 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:
Name | Type | Default | Description |
---|---|---|---|
color | String - IsColor | Defaults.get().getGlobal() .getColorAsString() | Color of text of title. See default colors. |
display | boolean | false | If true , the legend title is shown. |
font | Font | Defaults.get().getGlobal() .getFont() | Font of text of title. See Font. |
padding | Padding | 0 to all dimensions | Padding 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:
Name | Type | Default | Description |
---|---|---|---|
backgroundColor | String - IsColor | rgba(0,0,0,0.8) - | Background color of the tooltips. |
bodyColor | String - IsColor | #fff - | Color of body text. |
bodyFont | Font | See description | Font of body text. The default value is the global font with the style set to FontStyle.NORMAL. See Font. |
bodyAlign | TextAlign | TextAlign.LEFT | Alignment of body element of the tooltips. |
bodySpacing | int | 2 | Spacing to add to top and bottom of each tooltip item. |
borderColor | String - IsColor | rgba(0,0,0,0) - | Color of the border. |
borderWidth | int | 0 | Size of the border. |
boxWidth | int | getBodyFont().getSize() | Width of the color box if displayColors is true . |
boxHeight | int | getBodyFont().getSize() | Height of the color box if displayColors is true . |
caretPadding | int | 2 | Extra distance to move the end of the tooltip arrow away from the tooltip point. |
caretSize | int | 5 | Size, in px, of the tooltip arrow. |
cornerRadius | int - BarBorderRadius | 6 | Radius of tooltip corner curves. |
displayColors | boolean | true | If true , color boxes are shown in the tooltip. |
enabled | boolean | true | If true , the tooltips are enabled. |
events | IsEvent[] - 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. |
footerColor | String - IsColor | #fff - | Color of the footer. |
footerFont | Font | See description | Font of footer text. The default value is the global font with the style set to Weight.BOLD. See Font. |
footerAlign | TextAlign | TextAlign.LEFT | Alignment of footer element of the tooltips. |
footerMarginTop | int | 6 | Margin to add before drawing the footer. |
footerSpacing | int | 2 | Spacing to add to top and bottom of each footer line. |
intersect | boolean | Defaults.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. |
mode | InteractionMode | Defaults.get().getGlobal() .getInteraction().getMode() | Sets which elements appear in the tooltip. |
multiKeyBackground | String - IsColor | #fff - | Color to draw behind the colored boxes when multiple items are in the tooltip. |
padding | Padding | 6 to all dimensions | The padding to add inside the tooltip. See padding documentation for more details. |
position | TooltipPosition | TooltipPosition.AVERAGE | The mode for positioning the tooltip. |
rtl | boolean | false | true for rendering the tooltips from right to left. |
textDirection | TextDirection | TextDirection.LEFT_TO_RIGHT | This will force the text direction on the canvas for rendering the tooltips, regardless of the CSS specified on the canvas |
titleColor | String - IsColor | #fff - | Color of the footer. |
titleFont | Font | See description | Font of title text. The default value is the global font with the style set to Weight.BOLD. See Font. |
titleAlign | TextAlign | TextAlign.LEFT | Alignment of title element of the tooltips. |
titleMarginBottom | int | 6 | Margin to add on bottom of title section. |
titleSpacing | int | 2 | Spacing to add to top and bottom of each title line. |
usePointStyle | boolean | false | Use the corresponding point style (from dataset options) instead of color boxes (size is based on the minimum value between box width and box height). |
xAlign | TooltipAlign | TooltipAlign.AUTO | Position of the tooltip caret in the X direction. Can accept only TooltipAlign.LEFT, TooltipAlign.CENTER and TooltipAlign.RIGHT. |
yAlign | TooltipAlign | TooltipAlign.AUTO | Position 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:
Name | Type | Default | Description |
---|---|---|---|
align | ElementAlign | ElementAlign.CENTER | Alignment of the title. |
color | String - IsColor | Defaults.get().getGlobal() .getColorAsString() | Color of text of the title. See default colors. |
display | boolean | false | If true , the title is shown. |
font | Font | See description | Font of title text. The default value is the global font with the style set to Weight.BOLD. See Font. |
fullSize | boolean | true | Marks that this box should take the full width/height of the canvas (moving other boxes). |
padding | Padding | 10 to all dimensions | Number of pixels to add above and below the title text. See padding documentation for more details. |
position | Position | Position.TOP | Position 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:
Name | Type | Default | Description |
---|---|---|---|
align | ElementAlign | ElementAlign.CENTER | Alignment of the subtitle. |
color | String - IsColor | Defaults.get().getGlobal() .getColorAsString() | Color of text of the subtitle. See default colors. |
display | boolean | false | If true , the title is shown. |
font | Font | See description | Font of subtitle text. The default value is the global font with the style set to Weight.NORMAL. See Font. |
fullSize | boolean | true | Marks that this box should take the full width/height of the canvas (moving other boxes). |
padding | Padding | 0 to all dimensions | Number of pixels to add above and below the subtitle text. See padding documentation for more details. |
position | Position | Position.TOP | Position 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:
Name | Type | Default | Description |
---|---|---|---|
backgroundColor | String - IsColor | Defaults.get().getGlobal() .getBackgroundColorAsString() | Point fill color. See default colors. |
borderColor | String - IsColor | Defaults.get().getGlobal() .getBorderColorAsString() | Point stroke color. See default colors. |
borderWidth | int | 1 | Point stroke width. |
hitRadius | int | 1 | Extra radius added to point radius for hit detection. |
hoverBackgroundColor | String - IsColor | See backgroundColor | Point fill color when hovered. |
hoverBorderColor | String - IsColor | See borderColor | Point stroke color when hovered. |
hoverBorderWidth | int | See borderWidth | Stroke width when hovered. |
hoverRadius | int | 4 | Point radius when hovered. |
pointStyle | PointStyle - Img - Canvas | PointStyle.CIRCLE | Point style. |
radius | int | 3 | Point radius. |
rotation | double | 0 | The 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:
Name | Type | Default | Description |
---|---|---|---|
backgroundColor | String - IsColor | Defaults.get().getGlobal() .getBackgroundColorAsString() | Line fill color. See default colors. |
borderCapStyle | CapStyle | CapStyle.BUTT | Determines the shape used to draw the end points of lines. See MDN. |
borderColor | String - IsColor | Defaults.get().getGlobal() .getBorderColorAsString() | Line stroke color. See default colors. |
borderDash | int[] | [] | 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. |
borderDashOffset | double | 0D | Line dash offset. See MDN. |
borderJoinStyle | JoinStyle | JoinStyle.MITER | The shape used to join two line segments where they meet. See MDN. |
borderWidth | int | 3 | Line stroke width. |
capBezierPoints | boolean | true | Set trueto keep Bezier control inside the chart, false` for no restriction. |
cubicInterpolationMode | CubicInterpolationMode | CubicInterpolationMode.DEFAULT | Interpolation mode to apply. |
fill | String - int - boolean - IsFill | Fill.FALSE | How to fill the area under the line. See Filling modes |
hoverBackgroundColor | String - IsColor | See backgroundColor | Line fill color when hovered. |
hoverBorderColor | String - IsColor | See borderColor | Line stroke color when hovered. |
hoverBorderWidth | int | See borderWidth | Stroke width when hovered. |
stepped | boolean - Stepped | Stepped.FALSE | If the line is shown as a stepped line. |
tension | double | 0 | Bezier 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:
Name | Type | Default | Description |
---|---|---|---|
angle | double | Double.NaN | Arc angle to cover, for polar chart only. |
backgroundColor | String - IsColor | Defaults.get().getGlobal() .getBackgroundColorAsString() | Arc fill color. See default colors. |
borderAlign | BorderAlign | BorderAlign.CENTER | Arc stroke alignment. |
borderColor | String - IsColor | #fff - | Arc stroke color. |
borderJoinStyle | JoinStyle | JoinStyle.BEVEL | Arc line join style. The default is JoinStyle.ROUND when borderAlign is BorderAlign.INNER.See MDN. |
borderRadius | int | 0 | The arc border radius (in pixels). |
borderWidth | int | 2 | Arc stroke width. |
circular | boolean | true | If the arc is curved. If false the arc will be flat. |
hoverBackgroundColor | String - IsColor | See backgroundColor | Arc fill color when hovered. |
hoverBorderColor | String - IsColor | See borderColor | Arc stroke color when hovered. |
hoverBorderJoinStyle | JoinStyle | JoinStyle.BEVEL | Arc line join style when hovered. See MDN. |
hoverBorderWidth | int | See borderWidth | Stroke width when hovered. |
hoverOffset | int | See offset | The offset of the arc (in pixels) when hovered. |
offset | int | 0 | The offset of the arc (in pixels). |
spacing | int | 0 | Fixed 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:
Name | Type | Default | Description |
---|---|---|---|
autoInflateAmount | boolean | true | If true , the amount of pixels to inflate the bar rectangles, when drawing, is automatically calculating. |
backgroundColor | String - IsColor | Defaults.get().getGlobal() .getBackgroundColorAsString() | Bar fill color. See default colors. |
base | double | Undefined.DOUBLE | Base value for the bar in data units along the value axis. |
borderColor | String - IsColor | Defaults.get().getGlobal() .getBorderColorAsString() ) | Bar stroke color. See default colors. |
borderRadius | int | 0 | The bar border radius (in pixels). |
borderSkipped | boolean - BorderSkipped | BorderSkipped.START | The edge to skip when drawing bar. |
borderWidth | int | 0 | The bar border width (in pixels). |
enableBorderRadius | boolean | true | If true , it only shows the border radius of a bar when the bar is at the end of the stack. |
hoverBackgroundColor | String - IsColor | See backgroundColor | Bar fill color when hovered. |
hoverBorderColor | String - IsColor | See borderColor | Bar stroke color when hovered. |
hoverBorderWidth | int | See borderWidth | Stroke width when hovered. |
hoverBorderRadius | int | See borderRadius | The bar border radius (in pixels) when hovered. |
inflateAmount | int | Undefined.INTEGER | The amount of pixels to inflate the bar rectangles, when drawing. |
pointStyle | PointStyle - Img - Canvas | PointStyle.CIRCLE | Point 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:
Name | Type | Default | Description |
---|---|---|---|
animation | Animation | - | See animation options section for more details. |
animations | Animations | - | See animation options section for more details. |
barPercentage | double | 0.9 | Percent (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. |
categoryPercentage | double | 0.8 | Percent (0-1) of the available width each category should be within the sample width. |
barThickness | int | 0 | Manually 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. |
grouped | boolean | true | Should 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. |
maxBarThickness | int | 0 | Set this to ensure that bars are not sized thicker than this. |
minBarLength | int | 0 | Set this to ensure that bars have a minimum length in pixels. |
showLine | boolean | true | If true , the line is drawn for dataset. |
transitions | Transitions | - | 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:
Name | Type | Default | Description |
---|---|---|---|
autoPadding | boolean | true | If true , apply automatic padding so visible elements are completely drawn. |
padding | Padding | 0 on all sides | To 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:
Name | Type | Default | Description |
---|---|---|---|
enabled | boolean | false | If true , the data decimation is enabled. |
algorithm | DecimationAlgorithm | DecimationAlgorithm.MIN_MAX | Decimation algorithm to use. |
samples | double | Undefined.DOUBLE | If 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. |
threshold | double | Undefined.DOUBLE | If 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:
- The dataset must have an IndexAxis of
IndexAxis.X
. - The dataset must be a line.
- 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:
Name | Type | Default | Description |
---|---|---|---|
propagate | boolean | true | If true , the fill area will be recursively extended to the visible target defined by the fill value of hidden data set targets. |
drawTime | DrawTime | DrawTime.BEFORE_DATASET_DRAW | Filler draw time. |