Share JSXGraph: example "Axis labels"

Share JSXGraph: example "Axis labels"

This website is a beta version. The official release will be in **2024**.

Javascript is disabled in your browser.

This site includes the JavaScript library JSXGraph to demonstrate its functionalities. To watch this, enable JavaScript in settings of your browser and reload this page.

example

{"id":10118,"alias":"axis-labels","name":"Axis labels","reference":"null","content":"const board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true,\n    defaultAxes: {\n        x: {\n            name: 'Distance (km)',\n            withLabel: true,\n            label: {\n                position: 'rt',\n                offset: [-5, 15],\n                anchorX: 'right'\n            }\n        },\n        y: {\n            withLabel: true,\n            name: 'Y',\n            label: {\n                position: 'rt',\n                offset: [-20, -5],\n                anchorY: 'top'\n            }\n        }\n    }\n});","pre":"","post":"","number_of_boards":1,"description":"For long label texts for the axes it is advisable to use the attributes `anchorX` and `anchorY` to ensure that the labels are visible.","dimensions":[{"width":"100%","height":"","aspect-ratio":"1 \/ 1"}],"large_in_db":0,"license":{"title":"Creative Commons Attribution ShareAlike 4.0 International","identifier":"CC BY-SA 4.0","free":"- Share\r\n- Adapt","restrictions":"- Attribution\r\n- ShareAlike\r\n- No additional restrictions","with_attribution":1,"link":"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/","image":"https:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png","rank":1},"timestamp":"2023-03-16 08:47:49","draft":0,"deleted":0,"tags":[{"id":135,"alias":"axes","name":"Axes"},{"id":143,"alias":"board-options","name":"Board options"},{"id":130,"alias":"technical","name":"Technical"}],"groups":[],"refers_to":[],"authors":[],"unique_ids":["jxgbox-662a22a700dc3"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true,\n    defaultAxes: {\n        x: {\n            name: 'Distance (km)',\n            withLabel: true,\n            label: {\n                position: 'rt',\n                offset: [-5, 15],\n                anchorX: 'right'\n            }\n        },\n        y: {\n            withLabel: true,\n            name: 'Y',\n            label: {\n                position: 'rt',\n                offset: [-20, -5],\n                anchorY: 'top'\n            }\n        }\n    }\n});","code_execute_html":"<div id=\"jxgbox-662a22a700dc3\" class=\"jxgbox shadow\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<script type=\"text\/javascript\">\r\n    (function() {\r\n        let addWrapper = function (boardid, classes = [], styles = \"\") {\r\n            let board = document.getElementById(boardid),\r\n                wrapper, wrapperid = boardid + \"-wrapper\";\r\n            \r\n            wrapper = document.createElement(\"div\");\r\n            wrapper.id = wrapperid;\r\n            wrapper.classList.add(\"jxgbox-wrapper\");\r\n            \r\n            for (let c of classes)\r\n                wrapper.classList.add(c);\r\n                \r\n            wrapper.style = styles;\r\n                \r\n            board.parentNode.insertBefore(wrapper, board.nextSibling);\r\n            wrapper.appendChild(board);\r\n        }\r\n        \r\n        const FORCE_WRAPPER = false || true;\r\n        \r\n        let boardid = \"jxgbox-662a22a700dc3\",\r\n            wrapper_classes = \"p-3\".split(\" \"),\r\n            wrapper_styles = \"width: 100%; \",\r\n            board = document.getElementById(boardid),\r\n            ar, ar_h, ar_w, padding_bottom;\r\n        \r\n        ar = board.dataset.ar;\r\n            \r\n        if (!CSS.supports(\"aspect-ratio\", \"1 \/ 1\") && JXG.exists(ar, true)) {\r\n            \r\n            ar = ar.split(\"\/\", 3);\r\n            ar_w = ar[0].trim();\r\n            ar_h = ar[1].trim();\r\n            padding_bottom = ar_h \/ ar_w * 100;\r\n            \r\n            if (wrapper_styles !== \"\")\r\n                addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n            \r\n            board.style = \"height: 0; padding-bottom: \" + padding_bottom + \"%; \/*\" + board.style + \"*\/\";\r\n            \r\n        } else if (FORCE_WRAPPER) {\r\n            \r\n            wrapper_styles = \"\";\r\n            if (board.style.width.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"width: \" + board.style.width + \"; \"\r\n                board.style.width = \"100%\";\r\n            }\r\n            if (board.style.height.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"height: \" + board.style.height + \"; \"\r\n                board.style.height = \"100%\";\r\n            }\r\n            addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n        }\r\n    })();\r\n        <\/script>","code_execute_html_pre":"","code_execute_html_post":"","code_execute_js":"const BOARDID_662a22a700dc1_0 = 'jxgbox-662a22a700dc3';\nconst BOARDID_662a22a700dc1_ = BOARDID_662a22a700dc1_0;\n\nconst board = JXG.JSXGraph.initBoard(BOARDID_662a22a700dc1_, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true,\n    defaultAxes: {\n        x: {\n            name: 'Distance (km)',\n            withLabel: true,\n            label: {\n                position: 'rt',\n                offset: [-5, 15],\n                anchorX: 'right'\n            }\n        },\n        y: {\n            withLabel: true,\n            name: 'Y',\n            label: {\n                position: 'rt',\n                offset: [-20, -5],\n                anchorY: 'top'\n            }\n        }\n    }\n});","code_export_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution ShareAlike 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'your_div_id'; \/\/ Insert your id here!\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true,\n    defaultAxes: {\n        x: {\n            name: 'Distance (km)',\n            withLabel: true,\n            label: {\n                position: 'rt',\n                offset: [-5, 15],\n                anchorX: 'right'\n            }\n        },\n        y: {\n            withLabel: true,\n            name: 'Y',\n            label: {\n                position: 'rt',\n                offset: [-20, -5],\n                anchorY: 'top'\n            }\n        }\n    }\n});","code_export_html":"<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n\n<script type = \"text\/javascript\"> \n    \/*\n    This example is licensed under a \n    Creative Commons Attribution ShareAlike 4.0 International License.\n    https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n    \n    Please note that you have to mention \n    The Center of Mobile Learning with Digital Technology\n    in the credits.\n    *\/\n    \n    const BOARDID = 'board-0';\n\n    const board = JXG.JSXGraph.initBoard(BOARDID, {\n        boundingbox: [-5, 5, 5, -5],\n        axis: true,\n        defaultAxes: {\n            x: {\n                name: 'Distance (km)',\n                withLabel: true,\n                label: {\n                    position: 'rt',\n                    offset: [-5, 15],\n                    anchorX: 'right'\n                }\n            },\n            y: {\n                withLabel: true,\n                name: 'Y',\n                label: {\n                    position: 'rt',\n                    offset: [-20, -5],\n                    anchorY: 'top'\n                }\n            }\n        }\n    });\n <\/script> ","code_export_jsfiddle_html":"<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n","code_export_jsfiddle_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution ShareAlike 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'board-0';\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: true,\n    defaultAxes: {\n        x: {\n            name: 'Distance (km)',\n            withLabel: true,\n            label: {\n                position: 'rt',\n                offset: [-5, 15],\n                anchorX: 'right'\n            }\n        },\n        y: {\n            withLabel: true,\n            name: 'Y',\n            label: {\n                position: 'rt',\n                offset: [-20, -5],\n                anchorY: 'top'\n            }\n        }\n    }\n});","code_export_html_file":"<!DOCTYPE html>\n<html>\n   <head>\n      <title>Axis labels<\/title>\n      <meta content=\"text\/html; charset=UTF-8\" http-equiv=\"Content-Type\" \/>\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraph.css\" \/>\n      <script src=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraphcore.js\" type=\"text\/javascript\"><\/script>\n      <style type=\"text\/css\">\nbody {\n   font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n<\/style>\n   <\/head>\n   <body>\n      <h1>Axis labels<\/h1>\n      <div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n         <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n      <\/div>\n      \n      <script type = \"text\/javascript\"> \n          \/*\n          This example is licensed under a \n          Creative Commons Attribution ShareAlike 4.0 International License.\n          https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n          \n          Please note that you have to mention \n          The Center of Mobile Learning with Digital Technology\n          in the credits.\n          *\/\n          \n          const BOARDID = 'board-0';\n      \n          const board = JXG.JSXGraph.initBoard(BOARDID, {\n              boundingbox: [-5, 5, 5, -5],\n              axis: true,\n              defaultAxes: {\n                  x: {\n                      name: 'Distance (km)',\n                      withLabel: true,\n                      label: {\n                          position: 'rt',\n                          offset: [-5, 15],\n                          anchorX: 'right'\n                      }\n                  },\n                  y: {\n                      withLabel: true,\n                      name: 'Y',\n                      label: {\n                          position: 'rt',\n                          offset: [-20, -5],\n                          anchorY: 'top'\n                      }\n                  }\n              }\n          });\n       <\/script> \n\n      <div style=\"margin:30px 15px; text-align:center; font-style:italic; font-size:80%;\">\n         <p>\n            <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\" target=\"_blank\"><img alt=\"license\" src=\"https:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png\" style=\"height: 31px; width: auto;\"><\/a>\n         <\/p>\n         <p>\n         This example is licensed under a \n         <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\" target=\"_blank\">Creative Commons Attribution ShareAlike 4.0 International<\/a> License.\n         <\/p>\n         <p>\n         Please note that you have to mention \n         <a href=\"http:\/\/mobile-learning.uni-bayreuth.de\/\" target=\"_blank\">The Center of Mobile Learning with Digital Technology<\/a>\n         in the credits.\n         <\/p>\n      <\/div>\n\n      <p>For more examples have a look at our <a target=\"_blank\" href=\"https:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/axis-labels\">JSXGraph examples database<\/a>.<\/p>\n   <\/body>\n<\/html>\n","code_export_moodle":"<jsxgraph width=\"100%\" aspect-ratio=\"1 \/ 1\" title=\"Axis labels\" description=\"This construction was copied from JSXGraph examples database: https:\/\/jsxgraph.uni-bayreuth.de\/share\/\" useGlobalJS=\"false\">\n   \/*\n   This example is licensed under a \n   Creative Commons Attribution ShareAlike 4.0 International License.\n   https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\n   \n   Please note that you have to mention \n   The Center of Mobile Learning with Digital Technology\n   in the credits.\n   *\/\n   \n   const board = JXG.JSXGraph.initBoard(BOARDID, {\n       boundingbox: [-5, 5, 5, -5],\n       axis: true,\n       defaultAxes: {\n           x: {\n               name: 'Distance (km)',\n               withLabel: true,\n               label: {\n                   position: 'rt',\n                   offset: [-5, 15],\n                   anchorX: 'right'\n               }\n           },\n           y: {\n               withLabel: true,\n               name: 'Y',\n               label: {\n                   position: 'rt',\n                   offset: [-20, -5],\n                   anchorY: 'top'\n               }\n           }\n       }\n   });\n<\/jsxgraph>","link":"https:\/\/jsxgraph.uni-bayreuth.de\/share\/example\/axis-labels","link_raw":"https:\/\/jsxgraph.uni-bayreuth.de\/share\/raw\/axis-labels","alert_deleted":"This example is deprecated and has therefore been flagged as \"*deleted*\"."}

Axis labels

Axes Board options Technical

For long label texts for the axes it is advisable to use the attributes `anchorX` and `anchorY` to ensure that the labels are visible.

// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: true,
    defaultAxes: {
        x: {
            name: 'Distance (km)',
            withLabel: true,
            label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
            }
        },
        y: {
            withLabel: true,
            name: 'Y',
            label: {
                position: 'rt',
                offset: [-20, -5],
                anchorY: 'top'
            }
        }
    }
});

/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: true,
    defaultAxes: {
        x: {
            name: 'Distance (km)',
            withLabel: true,
            label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
            }
        },
        y: {
            withLabel: true,
            name: 'Y',
            label: {
                position: 'rt',
                offset: [-20, -5],
                anchorY: 'top'
            }
        }
    }
});

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: true,
        defaultAxes: {
            x: {
                name: 'Distance (km)',
                withLabel: true,
                label: {
                    position: 'rt',
                    offset: [-5, 15],
                    anchorX: 'right'
                }
            },
            y: {
                withLabel: true,
                name: 'Y',
                label: {
                    position: 'rt',
                    offset: [-20, -5],
                    anchorY: 'top'
                }
            }
        }
    });
 </script>

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Axis labels" description="This construction was copied from JSXGraph examples database: https://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note that you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       axis: true,
       defaultAxes: {
           x: {
               name: 'Distance (km)',
               withLabel: true,
               label: {
                   position: 'rt',
                   offset: [-5, 15],
                   anchorX: 'right'
               }
           },
           y: {
               withLabel: true,
               name: 'Y',
               label: {
                   position: 'rt',
                   offset: [-20, -5],
                   anchorY: 'top'
               }
           }
       }
   });
</jsxgraph>

/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: true,
    defaultAxes: {
        x: {
            name: 'Distance (km)',
            withLabel: true,
            label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
            }
        },
        y: {
            withLabel: true,
            name: 'Y',
            label: {
                position: 'rt',
                offset: [-20, -5],
                anchorY: 'top'
            }
        }
    }
});

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: true,
        defaultAxes: {
            x: {
                name: 'Distance (km)',
                withLabel: true,
                label: {
                    position: 'rt',
                    offset: [-5, 15],
                    anchorX: 'right'
                }
            },
            y: {
                withLabel: true,
                name: 'Y',
                label: {
                    position: 'rt',
                    offset: [-20, -5],
                    anchorY: 'top'
                }
            }
        }
    });
 </script>

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Axis labels" description="This construction was copied from JSXGraph examples database: https://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note that you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       axis: true,
       defaultAxes: {
           x: {
               name: 'Distance (km)',
               withLabel: true,
               label: {
                   position: 'rt',
                   offset: [-5, 15],
                   anchorX: 'right'
               }
           },
           y: {
               withLabel: true,
               name: 'Y',
               label: {
                   position: 'rt',
                   offset: [-20, -5],
                   anchorY: 'top'
               }
           }
       }
   });
</jsxgraph>