axisX2 is the secondary axis which renders on the opposite of primary axis (axisX). It is mostly horizontal on top, except when we are working with Bar Charts, where axisX2 is vertical on right.
var chart = new CanvasJS.Chart("container", { . . axisX2: { title :"Axis X2 Title", }, . . }); chart.render();
axisX2 can also contain multiple Axis objects in the form of an array in case you need Multiple Secondary X Axis as shown below.
var chart = new CanvasJS.Chart("container", { . . axisX2: [ { title :"1st Secondary Axis X Title", }, { title: "2nd Secondary Axis X Title" } ], . . }); chart.render();
Applies To | Attribute | Type | Default | Options/Examples | Remarks |
---|---|---|---|---|---|
axisX2 | title | String | null | “Axis Title” | |
axisX2 | titleWrap | Boolean | true | true, false | |
axisX2 | titleMaxWidth | Number | Automatically Calculated based on Chart Size | 150, 200 | |
axisX2 | titleFontColor | String | “#666666” | “red”, “#006400” .. | |
axisX2 | titleFontSize | Number | Auto. Calculated | 25, 30 .. | |
axisX2 | titleFontFamily | String | “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” | “arial” , “tahoma”, “verdana” .. | |
axisX2 | titleFontWeight | String | “normal” | “lighter”, “normal, “bold”, “bolder” | |
axisX2 | titleFontStyle | String | “normal” | “normal”,“italic”, “oblique” | |
axisX2 | margin | Number | 2 | 10, 12 .. | |
axisX2 | labelBackgroundColor | String | “transparent” | “red”, “#fabd76” | |
axisX2 | labelMaxWidth | Number | Automatically calculated based on the length of label | 45,150, 60 .. | |
axisX2 | labelWrap | Boolean | true | true, false | |
axisX2 | labelAutoFit | Boolean | true | true, false | |
axisX2 | labelAngle | Number | 0 | 45,-45, 60 .. | |
axisX2 | labelFontFamily | String | “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” | “tahoma”, “verdana” .. | |
axisX2 | labelFontColor | String | “grey” | “red”, “#006400” .. | |
axisX2 | labelFontSize | Number | Auto. Calculated | 25, 30 .. | |
axisX2 | labelFontWeight | String | “normal” | “lighter”, “normal, “bold”, “bolder” | |
axisX2 | labelFontStyle | String | “normal” | “normal”,“italic”, “oblique” | |
axisX2 | labelPlacement | String | “outside” | “outside”, “inside” | – |
axisX2 | labelTextAlign | String | “left” | “left”,”center”,”right” | |
axisX2 | prefix | String | null | “batch”, “cat”.. | |
axisX2 | suffix | String | null | “batch”, “cat”.. | |
axisX2 | valueFormatString | String | null | “#,##0.##” | |
axisX2 | minimum | Number | null | -100, 350 | |
axisX2 | maximum | Number | null | 100, 350 | |
axisX2 | interval | Number | null | 25, 40 | |
axisX2 | intervalType | String | null | 25, 40 | |
axisX2 | reversed | Boolean | false | true, false | |
axisX2 | logarithmic | Boolean | false | true, false | |
axisX2 | logarithmBase | Number | 10 | 2,10 … | |
axisX2 | tickLength | Number | 5 | 15, 20 | |
axisX2 | tickColor | String | “#BBBBBB” | “red”, “#006400” .. | |
axisX2 | tickThickness | Number | 2 | 5, 8.. | |
axisX2 | lineColor | String | “#BBBBBB” | “red”, “#006400” .. | |
axisX2 | lineThickness | Number | 2 | 5, 8.. | |
axisX2 | interlacedColor | String | null | “#F8F1E4”, “#FEFDDF” .. | |
axisX2 | gridThickness | Number | 0 | 5, 8.. | |
axisX2 | gridColor | String | “#BBBBBB” | “red”, “#006400” .. | |
axisX2 | gridDashType | String | “solid” | “dot”, “dash” etc. | |
axisX2 | lineDashType | String | “solid” | “dot”, “dash” etc. | |
axisX2 | labelFormatter | Function |
Composite Attribute (Object)
Object | Attributes | Type | Default | Options |
---|---|---|---|---|
axisX2 | stripLines | Object | ||
axisX2 | crosshair | Object | ||
axisX2 | scaleBreaks | Object |
var chart = new CanvasJS.Chart("container", { axisX2: { stripLines: {} }, }); chart.render();
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