D3.js axis.orient() Function Last Updated : 13 Aug, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report The d3.axis.orient() Function in D3.js is used to set the orientation and returns the axis. If the orientation is not specified, returns the current orientation which defaults to "bottom". Syntax: axis.orient([orientation]) Parameters: This function accepts a single parameter as mentioned above and described below: orientation: This parameter is size to set the orientation of the axis. Four orientation is supported are: "top", "bottom". "left" and "right". Return Value: This function returns the axis. Below programs illustrate the d3.axis.orient() function in D3.js: Example 1: HTML <html> <head> <title> D3.js | d3.axis.orient() Function </title> <script src = "//d3js.org/d3.v3.min.js"></script> </head> <body> <script> var svg = d3.select("body").append("svg") .attr("width", 400) .attr("height", 400); // Create the Scale we will use for the Axis var axisScale = d3.scale.linear() .domain([0, 100]) .range([0, 300]); // Create the Axis var xAxis = d3.svg.axis() .scale(axisScale) .orient("top"); // Create an SVG group Element for the Axis // elements and call the xAxis function svg.append("g") .attr("transform", "translate(50,50)") .call(xAxis); </script> </body> </html> Output: Example 2: HTML <html> <head> <title> D3.js | d3.axis.orient() Function </title> <script src = "//d3js.org/d3.v3.min.js"></script> </head> <body> <script> var svg = d3.select("body").append("svg") .attr("width", 400) .attr("height", 400); // Create the Scale we will use for the Axis var axisScale = d3.scale.linear() .domain([0, 100]) .range([0, 300]); // Create the Axis var xAxis = d3.svg.axis() .scale(axisScale) .orient("left"); // Create an SVG group Element for the Axis // elements and call the xAxis function svg.append("g") .attr("transform", "translate(50,50)") .call(xAxis); </script> </body> </html> Output: Example 3: HTML <html> <head> <title> D3.js | d3.axis.orient() Function </title> <script src = "//d3js.org/d3.v3.min.js"></script> </head> <body> <script> var svg = d3.select("body").append("svg") .attr("width", 400) .attr("height", 400); // Create the Scale we will use for the Axis var axisScale = d3.scale.linear() .domain([0, 100]) .range([0, 300]); // Create the Axis var xAxis = d3.svg.axis() .scale(axisScale) .orient("right"); // Create an SVG group Element for the Axis // elements and call the xAxis function svg.append("g") .attr("transform", "translate(50,50)") .call(xAxis); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article D3.js axis.tickSize() Function S SHUBHAMSINGH10 Follow Improve Article Tags : JavaScript Web Technologies D3.js Similar Reads D3.js axis.tickFormat() Function The d3.axis.tickFormat() Function in D3.js is used to control which ticks are labeled. This function is used to implement your own tick format function.Syntax:axis.tickFormat([format])Parameters: This function accepts the following parameters.format: These parameters are format to set the tick forma 2 min read D3.js axis.tickValues() Function The d3.axis.tickValues() Function is used to generate ticks at specific values. This function returns the current tick values, which defaults to null.Syntax:axis.tickValues([values])Parameters: This function accepts the following parameters.values: This parameter is used for ticks rather than using 2 min read D3.js axisBottom() Function Axes can be drawn using built-in D3 functions. This is made of Lines, Ticks and Labels. The d3.axisBottom() function in D3.js is used to create a bottom horizontal axis. This function will construct a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 2 min read D3.js axis.ticks() Function The d3.axis.ticks() Function in D3.js is used to control which ticks are displayed by the axis. This function returns the axis generator Syntax: axis.ticks(arguments…) axis.ticks([count[, specifier]]) axis.ticks([interval[, specifier]]) Parameters: This function accepts the following parameters. cou 2 min read D3.js axis.tickSize() Function The d3.axis.tickSize() function in D3.js is used to set the inner and outer tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6. Syntax: axis.tickSize([size]) Parameters: This function accepts single parameter as m 2 min read D3.js axisLeft() Function Axes can be drawn using built-in D3 functions. It is made of Lines, Ticks and Labels. Axis API can be configured using the following script. <script src = "https://d3js.org/d3-axis.v1.min.js"></script> The d3.axisLeft() function in D3.js is used to create a left vertical axis. This funct 2 min read D3.js axis.tickSizeOuter() Function The d3.axis.tickSizeOuter() Function in D3.js is used to set the outer tick size to the specified value and returns the axis. The outer tick size controls the length of the square ends of the domain path, offset from the native position of the axis. Syntax: axis.tickSizeOuter([size]) Parameters: Thi 2 min read D3.js axis.tickPadding() Function The d3.axis.tickPadding() Function in D3.js is used to set the padding to the specified value in pixels and returns the axis. Syntax: axis.tickPadding([padding]) Parameters: This function accepts a single parameter as mentioned above and described below: padding: This parameter is size to set the pa 2 min read D3.js axis.scale() Function The d3.axis.scale() Function in D3.js is used to sets the scale and return the axis. If this function is not provided with a specified scale, returns the current scale. Syntax: axis.scale([scale]) Parameters: This function accepts only a single parameter as mentioned above and described below: scale 2 min read D3.js axisRight() Function Axes can be drawn using built-in D3 functions. This is made of Lines, Ticks and Labels. The d3.axisRight() function in D3.js is used to create a vertical right-oriented axis. This function will construct a new right-oriented axis generator for the given scale, with empty tick arguments, a tick size 2 min read Like