How to implement 20x20 dot-based grid

[acherkashin]

I’m trying to implement dot-based grid how it is shown in the following example

Grid Patterns

However, I get unnecessary dots between the ones that I need.

I’m using the following code.

new go.Panel("Grid", { gridCellSize: new go.Size(20, 20), visible: true })
                .add(
                    new go.Shape("LineH", { strokeWidth: 1, strokeDashArray: [0, 19, 1, 0], stroke: '#aaaaaa' }),
                    new go.Shape("LineV", { strokeWidth: 1, strokeDashArray: [0, 19, 1, 0], stroke: '#aaaaaa' })
                );

What is the right way to implement it?

[walter]

You don’t need to have two separate Shapes. Just one will do:

        grid: new go.Panel("Grid", { gridCellSize: new go.Size(20, 20) })
          .add(
            new go.Shape("LineH", { strokeWidth: 0.75, strokeDashArray: [0.75, 19.25] })
          ),

By the way, GraphObjects are visible by default, and Shape.strokeWidth is 1 by default. Also, there’s no need for repeating zeros in the Shape.strokeDashArray.

[acherkashin]

@walter thank you, I have tried the example you’ve provided.
However I get 20x10 grid in this case.

[walter]

Really? That’s odd. Here’s what I got (zoomed in for clarity) in the sample from which I copied the above code:

[acherkashin]

@walter sorry it is my falt. It works as expected. Thank you for the help 👍