A circular gauge can replicate any round instrument, including a compass. By arranging needles, axes, and labels on a full 360-degree sweep, you can build an interactive compass visualization entirely in JavaScript.
This sample simulates a compass using eight needles pointing to the four cardinal (N, E, S, W) and four intercardinal (NE, SE, SW, NW) directions. Each needle is gradient-filled, half dark grey and half white, and sized larger for cardinal directions. Two concentric axes form an outer rose wind with cardinal labels and an inner rose wind with intercardinal labels and tick marks. A central knob with a thick stroke anchors the design.
Follow the step-by-step Circular Gauge Chart Tutorial to learn how such gauges are built. See the Circular Gauge documentation for all configuration options.