Search code examples
javascriptjsxgraph

How can the thickness of gridlines in JSXGraph axis plots be changed?


In the default board axes (eg. https://jsfiddle.net/dr63zumf/1/), screenshot and code below, how can I change the thickness or width of the gridlines to make them thicker? There doesn't seem to be an option for this in the documentation.

Thanks,

Rob

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

default grid layout


Solution

  • Answering the comment by Rob:

    It is not possible to have different widths for minorTicks and majorTicks, since internally a ticks-element of one axis is one SVG path. However, there are several workarounds possible:

    1) Do not show minorTicks at all:

    const board = JXG.JSXGraph.initBoard('jxgbox', { 
        boundingbox: [-5, 5, 5, -5], 
        axis:true,
        defaultAxes: {
          x: {
            ticks: {
                strokeWidth: 5,
                minorTicks: 0
            }
          },
          y: {
            ticks: {
               strokeWidth: 5,
               minorTicks: 0
            }
          }
        }
    });
    

    2) If you insist on minor ticks and major ticks, then do not show majorTicks in the default ticks of the default axes, but add thick ticks without minorTicks to the default axes, see https://jsfiddle.net/vf3muqgn/1/:

      const board = JXG.JSXGraph.initBoard('jxgbox', { 
        boundingbox: [-5, 5, 5, -5], 
        axis:true,
        defaultAxes: {
            x: {
            ticks: {
              majorHeight: 0
            }
          },
            y: {
            ticks: {
              majorHeight: 0
            }
          }
        }
      });
    
      board.create('ticks', [board.defaultAxes.x], {
        strokeColor: '#cccccc',
        minorTicks: 0,
        majorHeight: -1,
        strokeWidth: 3
      });
      board.create('ticks', [board.defaultAxes.y], {
        strokeColor: '#cccccc',
        minorTicks: 0,
        majorHeight: -1,
        strokeWidth: 3
      });