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 :"Axis Y 1 Title",
   },
   {
	Title: "Axis Y 2 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 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 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
axisX logarithmic Boolean false true, false
axisX 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 2 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 it Yourself by Editing the Code below.

 

Composite Attribute (Object)

Object Attributes Type Default Options
axisY2 stripLines Object

 
var  chart =  new  Canvasjs("container",
{
	axisY2: {
		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 17

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

    • [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.

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

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.