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 :"Axis X 1 Title",
  },
  {
  title :"Axis X 2 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 titleFontColor String “#666666” “red”, “#006400” ..
axisX titleFontSize Number Auto. Calculated 25, 30 ..
axisX titleFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, 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 “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “tahoma”, “verdana” ..
axisX labelFontColor String “grey” “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 prefix String null “batch”, “cat”..
axisX suffix String null “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 “#BBBBBB” “red”, “#006400” ..
axisX tickThickness Number 2 5, 8..
axisX lineColor String “#BBBBBB” “red”, “#006400” ..
axisX lineThickness Number 2 5, 8..
axisX interlacedColor String null “#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 it Yourself by Editing the Code below.
 

Composite Attribute (Object)

Object Attributes Type Default Options
axisX stripLines Object

 
var  chart =  new  Canvasjs("container",
{
	axisX: {
		stripLines: {}
	},
});
chart.render();

 

Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 13

  1. 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?

  2. 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.

  3. 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

    • 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??

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.