Adjust the visual appearance

From JSXGraph Wiki
Jump to: navigation, 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.