axisX: Object

axisX object lets you set various parameters of X Axis like interval, grid lines, etc. It is mostly horizontal, except when we are working with Bar Charts, where axisX is vertical.

Note
  • Support for Multiple X / Y Axis and Secondary X Axis is available in v1.9.5 and above. Please download the latest version if you haven’t already.
  • You can use axisX2 to create secondary X axis which renders on the opposite side of axisX. Properties for axisX2 is same as axisX.
  • It is not applicable for Pie and Doughnut charts.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisX:{
  title:"Axis X title",
 },
 .
 .
});
chart.render();

axisX can also contain multiple Axis objects in the form of an array in case you need Multiple X Axis as shown below.

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisX: [
  {
  title :"1st Axis X Title",
  },
  {
  title :"2nd Axis X Title",
  }
], 
 .
 . 
});
chart.render();

Simple axisX Attributes

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 Chart Size 150, 200
–
axisX titleBorderColor String transparent “red”,”#FABD76″,…
–
axisX titleBorderThickness Number 0 2,4 ..
–
axisX titleTextAlign String “left” “left”, “center”, “right”
–
axisX titleFontColor String “#333333” “red”, “#006400” ..
–
axisX titleFontSize Number Auto. Calculated 25, 30 ..
–
axisX titleFontFamily String “Trebuchet MS, Helvetica, sans-serif” “arial” , “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”, “#fabd76”
–
axisX labelMaxWidth Number Automatically calculated based on the length of label 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 “Trebuchet MS, Helvetica, sans-serif” “tahoma”, “verdana” ..
–
axisX labelFontColor String “#000000” “red”, “#006400” ..
–
axisX labelFontSize Number Auto. Calculated 25, 30 ..
–
axisX labelFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
–
axisX labelFontStyle String “normal” “normal”,“italic”, “oblique”
–
axisX labelPlacement String “outside” “inside”,“outside”
–
axisX labelTextAlign String “left” “left”,”center”,”right”
–
axisX prefix String “” “batch”, “cat”..
–
axisX suffix String “” “batch”, “cat”..
–
axisX valueFormatString String null “#,##0.##”
Auto Formatted
axisX minimum Number null -100, 350
Auto Calculated
axisX maximum Number null 100, 350
Auto Calculated
axisX interval Number null 25, 40
Auto Calculated
axisX intervalType String null 25, 40
used with interval
axisX reversed Boolean false true, false
–
axisX logarithmic Boolean false true, false
–
axisX logarithmBase Number 10 2,10 …
–
axisX tickLength Number 5 15, 20
–
axisX tickColor String “#666666” “red”, “#006400” ..
–
axisX tickThickness Number 1 5, 8..
–
axisX tickPlacement String “outside” “outside”, “inside”
–
axisX lineColor String “#666666” “red”, “#006400” ..
–
axisX lineThickness Number 1 5, 8..
–
axisX interlacedColor String “transparent” “#F8F1E4”, “#FEFDDF” ..
–
axisX gridThickness Number 0 5, 8..
Inc. to see grid
axisX gridColor String “#BBBBBB” “red”, “#006400” ..
–
axisX gridDashType String “solid” “dot”, “dash” etc.
–
axisX lineDashType String “solid” “dot”, “dash” etc.
–
axisX labelFormatter Function
–
–
–
Try Editing The Code

Composite Attribute (Object)

Object Attributes Type Default Options
axisX stripLines Object
–
–
axisX crosshair Object
–
–
axisX scaleBreaks Object
–
–
  
var  chart =  new CanvasJS.Chart("container",
{
	axisX: {
		stripLines: {}
	},
});
chart.render();
 
Try Editing The Code

  Also See:    

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

13 Comments

  3. Allan says:

    I have a bar chart with labels (on axisX) and y values, where visually the y values are across the bottom and the labels are along the left side. I want to not show the labels. I’ve tried setting labelFontSize, gridThickness, lineThickness, tickThickness, to 0, and valueFormatString to ” ” (space) but the labels persist. Note that if I set labelFontSize to 1, the labels are still there but extremely tiny. (Not a bad effect, actually.) I know I can remove labels by setting them all in the data set to “”, but I think setting labelFontSize to 0 should also have the effect of not showing any labels, right?

  4. Allan says:

    I see that example, but if you change either the “x” or “y” in the data points to “label”, the label appears on the axis, even though the valueFormatString has been set to ” “. In my case, I need to use labels (not just numeric x and y) because they’re alphabetic text strings.

  7. jony says:

    hi,
    the zoomIn function isn’t work when I set minimum&maximum on axisX.
    Is possible both of them work at the same chart?

    thx

    • Sunil Urs says:

      Jony,

      Zooming does work when minimum and maximum are set. But the range of zooming gets limited by minimum and maximum values that you set. Here is an example.

      In case this is not what you were looking for, please create a JSFiddle so that we can have a look??

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