Axis

Axis element of chart
Class: Chart.Axis()
Axis Class represents the Axis of a Chart. One chart may have multiple Axis. An Axis can work as AxisX or AxisY or AxisZ or Circular Axis. When an Axis is added to axesX list of chart then it is consider as a x-axis. When an Axis is added to the axesY list of chart then it is considered as y-axis.


Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{width:500,
                                           height:300});

/* Create instance of AxisX and AxisY */
var axisY = new Cosfire.Axis({ title: "AxisY Title"}); 
var axisX = new Cosfire.Axis({ title: "AxisX Title"});

/* Add the axes to chart */
chart.axesX.add(axisX);
chart.axesY.add(axisY);
Using JSON Approach
                                    var chartJSON = { width: 500,
                  height: 300,
                  axesX :[{ title: "AxisX Title"}],
                  axesY :[{ title: "AxisY Title"}]
                };
                                    
var chart = new Cosfire.Chart("chart-div", chartJSON);

List of Properties Supported in Axis.


Axis Properties
Property Type Default Possible Values Description
id String --- Any String Id for each Axis is auto generated. Helps to attach a Axis with one or multiple data Series.
visible Boolean true • true • false Hide the Axis from the view.
axisType Axis.AxisType primary • primary • secondary Defines the type of the Axis.
scaleType String numeric • numeric(For both Numeric/Category Axis)
• datetime 		Data format that has been specified in x of the DataPoints defined the type of the scale.
min Number --- • Number (For both Numeric/Category Axis)
• Date() (For Date/DateTime Axis)
• Timestamp in millisecond. (Also For Date/DateTime Axis) 		If not set min value will minimum value will be calculated from the data-set.
max Number --- • Number (For both Numeric/Category Axis)
• Date() (For Date/DateTime Axis)
• Timestamp in millisecond. (Also For Date/DateTime Axis) 		If not set max value will minimum value will be calculated from the data-set.
interval Number numeric Interval must be greater than zero How scale is divided into multiple section. Interval defines one unit of scale gap between two ticks.
intervalType Axis.IntervalType numeric
  • numeric
  • year
  • month
  • day
  • hour
  • minute
  • second
  • millisecond
 Type of the interval. In case of DateTime Axis intervalType property works if and only if interval property is set.
Axis Title Properties
Property Type Default Possible Values Description
title String N/A N/A Title of the Axis.
titleFont Cosfire.Font() Instance of Font() Class --- This property is a object of type Font provides all the necessary functionality for styling the font of the Axis title.
Example:
Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{ width: 500,
                                            height: 300});

/* Create instance of AxisX and AxisY */
var axisY = new Cosfire.Axis({ 
    title: "AxisY Title", 
    titleFont: { 
                fontSize: 12, 
                fontWeight: 'bold',
                fontColor: 'red'
               }
});

/* Add the axes to chart */
chart.axesY.add(axisY);
Using JSON Approach
                                    var chartJSON = {width: 500,
                 height: 300,
                 axesY :[{ title: "AxisY Title", 
                           titleFont: { 
                                       fontSize: 12,
                                       fontWeight: "bold",
                                       fontColor: "red"
                                      }
                        }]
                 };
                                    
var chart = new Cosfire.Chart("chart-div", chartJSON);
AxisLabel Properties
Property Type Default Possible Values Description
labelFont Cosfire.Font() Instance of Font() Class --- This property is a object of type Font provides all the necessary functionality for styling the font of the Axis labels.
labelAngle Number undefined Any Number Angle that will be applied on the labels that are displayed under Axis scale.
Example:
Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{ width: 500,
                                            height: 300});

/* Create instance of AxisX and AxisY */
var axisY = new Cosfire.Axis({ 
    title: "AxisY Title", 
    labelFont: { 
                fontSize: 12, 
                fontWeight: 'bold',
                fontColor: 'red'
               }
});

/* Add the axes to chart */
chart.axesY.add(axisY);
Using JSON Approach
                                    var chartJSON = {width: 500,
                 height: 300,
                 axesY :[{ title: "AxisY Title", 
                           labelFont: { 
                                       fontSize: 12,
                                       fontWeight: "bold",
                                       fontColor: "red"
                                      }
                        }]
                };
                                    
var chart = new Cosfire.Chart("chart-div", chartJSON);
AxisLine Properties
Property Type Default Possible Values Description
axisLineThickness Number 1 Number > 0 Thickness of the Axis Line.
axisLineColor String black The color is specified by:Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. The Axis LineColor property is used to set the color Axis line.
tickEnabled Boolean true • true • false Whether to display tick on Axis or not.
tickLength Number 7 Number > 0 TickLength of the tick line.
tickThickness Number 1 Number > 0 Thickness of the tick line.
tickColor String black The color is specified by: -color name - like "red"
-HEX value - like "#ff0000"
-RGB value - like "rgb(255,0,0)" 		The axisLineColor property is used to set the color Axis line.
Select the Y-axis or the X-axis of the chart and Format Grid Lines Properties.
Property Type Default Possible Values Description
gridEnabled Boolean false • true • false Whether to display gridEnabled on axis or not.
gridOpacity Number 0.4 0 to 1 Opacity of the Grid
gridBackgroundColor String #ffffff The color is specified by: color name - like "red"
HEX value - like "#ff0000"
-RGB value - like "rgb(255,0,0)"		 The Layer Canvas Grid Color property is used to set the color Grid.
gridInterval Number Not Set Grid Interval must be greater than zero Grid Interval Property used to set distance between Tick Marks, Grid Lines and Interlaced Colors on Axis Y and Axis X.
gridBackgroundColor String #ffffff The color is specified by: -color name - like "red"
-HEX value - like "#ff0000"
-RGB value - like "rgb(255,0,0)"		 The Layer Canvas Grid Color property is used to set the color Grid.
gridLineColor String #000000 The color is specified by: -color name - like "red"
-HEX value - like "#ff0000"
-RGB value - like "rgb(255,0,0)"		 The axis Grid Line Color Property is used to set the Grid Line
gridInterlacedColor String #a1a1a1 The color is specified by: -color name - like "red"
-HEX value - like "#ff0000"
-RGB value - like "rgb(255,0,0)"		 The axis Grid Interlaced Color property is used to set the background color.
gridLineThickness Number 0.3 Number > 0 Thickness of the grid line.
gridLineStyle String solid • solid • dash • dot Defines the type of the gridLineStyle
Value Formatting Properties
Property Type Default Possible Values Description
valueFormat String Not Set
  • Formatting Number Examples.
  • Formatting Date and Time Example.
    		•  We can format values that are displaced on Axis Scale.
    valueFormatRange String Not Set Example: [1000, 'K', 1000000, 'M'] Apply range to format the x automatically before displaying.
    valueFormatFunc String Not Set javascript function Define custom function and attach to axis by setting valueFormatFunc property of Axis. The function will be called automatically by the render engine.