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.
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();
| 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 | “#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 | – | – | – |
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();
Comments 6
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
Can I flip Y axis labels ? Like I want to show the value start from 110 to -10
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
XinQian,
I’ve noted this feature down and we’ll consider it for future version. As of now there is a workaround (zero padding) for aligning them though by using valueFormatString. Here is an updated version.
Sunil.
Thanks a lot for your suggestion.
Thanks,
-Xin