axisX object lets you set various parameters of X Axis in Navigator like interval, grid lines, etc.
var stockChart = new CanvasJS.StockChart("container", { . . navigator: { . . axisX: { valueFormatString: "MMM YY" }, . . } . . }); stockChart.render();
Applies To | Attribute | Type | Default | Options/Examples | Remarks |
---|---|---|---|---|---|
axisX | title | String | null | “Axis Title” | |
axisX | titleWrap | Boolean | true | true, false | |
axisX | titleMaxWidth | Number | Automatically Calculated based on Navigator Size | 150, 200, … | |
axisX | titleTextAlign | String | “left” | “left”, “center”, “right” | |
axisX | titleFontColor | String | “#666666” | “red”, “#006400”, … | |
axisX | titleFontSize | Number | 0 | 25, 30, … | |
axisX | titleFontFamily | String | “Verdana, Geneva, Calibri, sans-serif” | “tahoma”, “verdana”, … | |
axisX | titleFontWeight | String | “normal” | “lighter”, “normal, “bold”, “bolder” | |
axisX | titleFontStyle | String | “normal” | “normal”,“italic”, “oblique” | |
axisX | margin | Number | 2 | 10, 12, … | |
axisX | labelBackgroundColor | String | “transparent” | “red”, “#006400”, … | |
axisX | labelMaxWidth | Number | Automatically Calculated based on Navigator Size | 45, 150, 60, … | |
axisX | labelWrap | Boolean | true | true, false | |
axisX | labelAutoFit | Boolean | true | true, false | |
axisX | labelAngle | Number | 0 | 45,-45, 60, … | |
axisX | labelFontFamily | String | “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” | “tahoma”, “verdana”, … | |
axisX | labelFontColor | String | “black” | “red”, “#006400”, … | |
axisX | labelFontSize | Number | 18 | 25, 30, … | |
axisX | labelFontWeight | String | “normal” | “lighter”, “normal, “bold”, “bolder” | |
axisX | labelFontStyle | String | “normal” | “normal”,“italic”, “oblique” | |
axisX | labelPlacement | String | “outside” | “outside”, “inside” | – |
axisX | labelTextAlign | String | “left” | “left”,”center”,”right” | |
axisX | prefix | String | null | “$”, “#”, … | |
axisX | suffix | String | null | “K”, “m”, … | |
axisX | valueFormatString | String | null | “DD/MM/YYYY”, “##,#0.##”, … | |
axisX | minimum | Number/Date/Timestamp | null | -100, 350, … | |
axisX | maximum | Number/Date/Timestamp | null | 100, 350, … | |
axisX | viewportMinimum | Number/Date/Timestamp | null | -100, 350, … | |
axisX | viewportMaximum | Number/Date/Timestamp | null | 100, 350, … | |
axisX | interval | Number | null | 25, 40, … | |
axisX | intervalType | String | Automatically handled when interval property is not set. Defaults to “number” when you set the interval. | “number”, “millisecond” , “second”, “minute”, “hour”, “day”, “month” , “year” | |
axisX | reversed | Boolean | false | true, false | |
axisX | logarithmic | Boolean | false | true, false | |
axisX | logarithmBase | Number | 10 | 2, 10, … | |
axisX | tickLength | Number | 0 | 15, 20, … | |
axisX | tickColor | String | “black” | “red”, “#006400”, … | |
axisX | tickThickness | Number | 0 | 5, 8, … | |
axisX | lineColor | String | “black” | “red”, “#006400”, … | |
axisX | lineThickness | Number | 0 | 5, 8, … | |
axisX | interlacedColor | String | “transparent” | “#F8F1E4”, “#FEFDDF”, … | |
axisX | gridThickness | Number | 1 | 5, 8, … | |
axisX | gridColor | String | “#A0A0A0” | “red”, “#006400”, … | |
axisX | gridDashType | String | “solid” | “solid”, “shortDash”, “shortDot”, “shortDashDot”, “shortDashDotDot”, “dot”, “dash”, “dashDot”, “longDash”, “longDashDot”, “longDashDotDot” | |
axisX | lineDashType | String | “solid” | “solid”, “shortDash”, “shortDot”, “shortDashDot”, “shortDashDotDot”, “dot”, “dash”, “dashDot”, “longDash”, “longDashDot”, “longDashDotDot” | |
axisX | labelFormatter | Function |
Object | Attributes | Type | Default | Options |
---|---|---|---|---|
axisX | stripLines | Object | ||
axisX | scaleBreaks | Object |
var stockChart = new CanvasJS.StockChart("container", { . . navigator: { . . axisX: { stripLines: {} }, . . } . . }); stockChart.render();
Also See: