axisX: Object

axisX object lets you set various parameters of X Axis in Navigator like interval, grid lines, etc.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 navigator: {
   .
   .
   axisX: {
     valueFormatString: "MMM YY"
   },
   .
   .
 }
 .
 .
});
stockChart.render();

Simple Atrributes for axisX

Applies To Attribute Type Default Options/Examples Remarks
axisX title String null “Axis Title”
axisX titleWrap Boolean true true, false
axisX titleMaxWidth Number Automatically Calculated based on Navigator Size 150, 200, …
axisX titleTextAlign String “left” “left”, “center”, “right”
axisX titleFontColor String “#666666” “red”, “#006400”, …
axisX titleFontSize Number 0 25, 30, …
axisX titleFontFamily String “Verdana, Geneva, Calibri, sans-serif” “tahoma”, “verdana”, …
axisX titleFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
axisX titleFontStyle String “normal” “normal”,“italic”, “oblique”
axisX margin Number 2 10, 12, …
axisX labelBackgroundColor String “transparent” “red”, “#006400”, …
axisX labelMaxWidth Number Automatically Calculated based on Navigator Size 45, 150, 60, …
axisX labelWrap Boolean true true, false
axisX labelAutoFit Boolean true true, false
axisX labelAngle Number 0 45,-45, 60, …
axisX labelFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “tahoma”, “verdana”, …
axisX labelFontColor String “black” “red”, “#006400”, …
axisX labelFontSize Number 18 25, 30, …
axisX labelFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
axisX labelFontStyle String “normal” “normal”,“italic”, “oblique”
axisX labelPlacement String “outside” “outside”, “inside”
axisX labelTextAlign String “left” “left”,”center”,”right”
axisX prefix String null “$”, “#”, …
axisX suffix String null “K”, “m”, …
axisX valueFormatString String null “DD/MM/YYYY”, “##,#0.##”, …
Auto Formatted
axisX minimum Number/Date/Timestamp null -100, 350, …
Auto Calculated
axisX maximum Number/Date/Timestamp null 100, 350, …
Auto Calculated
axisX viewportMinimum Number/Date/Timestamp null -100, 350, …
Auto Calculated
axisX viewportMaximum Number/Date/Timestamp null 100, 350, …
Auto Calculated
axisX interval Number null 25, 40, …
Auto Calculated
axisX intervalType String Automatically handled when interval property is not set. Defaults to “number” when you set the interval. “number”, “millisecond” , “second”, “minute”, “hour”, “day”, “month” , “year”
used with interval
axisX reversed Boolean false true, false
axisX logarithmic Boolean false true, false
axisX logarithmBase Number 10 2, 10, …
axisX tickLength Number 0 15, 20, …
axisX tickColor String “black” “red”, “#006400”, …
axisX tickThickness Number 0 5, 8, …
axisX lineColor String “black” “red”, “#006400”, …
axisX lineThickness Number 0 5, 8, …
axisX interlacedColor String “transparent” “#F8F1E4”, “#FEFDDF”, …
axisX gridThickness Number 1 5, 8, …
Inc. to see grid
axisX gridColor String “#A0A0A0” “red”, “#006400”, …
axisX gridDashType String “solid” “solid”, “shortDash”, “shortDot”, “shortDashDot”, “shortDashDotDot”, “dot”, “dash”, “dashDot”, “longDash”, “longDashDot”, “longDashDotDot”
axisX lineDashType String “solid” “solid”, “shortDash”, “shortDot”, “shortDashDot”, “shortDashDotDot”, “dot”, “dash”, “dashDot”, “longDash”, “longDashDot”, “longDashDotDot”
axisX labelFormatter Function

Composite Atrributes (Object) for axisX

Object Attributes Type Default Options
axisX stripLines Object
axisX scaleBreaks Object
var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 navigator: {
   .
   .
   axisX: {
     stripLines: {}
   },
   .
   .
 }
 .
 .
});
stockChart.render();

  Also See:    


If you have any questions, please feel free to ask in our forums.Ask Question