Skip to main content

scales

Required. Defines configuration of scales for Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, and Scatter charts

scales: {[key: string]: object};

Example

const chart = new dhx.Chart("chart_container", {
type:"area",
scales: {
"bottom" : {
text: 'month'
},
"left" : {
padding: 10,
max: 90
}
},
series: [
{
value: 'company A',
strokeWidth: 2
// more options
}
]
});
info

The scales object can contain a set of key:value pairs where key is the type of a scale and value is an object with configuration options of the scale.

There are the following types of the scales: "left","right","top","bottom","radial".

The list of config options for scales

tip

You can apply the options below to configure scales for charts with the following types: "line", "spline", "bar", "x-bar", "area", "splineArea", "scatter".

Usage

scales: {
// type - "left" | "right" | "top" | "bottom"
type: {
title?: string,
text?: string,
textTemplate?: <T>(value: T) => string,
textPadding?: number,
showText?: boolean,
scaleRotate?: number,
scalePadding?: number,
hidden?: boolean,
grid?: boolean,
dashed?: boolean,
targetLine?: number | string,
targetValue?: number,
max?: number,
min?: number,
log?: boolean,
padding?: number,
maxTicks?: number,
size?: number,
locator?: string,
}
}

Description

title(optional) sets a title for a scale

Related Sample: Chart. Scale title
text(optional) sets a template for labels of data items rendered on a scale
textTemplate(optional) sets a template for scale labels

Related Sample: Chart. Text template for scale labels
textPadding(optional) distance between labels of data items and the scale
showText(optional) shows/hides labels of data items on the scale
scaleRotate(optional) the degree of rotation of labels of data items on the scale

Related Sample: Chart. Scale rotate
scalePadding(optional) distance between the scale and its title
hidden(optional) hides/shows the whole scale
grid(optional) shows/hides the grid lines (for x,y, or both scales). true by default for both scales (scales lines are shown). To hide both scales lines, you need to set grid:false in the configs of each scale

Related Sample: Chart. Without grid (lines)
dashed(optional) sets the dashed type for a scale. Use the dashed:true option in the configuration of the scale

Related Sample: Chart. Dashed grid
targetLine(optional) shows a threshold line (a target value); looks for the specified value in the data

Related Sample: Chart. Target value and target line
targetValue(optional) allows setting a threshold line at any defined level (any number, not necessarily from the data)

Related Sample: Chart. Target value and target line
max(optional) the maximal value of the Y scale
min(optional) the minimal value of the Y scale
log(optional) sets the Y scale as logarithmic
padding(optional) the padding between the values of the Y scale (area)
maxTicks(optional) sets the maximal number of ticks on the Y scale
size(optional) sets the padding between the scale and the chart container
locator(optional) points to the data property, the values of which should be rendered in the chart (used for Scatter chart only)


The list of config options for radial scales

tip

The radial scale is used for Radar chart (type: "radar") and has its own properties, due to peculiarities of configuration.

Usage

scales: {
radial: {
value?: string,
zebra?: boolean,
showAxis?: boolean
}
}

Description

radial(required) the radial object contains the following properties:
  • value - (optional) the name of a data set property to take data values from (map to)
  • zebra - (optional) sets a striped scale coloring for the Radar chart (alternation of two colors in a step)
  • showAxis - (optional) renders values of the scale

Related sample: Chart. Radar chart. Axis configuration

Related article: Configuration