Adjust the visual appearance

From JSXGraph Wiki
Revision as of 07:54, 14 December 2011 by Michael (talk | contribs) (Created page with "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 [http://jsxg...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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.