javascriptjsxgraph

How to create jsxgraph with only positive axes including zero?


As the title says, how do I define the default axes (both x and y) so that they start with 0, only go in positive direction, and have a tick and a label at zero?

I figured out that straightFirst: false forces a non-negative axis and drawZero should add a label/major tick at 0. However, they do not seem to work together. Any ideas?

Here is the relevant part:

    axis:true,
    defaultAxes: {
      x: {
        straightFirst: false,
        strokeWidth: 1,
        strokeColor: "#000000",
        ticks: {
          strokeColor: "#000000",
          drawZero: true,
          insertTicks: false,
          ticksDistance: 1,
          strokeOpacity: 1,
          strokeWidth: 1,
          majorHeight: 5,
          minorTicks: false,
          majorTickEndings: [0,1]
        }
      },
      y: {
        straightFirst: false,
        strokeWidth: 1,
        strokeColor: "#000000",
        ticks: {
          drawZero: true,
          strokeColor: "#000000",
          insertTicks: false,
          ticksDistance: 1,
          strokeOpacity: 1,
          strokeWidth: 1,
          majorHeight: 5,
          minorTicks: false,
          majorTickEndings: [1,0]
        }
      }
    }

Solution

  • This can be controlled with the attribute includeBoundaries which is set to false by default. The following code should display the tick and label at zero:

        defaultAxes: {
          x: {
            straightFirst:false,
            strokeWidth: 1,
            strokeColor: "#000000",
            ticks: {
              strokeColor: "#000000",
              includeBoundaries: true, // <--- this
              drawZero: true,
              insertTicks: false,
              ticksDistance: 1,
              strokeOpacity: 1,
              strokeWidth: 1,
              majorHeight: 5,
              minorTicks:false,
              majorTickEndings: [0,1]} },
          y: {
            straightFirst:false,
            strokeWidth: 1,
            strokeColor: "#000000",
            ticks: {
              includeBoundaries: true, // <--- this
              drawZero: true,
              strokeColor: "#000000",
              insertTicks: false,
              ticksDistance: 1,
              strokeOpacity: 1,
              strokeWidth: 1,
              majorHeight: 5,
              minorTicks:false,
              majorTickEndings: [1,0]} }
        }    
    

    See it live at https://jsfiddle.net/g15fba0v/.

    Alternatively, in certain cases, the following hack might be necessary:

    board.defaultAxes.x.point1.moveTo([-0.001, 0]);
    board.defaultAxes.y.point1.moveTo([0, -0.001]);
    

    See it live at https://jsfiddle.net/1w9h685L/1/