Home › docs › charts › chart options (reference) › axisX

Pages

open all | close all

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 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 it Yourself by Editing the Code below.
 

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 it Yourself by Editing the Code below.

  Also See:    


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

Comments 13

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

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

© fenopix
About Us
FAQs
Careers
Privacy Policy

Server Side Technologies
ASP.NET MVC Charts
PHP Charts
JSP Charts
Spring MVC Charts

Front End Technologies
JavaScript Charts
jQuery Charts
React Charts
Angular Charts
JavaScript StockCharts

Contact
Fenopix, Inc.
2093 Philadelphia Pike,
#5678, Claymont,
Delaware 19703
United States Of America

Server Side Technologies
Front End Technologies
Contact
ASP.NET MVC Charts JavaScript Charts FAQs
PHP Charts jQuery Charts Sales Enquiries
Spring MVC Charts React Charts Support Forum
JSP Charts Angular Charts Careers
JavaScript StockCharts

Privacy Policy  © fenopix