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", "xbar", "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,
        alignTicks?: boolean | ScaleType,
        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. For details on the use of the property in a dual axis chart, check the grid section below Related Sample: Chart. Without grid (lines)
alignTicks	(optional) aligns the ticks of the scale with the ticks of another scale of the same direction. Check the alignTicks section
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)

Options for a dual axis chart

The grid and alignTicks properties define how the grid is rendered when a chart declares both scales of a direction: "left" and "right" or "bottom" and "top". Check the Dual axis chart section of the guide for the details.

grid

grid?: boolean

If a chart has two scales of the same direction:

• the grid of this direction belongs to the first of them ("bottom" for the horizontal direction and "left" for the vertical one)
• the chart renders the second scale without the grid

Set grid: true for the second scale to render both grids, or grid: false for the first one to leave the grid to the second scale.

Related article: Grid of the second scale

alignTicks

alignTicks?: boolean | ScaleType

The alignTicks property makes the scale take the number of ticks from another scale of the same direction and spread its own range over them, so that both grids match. The accepted values of the property are:

• false/undefined - the scale chooses the number of its ticks on its own. Only the first scale of the direction renders the grid, while the second one renders its labels, its own scale line and its targetLine and targetValue, if they are specified
• true - the scale takes the number of ticks from the main scale of the same direction ("left" for the vertical direction and "bottom" for the horizontal one), so the grid lines of both scales coincide
• string - the position of the scale to take the number of ticks from ("left" | "right" | "bottom" | "top"), which has to be of the same direction

scales: {
    bottom: { text: "month" },
    left:   { title: "Volume, t" },
    right:  { title: "Share, %", alignTicks: true }
}

Related article: Matching the ticks of the two scales

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