scales
defines configuration of chart scales
scales?: IScalesConfig;
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
}
]
});
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".
| title | (string) sets a title for a scale Related Sample: Chart. Scale title |
| text | (string) sets a template for labels of data items rendered on a scale |
| textTemplate | (function) sets a template for scale labels Related Sample: Chart. Text template for scale labels |
| textPadding | (number) distance between labels of data items and the scale |
| showText | (boolean) shows/hides labels of data items on the scale |
| scaleRotate | (number) the degree of rotation of labels of data items on the scale Related Sample: Chart. Scale rotate |
| scalePadding | (number) distance between the scale and its title |
| hidden | (boolean) hides/shows the whole scale |
| grid | (boolean) 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 | (boolean) sets the dashed type for a scale. Use the dashed:true option in the configuration of the scale Related Sample: Chart. Dashed grid |
| targetLine | (number) shows a threshold line (a target value); looks for the specified value in the data Related Sample: Chart. Target value and target line |
| targetValue | (number) 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 | (number) the maximal value of the Y scale |
| min | (number) the minimal value of the Y scale |
| log | (boolean) sets the Y scale as logarithmic |
| padding | (number) the padding between the values of the Y scale (area) |
| maxTicks | (number) sets the maximal number of ticks on the Y scale |
| size | (number) sets the padding between the scale and the chart container |
| locator | (string) 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
The radial scale is used for Radar chart (type: "radar") and has its own properties, due to peculiarities of configuration:
| radial scale | (object) the radial scale contains the following properties:
|
Related sample: Chart. Radar chart. Axis configuration