Adjust the visual appearance

From JSXGraph Wiki
Jump to navigationJump to search

Sometimes it is necessary to adjust the visual appearance of JSXGraph to your website. Instead of setting attributes on every board.create call, you could adjust the JXG.Options object:

JXG.Options.showNavigation = false;
JXG.Options.strokeColor: '#bbb';
JXG.Options.elements.strokeColor: '#6BBA70';

Put your default options like that into a separate .js file and load it after JSXGraph. To save some bandwidth and reduce the amount of typing/copy&paste, you could use JXG.deepCopy:

JXG.Options = JXG.deepCopy(JXG.Options, {
    showNavigation: false,

    navbar: {
        strokeColor: '#bbb',
        fillColor: 'none'

    elements: {
        strokeColor: '#6BBA70',
        highlightStrokeColor: '#84e68a',
        strokeOpacity: 0.6,

    point: {
        face: 'o',
        size: 4,
        fillColor : '#eeeeee',
        highlightFillColor : '#eeeeee',
        strokeColor : 'white',
        highlightStrokeColor : 'white',
        showInfobox: false

See Options.js for all available options.