Consider leveraging Bamboo/AxisArrowNode

[veillette]

While reviewing usages of modelViewTransform that could be converted to chartTransform, I came across this:

   // create and add the arrow to the number line
    const tailX = particleType === ParticleType.NEUTRON ? modelViewTransform.modelToViewX( modelXStartRange - 1 ) : tickMarkSet.centerX;
    const tailY = particleType === ParticleType.NEUTRON ? tickMarkSet.centerY : modelViewTransform.modelToViewY( modelXStartRange + 1 );
    const tipX = particleType === ParticleType.NEUTRON ? modelViewTransform.modelToViewX( modelXEndRange + 1 ) : tickMarkSet.centerX;
    const tipY = particleType === ParticleType.NEUTRON ? tickMarkSet.centerY : modelViewTransform.modelToViewY( -( modelXEndRange + 1 ) );
    const numberLine = new ArrowNode( tailX, tailY, tipX, tipY, {
      stroke: Color.BLACK,
      tailWidth: 0.5,
      headWidth: 5
    } );

AxisArrowNode might be a more appropriate use than ArrowNode since it does all the work for you. AxisArrowNode extends ArrowNode and takes a chartTransform as an argument. The option field extension might be useful for your use case.

class AxisArrowNode extends ArrowNode {
  private readonly chartTransform: ChartTransform;
  private readonly value: number;
  private readonly extension: number;
  private readonly axisOrientation: Orientation;
  private disposeAxisNode: () => void;

  public constructor( chartTransform: ChartTransform, axisOrientation: Orientation, providedOptions?: AxisArrowNodeOptions ) {

    const options = optionize<AxisArrowNodeOptions, SelfOptions, ArrowNodeOptions>()( {
      value: 0, // by default the axis is at 0, but you can put it somewhere else
      extension: 20,

      // ArrowNode options
      doubleHead: true,
      headHeight: 10,
      headWidth: 10,
      tailWidth: 2
    }, providedOptions );
   ...

[veillette]

This was done in https://github.com/phetsims/build-a-nucleus/commit/ca43fbf53a401b869333d3260af78c306a9e1957

[veillette]

The work is done here. Closing