Skip to main content
Version: 6.5

Cartesian Logarithmic Axes

The logarithmic axis is use to chart numerical data. It can be placed on either the x or y axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.

Here are some example how to create logarithmic axes:

// creates a logarithmic axis with default scale id "y" and default kind "y" 
CartesianLogarithmicAxis axis1 = new CartesianLogarithmicAxis(chart);

// creates a logarithmic axis with scale id "my-axis" and default kind "y"
CartesianLogarithmicAxis axis2 = new CartesianLogarithmicAxis(chart, "my-axis");

// creates a logarithmic axis with scale id "my-axis" and default kind "y"
CartesianLogarithmicAxis axis3 = new CartesianLogarithmicAxis(chart, ScaleId.create("my-axis"));

// creates a logarithmic axis with default scale id "y" and custom kind "y"
CartesianLogarithmicAxis axis4 = new CartesianLogarithmicAxis(chart, AxisKind.Y);

// creates a logarithmic axis with scale id "my-axis" and custom kind "y"
CartesianLogarithmicAxis axis5 = new CartesianLogarithmicAxis(chart, "my-axis", AxisKind.Y);

// creates a logarithmic axis with scale id "my-axis" and custom kind "y"
ScaleId myAxis = ScaleId.create("my-axis");
CartesianLogarithmicAxis axis6 = new CartesianLogarithmicAxis(chart, myAxis, AxisKind.Y);

// adds axes to chart configuration
chart.getOptions().setAxes(axis1, ...);

Options

The cartesian logarithmic axis allows to define a number of properties, used to display the data.

// creates a logarithmic axis 
CartesianLogarithmicAxis axis = new CartesianLogarithmicAxis(chart);
// sets and gets the max value
axis.setMax(10000);

double max = axis.getMax();

The following are the attributes that you can set:

NameTypeScriptableDescription
alignToPixelsbooleanYesAlign pixel values to device pixels.
backgroundColorString - IsColorYesThe background color of scale area.
boundsBoundsYesDetermines the scale bounds on axis.
displayboolean - DisplayYesIf Display.TRUE, the axis is shown.
maxdoubleYesUser defined maximum number for the scale, overrides maximum value from data.
mindoubleYesUser defined minimum number for the scale, overrides minimum value from data.
offsetbooleanYesIf true, extra space is added to the both edges and the axis is scaled to fit in the chart area.
positionAxisPosition - AxisPositionItemYesPosition of the axis.
reversebooleanYesReverses order of tick labels.
singleStackedboolean-If you might want to stack positive and negative values together.
stackStringYesSets the stack group. Axes at the same position with same stack are stacked.
stackedbooleanYesIf the axis are stacked.
stackWeightdoubleYesSets the weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.
suggestedMaxdoubleYesAdjustment used when calculating the maximum data value.
suggestedMindoubleYesAdjustment used when calculating the minimum data value.
weightdoubleYesThe weight used to sort the axis. Higher weights are further away from the chart area.

Scriptable

Scriptable options at scale level accept a callback which is called for each of the underlying data values. See more details in Configuring charts section.

All scriptable options callbacks will get a ScaleContext instance.

// creates a category axis 
CartesianLogarithmicAxis axis = new CartesianLogarithmicAxis(chart);
// sets the option by a callback
axis.setBackgroundColor(new ColorCallback<ScaleContext>(){

@Override
public IsColor invoke(ScaleContext context){
// logic
return color;
}
});

The following options can be set by a callback:

NameCallbackReturned types
alignToPixelsAlignToPixelsCallbackboolean
backgroundColorColorCallback<ScaleContext>String - IsColor
boundsBoundsCallbackBounds
displayDisplayCallbackboolean - Display
maxMinMaxCallback<Double>double
minMinMaxCallback<Double>double
offsetScaleOffsetCallbackboolean
positionScalePositionCallbackAxisPosition - AxisPositionItem
reverseReverseCallbackboolean
stackStackCallbackString
stackedStackedCallbackboolean
stackWeightScaleWeightCallbackdouble
suggestedMaxMinMaxCallback<Double>double
suggestedMinMinMaxCallback<Double>double
weightScaleWeightCallbackdouble

Ticks

The logarithmic axis provides the following options for configuring tick marks.

// creates a logarithmic axis 
CartesianLogarithmicAxis axis = new CartesianLogarithmicAxis(chart);
// sets and gets the max value
axis.getTicks().setColor(HtmlColor.RED);

IsColor color = axis.gteTicks().getColor();

The following are the attributes that you can set:

NameTypeScriptableDescription
alignTickAlign-The tick alignment along the axis.
autoSkipboolean-If true, automatically calculates how many labels that can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
autoSkipPaddingint-The padding between the ticks on the horizontal axis when autoSkip is enabled.
backdropColorString - IsColorYesColor of label backdrops.
backdropPaddingPadding-The padding of tick backdrop.
See padding documentation for more details.
colorString - IsColorYesColor of ticks.
crossAlignCrossAlign-The tick alignment perpendicular to the axis.
displayboolean-If true, the tick marks are shown.
fontIsFontYesFont of ticks.
See Font.
includeBoundsboolean-If true, the defined min and max values should be presented as ticks even if they are not "nice".
labelOffsetint-Distance in pixels to offset the label from the centre point of the tick (in the x-direction for the x-axis, and the y-direction for the y-axis).

Note: This can cause labels at the edges to be cropped by the edge of the canvas.
maxRotationint-The maximum rotation for tick labels when rotating to condense labels.

Note: Rotation doesn't occur until necessary and only applicable to horizontal scales.
minRotationint-The minimum rotation for tick labels.
mirrorboolean-The flips tick labels around axis, displaying the labels inside the chart instead of outside.

Note: Only applicable to vertical scales.
numberFormatNumberFormatOptionsYesThe number format options used by the default label formatter.
See INTL number format documentation
paddingint-The padding between the tick label and the axis.
sampleSizeint-The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
showLabelBackdropbooleanYesIf true, draw a background behind the tick labels
textStrokeColorString - IsColorYesThe color of the stroke around the text.
textStrokeWidthintYesStroke width around the text.
zint-z-index of tick layer. Useful when ticks are drawn on chart area. Values less than or equals to 0 are drawn under data sets, greater than 0 on top.

The further customization of ticks, a callback is provided.

Ticks scriptable options

Scriptable options at ticks level accept a callback which is called for each of the underlying data values. See more details in Configuring charts section.

All scriptable options callbacks will get a ScaleContext instance.

// creates a logarithmic axis 
CartesianLogarithmicAxis axis = new CartesianLogarithmicAxis(chart);
// sets the option by a callback
axis.getTicks().setColor(new ColorCallback<ScaleContext>(){

@Override
public IsColor invoke(ScaleContext context){
// logic
return color;
}
});

The following options can be set by a callback:

NameCallbackReturned types
backdropColorColorCallback<ScaleContext>String - IsColor
colorColorCallback<ScaleContext>String - IsColor
fontFontCallback<ScaleContext>FontItem
numberFormatNumberFormatCallbackNumberFormatItem
showLabelBackdropShowLabelBackdropCallbackboolean
textStrokeColorColorCallback<ScaleContext>String - IsColor
textStrokeWidthWidthCallback<ScaleContext>int

Callback

It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to implement a ticks callback in the axis configuration.

To apply a custom callback, you can set a TickCallback instance to the axis options, as following:

axis.getTicks().setCallback(new TickCallback(){

/**
* Changes the tick marks to include information about the data type.
*
* @param axis axis instance where this callback as been defined
* @param value value of tick
* @param index index of tick
* @param values list of all tick values
* @return the tick to apply or if the callback returns null the associated grid line will be hidden.
*/
public String onCallback(Axis axis, double value, int index, List<Double> values){
// add $
return "$" + value;
}

});

See INTL number format documentation if you want to use a number formatter, provided out-of-the-box.

The callback can return a string (for single line) or a list of strings (for multiple lines).

NoSelectedDatasetTicksCallback callback

Charba provides a common implementation for tick callback to set the decimal digits of ticks in case of all data sets are hidden, to avoid the annoying standard format of doubles.

To apply the callback, you can set an instance to the axis options, as following:

// creates a logarithmic axis 
CartesianLogarithmicAxis axis = new CartesianLogarithmicAxis(chart);
// sets the option by a callback
axis.getTicks().setCallback(new NoSelectedDatasetTicksCallback());

The default decimal precision is 2. A custom precision can be set by the constructor of callback, as following:

// creates a logarithmic axis 
CartesianLogarithmicAxis axis = new CartesianLogarithmicAxis(chart);
// sets the option by a callback
// 3 decimal digits
axis.getTicks().setCallback(new NoSelectedDatasetTicksCallback(3));