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",
{
 .
 .
 axisY: [
  {
    title: "1st Axis Y Title",
  },
  {
    title: "2nd Axis Y 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 titleBorderColor String transparent “red”,”#FABD76″,…. –
axisY titleBorderThickness Number 0 2,4 .. –
axisY titleTextAlign String “left” “left”, “center”, “right” –
axisY titleFontColor String “#333333” “red”, “#006400” .. –
axisY titleFontSize Number Auto. Calculated 25, 30 .. –
axisY titleFontFamily String “Trebuchet MS, Helvetica, 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 “Trebuchet MS, Helvetica, sans-serif” “tahoma”, “verdana” .. –
axisY labelFontColor String “#000000” “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 labelPlacement String “outside” “outside”, “inside” –
axisY labelTextAlign String “left” “left”,”center”,”right”
–
axisY prefix String “” “$”, “cat”.. –
axisY suffix String “” “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 1 5, 8.. –
axisY tickPlacement String “outside” “outside”, “inside” –
axisY lineColor String “#BBBBBB” “red”, “#006400” .. –
axisY lineThickness Number 1 5, 8.. –
axisY interlacedColor String “transparent” “#F8F1E4”, “#FEFDDF” .. –
axisY gridThickness Number 1 5, 8.. Inc. to see grid
axisY gridColor String “#666666” “red”, “#006400” .. –
axisY includeZero Boolean false true, false –
axisY gridDashType String “solid” “dot”, “dash” etc. –
axisY lineDashType String “solid” “dot”, “dash” etc. –
axisY labelFormatter Function – – –
Try Editing The Code
 

Composite Attribute (Object)

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

  Also See:    

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

6 Comments

  2. XinQian says:

    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

    • Sunil Urs says:

      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.

      • XinQian says:

        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

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