xAxis

defines the horizontal axis

object xAxis;

Example

webix.ui({
    view:"chart",
    ...
    xAxis:{
        title: "Years",
        template: "#year#",
        lines: true
    }
});

Related samples

Bar Chart: Axes

Details

The property is applicable only to bar, line, area, scatter, radar charts.
Only the 'template' attribute is mandatory

Attributes of the property differ for different chart types:

template	(string,function) the template for the scale labels	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH, radar
title	(string) the axis title	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH
lines	(boolean, function) enables/disables vertical lines for the scale units (by default, true)	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH, radar
lineColor	(string,function) the color of the scale lines (by default, "#cfcfcf")	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH, radar
color	(string) the axis color (by default, "#000000")	bar, stackedBar, line, spline, area, stackedArea, scatter, barH, stackedBarH
start	(number) the minimum value of the scale	barH, stackedBarH
end	(number) the maximum value of the scale	barH, stackedBarH
step	(number) the scale step	barH, stackedBarH

If attributes end, start, step are not set, they will be automatically calculated.
However, you may control the minimum value of the scale by using the origin property. For example, if you set origin:0, the scale will start from '0', even if the minimum value in the dataset is greater.

'template' attribute. Function definition

As a function, 'template' is called for each data item of the chart and takes the item object as a parameter.

template: function(obj){
    return webix.Date.dateToStr("%F")(obj.date); // returns the month name
}

'lineColor' attribute. Function definition

Function definition allows you have different lines in different colors.

As a function, 'lineColor' is called for each data item of the chart and takes the item object as a parameter. Must return a string with the color (like in the code below).

lineColor:function(obj){
    return (obj.year%2 ? "#e9eef9" : "#f3f7ff"); //colors lines for odd and even years in different colors
}

'lines' attribute. Function definition

Function definition allows you to manipulate the visibility of lines: to hide/show them depending on the specified rules. We reccomend to use such a definition in case you have a lot of items, to prevent the chart from looking overloaded.

As a function, 'lines' is called for each data item of the chart and takes the item object as a parameter. Must return the true(show the line) or false(hide the line) value.

lines:function(obj){
    return (obj.year%2 ? true : false); // hides lines for odd years
}