Overview – Axis Elements in Chart
Axis is the reference scale corresponding to which charts are plotted. CanvasJS supports four Axis Types. Primary X Axis, Secondary X Axis, Primary Y Axis, and Secondary Y Axis.
Below image shows Placements of all Four Axis Types for a column chart.
Syntax
var chart = new CanvasJS.Chart("container",
{
.
.
axisX:{
title : "Primary X Axis"
},
axisX2:{
title : "Secondary X Axis"
},
axisY:{
title : "Primary Y Axis"
},
axisY2:{
title : "Secondary Y Axis"
},
.
.
});
chart.render();
Charts support Multiple X / Y Axis
You can have more than one axis on each side. For example, you can have 2 or more Primary Y Axis which are placed next to each other and have different series rendering against them as shown below.
Notes- 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.
Axis properties (axisX, axisY, etc) can either be an object (with one axis) or an array of axis objects when you need multiple X / Y Axis as shown below.
var chart = new CanvasJS.Chart("container",
{
.
.
axisX:{
title : "Primary X Axis"
},
// Multiple Y Axis
axisY: [{
title : "1st Primary Y Axis"
},
{
title : "2nd Primary Y Axis"
}],
.
.
});
chart.render();
Axis Object
Each Axis object and can be customized using various attributes.
There are number of attributes we can set inside axis object and Style it the way we want to. Below is a list of important axis properties.
| Applies To | Attribute | Type | Default | Examples |
|---|---|---|---|---|
| axisX/axisX2/axisY/axisY2 | title | String | null | Axis Title” |
| axisX/axisX2/axisY/axisY2 | titleFontColor | String | “black” | “red”, “#006400” .. |
| axisX/axisX2/axisY/axisY2 | titleFontSize | Number | 20 | 25, 30 .. |
| axisX/axisX2/axisY/axisY2 | titleFontFamily | String | “arial” | “arial” , “tahoma”, “verdana” .. |
| axisX/axisX2/axisY/axisY2 | titleFontWeight | String | “normal” | “lighter”, “normal, “bold”, “bolder” |
| axisX/axisX2/axisY/axisY2 | titleFontStyle | String | ““normal”” | “normal”,“italic”, “oblique” |
| axisX/axisX2/axisY/axisY2 | margin | Number | 2 | 10, 12 .. |
| axisX/axisX2/axisY/axisY2 | lineColor | String | “black” | “red”, “#006400” .. |
| axisX/axisX2/axisY/axisY2 | lineThickness | Number | 1 | 5, 8.. |
| axisX/axisX2/axisY/axisY2 | lineDashType | String | “solid” | “dot”,”dash”.. |
| axisX/axisX2/axisY/axisY2 | minimum | Number | null | -100, 350.. |
| axisX/axisX2/axisY/axisY2 | maximum | Number | null | -100, 350.. |
| axisX/axisX2/axisY/axisY2 | viewportMinimum | Number | null | -100, 350.. |
| axisX/axisX2/axisY/axisY2 | viewportMaximum | Number | null | -100, 350.. |
| axisX/axisX2/axisY/axisY2 | logarithmic | Boolean | false | true, false |
| axisX/axisX2/axisY/axisY2 | reversed | Boolean | false | true, false |
| axisX/axisX2/axisY/axisY2 | labelPlacement | String | “outside” | “outside”, “inside” |
| axisX/axisX2/axisY/axisY2 | labelTextAlign | String | “left” | “left”, “center”, “right” |
Axis Type
CanvasJS supports four axis types – “axisX”, “axisX2”, “axisY”, “axisY2”. Each of the axis is a separate object, allowing you to set different set of properties for each of them. You can also have multiple axis on each side.
axisX: Primary X Axis
axisX is mostly horizontal and drawn at the bottom of plotArea, except when we are working with Bar Charts, where axisX is vertical axis on the left side of plotArea.
In the next example we customize axisX by setting various properties.
axisX2: Secondary X Axis
axisX2 is mostly horizontal and drawn at the top of plotArea, except when we are working with Bar Charts, where axisX2 is vertical axis on the right side of plotArea.
In the below example we customize Secondary X Axis (axisX2) by setting various properties.
axisY: primary Y Axis
axisY is mostly vertical axis on the left side of plotArea, except when we are working with Bar Charts, where axisY is horizontal and below the plotArea.
By default, all series are plotted against primary Y axis.
In the next example we customize axisY by setting various properties.
axisY2: secondary Y Axis
axisY2 is mostly vertical axis on the right side of plotArea, except when we are working with Bar Charts, where axisY is horizontal and drawn on top of the plotArea.To set a series to plot against secondary Y axis, Set property in axisYType to “secondary”
It contains all attributes of axisY. It is plotted opposite to where axisY would be plotted.
In the next example we customize axisY2 by setting various properties.
Multiple X / Y Axis
CanvasJS Supports multiple X / Y Axis. That way you can create more than one axis and have one more data series render against each one of them. This is useful when you have multiple data series with different range of values. If you have Multiple X / Y Axis, they are rendered next to each other. In order to assign a dataSeries to an axis, you need to set axisYIndex of that series as shown in the example.
Below is an example on creating multiple Y Axis.
Axis Range
Range for the Axis can be set using minimum and maximum attributes. It defines the limit for viewport and panning . ViewportRange for the Axis can be set using viewportMinimum and viewportMaximum, which defines the portion of Range to be visible.
| Applies To | Attribute | Type | Default | Examples |
|---|---|---|---|---|
| axisX/axisX2/axisY/axisY2 | minimum | Number | null | -100, 350.. |
| axisX/axisX2/axisY/axisY2 | maximum | Number | null | -100, 350.. |
| axisX/axisX2/axisY/axisY2 | viewportMinimum | Number | null | -100, 350.. |
| axisX/axisX2/axisY/axisY2 | viewportMaximum | Number | null | -100, 350.. |
Below is a random data generator that runs from -500 to +500 . We can choose the range by setting minimum and maximum in that axis.
Vary the minimum and maximum value in the below editor to change the axis range.
Viewport Range
Axis allows you to select viewport range by using viewportMinimum and viewportMaximum properties. These two properties can be used in zooming/panning into a range programmatically or to set initial zoom level when you have large number of data. Below is an example where we set initial zoom level in the chart.
Finishing it up
We can now plot a multi series chart and assign one of dataSeries to secondary axis.
Comments 38
How to give the Y-axis a specific step, for example (200) each and start from 0 so (0, 200, 400 …) and step numbers are 5 so it will stop on (800)? Would be awesome if this option in there. Thanks.
Thanks, got it, using the interval and minimum options :)
coOL STUFF.
amazing work!
I there a way i can have the x-axis displaying at the top, rather than the bottom?
Thanks
This feature is not available yet.
hello. is it possible to have to have 2 x-axis? thanks.
[Update]
We have just released v1.9.5 Beta which supports Secondary X Axis and Multiple X / Y Axis. Please refer to the release blog for more information.
lyndonjohn,
Sorry, as of now secondary axis is available only in case of y axis.
Is there any way to set the scaling of axis Y2 in proportion to axis axis Y. For example if interval for the axis Y1 is 2 then y2 should take the interval 4 times of the y1, i.e 8. Waiting for the response.
Veena,
Only way to do this is by setting interval of axisY and axisY2 yourself as shown below.
var scale = 4;chart.options.axisY.interval = 2;
chart.options.axisY2.interval = scale * chart.options.axisY.interval;
I want to show years in decreasing order. Can anyone help me with this.
Version 1.7.0 doesn’t have axis reversal feature. But we are implementing that in version 1.8.0 which will be available in a month.
is it possible to show years in decreasing order in x-axis in scatter plot. My data points are
[{“label”:”2015″,”x”:”2015-01-31T18:30:00.000Z”,”y”:850000,”percentile”:”50 Percentile”},{“label”:”2014″,”x”:”2014-01-31T18:30:00.000Z”,”y”:1000000,”percentile”:”50 Percentile”},{“label”:”2013″,”x”:”2013-01-31T18:30:00.000Z”,”y”:650000,”percentile”:”50 Percentile”},{“label”:”2012″,”x”:”2012-01-31T18:30:00.000Z”,”y”:470000,”percentile”:”50 Percentile”},{“label”:”2011″,”x”:”2011-01-31T18:30:00.000Z”,”y”:500000,”percentile”:”50 Percentile”},{“label”:”2010″,”x”:”2010-01-31T18:30:00.000Z”,”y”:450000,”percentile”:”50 Percentile”},{“label”:”2009″,”x”:”2009-01-31T18:30:00.000Z”,”y”:425000,”percentile”:”50 Percentile”},{“label”:”2008″,”x”:”2008-01-31T18:30:00.000Z”,”y”:315000,”percentile”:”50 Percentile”},{“label”:”2007″,”x”:”2007-01-31T18:30:00.000Z”,”y”:260000,”percentile”:”50 Percentile”},{“label”:”2006″,”x”:”2006-01-31T18:30:00.000Z”,”y”:220000,”percentile”:”50 Percentile”},{“label”:”2005″,”x”:”2005-01-31T18:30:00.000Z”,”y”:195000,”percentile”:”50 Percentile”},{“label”:”2015″,”x”:”2015-01-31T18:30:00.000Z”,”y”:850000,”percentile”:”20 Percentile”},{“label”:”2014″,”x”:”2014-01-31T18:30:00.000Z”,”y”:950000,”percentile”:”20 Percentile”},{“label”:”2013″,”x”:”2013-01-31T18:30:00.000Z”,”y”:650000,”percentile”:”20 Percentile”},{“label”:”2012″,”x”:”2012-01-31T18:30:00.000Z”,”y”:300000,”percentile”:”20 Percentile”},{“label”:”2011″,”x”:”2011-01-31T18:30:00.000Z”,”y”:500000,”percentile”:”20 Percentile”},{“label”:”2010″,”x”:”2010-01-31T18:30:00.000Z”,”y”:400000,”percentile”:”20 Percentile”},{“label”:”2009″,”x”:”2009-01-31T18:30:00.000Z”,”y”:395000,”percentile”:”20 Percentile”},{“label”:”2008″,”x”:”2008-01-31T18:30:00.000Z”,”y”:280000,”percentile”:”20 Percentile”},{“label”:”2007″,”x”:”2007-01-31T18:30:00.000Z”,”y”:170000,”percentile”:”20 Percentile”},{“label”:”2006″,”x”:”2006-01-31T18:30:00.000Z”,”y”:180000,”percentile”:”20 Percentile”},{“label”:”2005″,”x”:”2005-01-31T18:30:00.000Z”,”y”:155000,”percentile”:”20 Percentile”},{“label”:”2015″,”x”:”2015-01-31T18:30:00.000Z”,”y”:868686,”percentile”:”80 Percentile”},{“label”:”2014″,”x”:”2014-01-31T18:30:00.000Z”,”y”:1100000,”percentile”:”80 Percentile”},{“label”:”2013″,”x”:”2013-01-31T18:30:00.000Z”,”y”:700000,”percentile”:”80 Percentile”},{“label”:”2012″,”x”:”2012-01-31T18:30:00.000Z”,”y”:600000,”percentile”:”80 Percentile”},{“label”:”2011″,”x”:”2011-01-31T18:30:00.000Z”,”y”:1100000,”percentile”:”80 Percentile”},{“label”:”2010″,”x”:”2010-01-31T18:30:00.000Z”,”y”:600000,”percentile”:”80 Percentile”},{“label”:”2009″,”x”:”2009-01-31T18:30:00.000Z”,”y”:470000,”percentile”:”80 Percentile”},{“label”:”2008″,”x”:”2008-01-31T18:30:00.000Z”,”y”:370000,”percentile”:”80 Percentile”},{“label”:”2007″,”x”:”2007-01-31T18:30:00.000Z”,”y”:310000,”percentile”:”80 Percentile”},{“label”:”2006″,”x”:”2006-01-31T18:30:00.000Z”,”y”:275000,”percentile”:”80 Percentile”},{“label”:”2005″,”x”:”2005-01-31T18:30:00.000Z”,”y”:250000,”percentile”:”80 Percentile”}]
Is there any way to set the scaling of axis Y2 in proportion to axis axis Y. For example if interval for the axis Y1 is 2 then y2 should take the interval 4 times of the y1, i.e 8. Waiting for the response.
Hi ! Can I simply hide the axisY ?
Oups..
Ok with :
axisY:{
lineThickness:0,
tickThickness:0,
valueFormatString:” “,
},
Hi I need to float a chart axisy with custom interval like 25,30,45,85 is that possible do that in axis interval
Variable intervals cannot be set inside axis. But you can use stripLines as a workaround.
Hi,
For X axis, I want to set interval as random.
Is it possible?
Like, whatever the data is returned from server, it should display without defined intervals
It is possible. If you just don’t set the interval, it is automatically calculated.
In fact, I didn’t put any interval for axis X.
axisX: {
valueFormatString: “hh:mm:ss”,
title: “Time”,
gridColor: “white”,
gridThickness: 0,
labelFontSize: 13
}
Then it should automatically display chart with right interval. Can you please create a jsfiddle with your code and explain the expected result in detail.
Hi Sunil,
Thanks for your reply.
Please see here
http://jsfiddle.net/1ekxfh2w/
You can use label to do the same as shown here.
But label looks dumb.
If the time points are not in proper order, Label will show them as they are. (try adding
{label:new Date( “Fri Jan 01 1960 ” + “11:45:00″ + ” GMT+0530 (IST)”),
y: 20}
{label:new Date( “Fri Jan 01 1960 ” + “11:40:00″ + ” GMT+0530 (IST)”),
y: 20}
}
It’ll not sort them …
How do I force the x label to display, currently I am using the calendar months as x (Jan – Dec) but only every second month label is showing (column is displaying though) i.e. feb, apr, jun. If I expand the width of the chart above 1000 all months are showing but I want to use width 500
Labels are skipped automatically to avoid overlapping. You can set interval to 1 and intervalType as “month” to force axisX to display all months.
Hi Naveen,
Works perfect, thank you
-M
Are there plans to implement scale options? IE, a logarithmic scale vs a linear scale vs a percentile scale?
[Update]
We have just released v1.9.0 with Logarithmic Axis. Please checkout gallery page for Logarithmic Scale.
Yes, Logarithmic scale is on our roadmap. But we don’t have a timeline yet.
Thank you. I have to say, I am impressed by the quality of the charting tool, but even more so, the responsiveness of the developers.
Was wondering if there was an update to the schedule for the Logarithmic scales?
[Update]
We have just released v1.9.0 with Logarithmic Axis. Please checkout gallery page for Logarithmic Scale.
Sorry Matt,
Logarithmic scale is on our roadmap.But we have’t set a timeline yet. You can try this workaround for the same.
Whoa. Good workaround. You guys are amazing…
[Update]
We have just released v1.9.0 Beta-1 with logarithmic axis. Please refer to the release blog for more information.
is it possible to have two Y Axis for one data series?
Mahmood Mazloomi,
Sorry, as of now CanvasJS doesn’t support two y axis simultaneously in single dataSeries. But you can have a workaround by adding a same dataseries with axisYType to “secondary”.
Is it possible to format a portion of the axis title? For example, I want to put acceleration on one axis, and its units are m/s^2 (superscript the 2). The axis title text doesn’t seem to accept HTML formatting, so I was curious if there was another method.
Sorry Jason, formatting a portion of axis title is not available as of now.
We accept uni-code character in a string. So, using
\u00B2(uni-code of superscript 2) you will be able to show 2 as superscript in title.