DHTMLX Docs & Samples Explorer

Scales

Horizontal and vertical scales can be set for Bar, Area, Scatter and Line Charts. You may define them both or just one of them.

Both vertical and horizontal scales have the following properties:

  • template – a template for scale labels (isn't necessary for the vertical scale);
  • title – the scale title;
  • color - the scale color;
  • lines – a boolean value (true or false), that defines if scale lines need being drawn.

'Vertical Bar' and Line Charts personality.

  • origin - the scale origin (value type is integer)

Each mark of the horizontal scale (xAxis property) corresponds to one data object.

The vertical scale (yAxis property) sets the top and bottom limits for displayed values. The marks of the scale are defined in scale configuration by the three properties:

  • end – the top value of the scale,
  • start – the bottom value,
  • step – the scale unit.

If these properties are not set, they will be automatically calculated (note, if you set as least one of the properties, automatic calculation is cancelled and you must specify 2 remaining properties for correct running). However, you may control the minimum value of a scale using the “origin” property of a chart. For example, if you've set origin:0, the scale will start from 0 value, even if the minimum value in dataset is greater.

The vertical scale also requires the same properties as the horizontal scale: template, title, color and lines.

 
For Bar Chart sub-types "barH" and "stackedBarH" properties of xAxis and yAxis are swapping.

var chart =  new dhtmlXChart({
	…
        xAxis:{
		title: "Years",
		template: "#year#",
                lines: true
	},
	yAxis:{
		start:-10,
		end:10,
		step:2,
		title:"Sales,mil"
	},
        origin:0
 
})
 
var data = [
   { sales:"3.0", year:"2000" },
   { sales:"3.8", year:"2001" },
    ...
   { sales:"4.8", year:"2009" }
];
chart.parse(data,"json");

 
If you have both positive and negative values, you may use the origin property to set the desired scale origin for better representation.