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.

JavaScript Charts-Chart Axes

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 titleTextAlign String “left” “left”, “center”, “right”
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.

Try Editing The Code

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.

Try Editing The Code

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.

Try Editing The Code

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.

Try Editing The Code

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.

Try Editing The Code

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.

Try Editing The Code

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.

Try Editing The Code

Finishing it up

We can now plot a multi series chart and assign one of dataSeries to secondary axis.

Try Editing The Code

  Also See:    

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

38 Comments

  1. Omar Zeidan says:

    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.

    • Anjali says:

      [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.

      • Veena says:

        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.

        • Naveen Venugopal says:

          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;

    • Naveen Venugopal says:

      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.

  7. Suneel says:

    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”}]

  8. Veena says:

    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.

  10. ramji says:

    Hi I need to float a chart axisy with custom interval like 25,30,45,85 is that possible do that in axis interval

  11. Anil says:

    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

  12. tuberider says:

    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

  13. Matt says:

    Are there plans to implement scale options? IE, a logarithmic scale vs a linear scale vs a percentile scale?

    • Sanjoy says:

      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”.

  15. Jason says:

    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.

    • Sanjoy says:

      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.

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