axisY: Object

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


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 axisY2 for secondary Y axis which renders on the opposite side of axisY.
  • It is not applicable for Pie and Doughnut charts.

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisY:{
  title:"Axis Y Title",
  },
 .
 .
});
chart.render();

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

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


Simple axisY Attributes

Applies To Attribute Type Default Options/Examples Remarks
axisY title String null “Axis Y Title”
axisY titleWrap Boolean true true, false
axisY titleMaxWidth Number Automatically Calculated based on Chart Size 150, 200
axisY titleFontColor String “#666666” “red”, “#006400” ..
axisY titleFontSize Number Auto. Calculated 25, 30 ..
axisY titleFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “arial” , “tahoma”, “verdana” ..
axisY titleFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
axisY titleFontStyle String “normal” “normal”,“italic”, “oblique”
axisY margin Number 2 10, 12 ..
axisY labelBackgroundColor String “transparent” “red”, “#fabd76”
axisY labelMaxWidth Number Automatically calculated based on the length of label 45,150, 60 ..
axisY labelWrap Boolean true true, false
axisY labelAutoFit Boolean true true, false
axisY labelAngle Number 0 45,-45, 60 ..
axisY labelFontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “tahoma”, “verdana” ..
axisY labelFontColor String “grey” “red”, “#006400” ..
axisY labelFontSize Number Auto. Calculated 25, 30 ..
axisY labelFontWeight String “normal” “lighter”, “normal, “bold”, “bolder”
axisY labelFontStyle String “normal” “normal”,“italic”, “oblique”
axisY prefix String null “$”, “cat”..
axisY suffix String null “USD”, “cat”..
axisY valueFormatString String null “#,##0.##”
Auto Calculated
axisY minimum Number null -100, 350
Auto Calculated
axisY maximum Number null 100, 350
Auto Calculated
axisY interval Number null 25, 40
Auto Calculated
axisY reversed Boolean false true, false
axisX logarithmic Boolean false true, false
axisX logarithmBase Number 10 2,10 …
axisY tickLength Number 5 15, 20
axisY tickColor String “#BBBBBB” “red”, “#006400” ..
axisY tickThickness Number 2 5, 8..
axisY lineColor String “#BBBBBB” “red”, “#006400” ..
axisY lineThickness Number 2 5, 8..
axisY interlacedColor String null “#F8F1E4”, “#FEFDDF” ..
axisY gridThickness Number 2 5, 8..
Inc. to see grid
axisY gridColor String “#BBBBBB” “red”, “#006400” ..
axisY includeZero Boolean true false, true
axisY gridDashType String “solid” “dot”, “dash” etc.
axisY lineDashType String “solid” “dot”, “dash” etc.
axisY labelFormatter Function
Try it Yourself by Editing the Code below.
 

Composite Attribute (Object)

Object Attributes Type Default Options
axisY stripLines Object

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

  1. Is it possible to make the label align ‘center’/left/right based on the Axis? It seems label for AsixY always shown at the left of the Axis, wihle labels for AxisY2 was showing on the right. If no attribute, is there any way to fix the the width for the label?

    BTW, is it possible to locate the two Y-Axis at the same side, like highchart…http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

    Thanks

    • XinQian,

      As of now we don’t have a way to fix the width of labels. But you can set labelMaxWidth so that they don’t take more space than what is defined.

      When it comes to having two Y Axis on the same side aligned, you can do so by creating two Charts with Secondary Y Axis and you can sync the X Axis of two chart while panning/zooming using rangeChanging event. Here is an example that I just created for you.

      • Sunil,
        Thanks for your suggestion.
        I also consider this way before, Since two charts were created, it seems I can not share their tooltip information in the same one. That is what confused me at this moment.
        BTW, it seems there is no way to make the two YAxis labels align if the their numbers are in different range.

        Thanks

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.