axisY2: Object

axisY2 is the secondary axis which renders on the opposite of primary axis (axisY). It is mostly vertical, except when we are working with Bar Charts, where axisY2 is horizontal.

Notes
  • It is not applicable for Pie and Doughnut charts.
  • axisY2 contains the same properties as axisY. 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisY2: {
    
   title: "Axis Y2 Title"
 }
 .
});
chart.render();

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

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

Simple axisY2 Attributes

Note
  • It is not applicable for Pie and Doughnut charts.
  • axisY2 has exactly the same properties as axisY object and hence all links below will redirect to corresponding pages in axisY.
Applies To Attribute Type Default Options/Examples Remarks
axisY2 title String null “Axis Y Title”
–
axisY2 titleWrap Boolean true true, false
–
axisY2 titleMaxWidth Number Automatically Calculated based on Chart Size 150, 200
–
axisY2 titleBorderColor String transparent “red”,”#FABD76″,….
–
axisY2 titleBorderThickness Number 0 2,4 ..
–
axisY2 titleTextAlign String “left” “left”, “center”, “right”
–
axisY2 titleFontColor String “#666666” “red”, “#006400” ..
–
axisY2 titleFontSize Number Auto. Calculated 25, 30 ..
–
axisY2 titleFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “arial” , “tahoma”, “verdana” ..
–
axisY2 titleFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
–
axisY2 titleFontStyle String “normal” “normal”,“italic”, “oblique”
–
axisY2 margin Number 2 10, 12 ..
–
axisY2 labelBackgroundColor String “transparent” “red”, “#fabd76”
–
axisY2 labelMaxWidth Number Automatically calculated based on the length of label 45,150, 60 ..
–
axisY2 labelWrap Boolean true true, false
–
axisY2 labelAutoFit Boolean true true, false
–
axisY2 labelAngle Number 0 45,-45, 60 ..
–
axisY2 labelFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “tahoma”, “verdana” ..
–
axisY2 labelFontColor String “grey” “red”, “#006400” ..
–
axisY2 labelFontSize Number Auto. Calculated 25, 30 ..
–
axisY2 labelFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
–
axisY2 labelFontStyle String “normal” “normal”,“italic”, “oblique”
–
axisY2 labelPlacement String “outside” “outside”, “inside” –
axisY2 labelTextAlign String “left” “left”,”center”,”right”
–
axisY2 prefix String null “$”, “cat”..
–
axisY2 suffix String null “USD”, “cat”..
–
axisY2 valueFormatString String null “#,##0.##”
Auto Calculated
axisY2 minimum Number null -100, 350
Auto Calculated
axisY2 maximum Number null 100, 350
Auto Calculated
axisY2 interval Number null 25, 40
Auto Calculated
axisY2 reversed Boolean false true, false
–
axisY2 logarithmic Boolean false true, false
–
axisY2 logarithmBase Number 10 2,10 …
–
axisY2 tickLength Number 5 15, 20
–
axisY2 tickColor String “#BBBBBB” “red”, “#006400” ..
–
axisY2 tickThickness Number 2 5, 8..
–
axisY2 lineColor String “#BBBBBB” “red”, “#006400” ..
–
axisY2 lineThickness Number 1 5, 8..
–
axisY2 interlacedColor String null “#F8F1E4”, “#FEFDDF” ..
–
axisY2 gridThickness Number 2 5, 8..
Inc. to see grid
axisY2 gridColor String “#BBBBBB” “red”, “#006400” ..
–
axisY2 includeZero Boolean true false, true
–
axisY2 gridDashType String “solid” “dot”, “dash” etc.
–
axisY2 lineDashType String “solid” “dot”, “dash” etc.
–
axisY2 labelFormatter Function
–
–
–
Try Editing The Code

Composite Attribute (Object)

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

  Also See:    

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

17 Comments

  1. philippe says:

    Hello. I am a web developer. I have questions.
    Do you support three or more Y-axes in CanvasJS?
    If you do not support Do you have a development plan?

    • Sunil Urs says:

      [Update]
      We have just released v1.9.5 Beta which supports Secondary X Axis and Multiple X / Y Axis. Please refer to the release blog for more information.

      Ronnie,

      Sorry, we don’t support more than 2 y-axis yet. But we’ll be working on in 2 months.

      • mbayles says:

        Thanks for the quick answer. I have had to add quite a bit of code to make my chart look decent since all the data is dynamic. Are there plans to make some kind of auto align grid lines option in the future?

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