Skip to main content

scales

defines configuration of chart scales

scales?: IScalesConfig;

Example

var 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#

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. Grid
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 Line
targetValue(number) allows setting a threshold line at any defined level (any number, not necessarily from the data)

Related Sample: Chart. Target Value
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 and has its own properties, due to peculiarities of configuration:

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

Related sample: Chart. Axis Configuration