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:
|
Related sample: Chart. Radar chart. Axis configuration
Related article: Configuration