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]
        }
      }
    }

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]
        }
      }
    }

• javascript
• jsxgraph

1 Answer 1

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/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/1w9h685L/1/